durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
javascript/samples/get-dom-element.mdx Normal file
View File

@@ -0,0 +1,47 @@
---
hide_title: true
hide_table_of_contents: true
title: Get DOM element
---
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
# Get DOM element
<div class="ndl-image-with-background xl">
<CopyToClipboardButton json={{"nodes":[{"id":"da9a319e-46ae-0bba-f9f0-64115fd8326a","type":"Group","x":-26,"y":-78.00000000000003,"parameters":{},"ports":[],"children":[]},{"id":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","type":"Javascript2","label":"Get DOM Element","x":-266,"y":-87,"parameters":{"code":"Script.Inputs = {\n group:\"reference\"\n}\n\nScript.Signals = {\n didMount() {\n const domElement = Script.Inputs.group.getDOMElement();\n //domElement.addEventListener(...)\n },\n willUnmount() {\n // const domElement = Script.Inputs.group.getDOMElement();\n // domElement.removeEventListener(...)\n }\n}\n","scriptInputs":[]},"ports":[],"children":[]}],"connections":[{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"didMount","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"didMount"},{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"willUnmount","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"willUnmount"},{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"this","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"group"}]}} />
![](/javascript/samples/get-dom-element/get-dom-element.png)
</div>
Sometimes you need to get access to the underlying DOM element and use the browser APIs directly.
To get from a visual Noodl node to a DOM element we'll connect a visual node to a Script node. The input type should be `"reference"` (or `"*"` to accept all types). This example uses a Group, but any visual node will work.
```js
Script.Inputs = {
group: 'reference',
}
```
Once we have the reference to a Noodl node we can get the DOM element reference with `getDOMElement()` on the Noodl node.
A visual node might be unmonted, or haven't had a chance to render yet. To make sure there's a DOM element we'll use the **Did Mount** output from the Noodl node. This makes sure we'll get the latest DOM reference, and that our code won't run until the visual node is actually rendered.
```js
Script.Inputs = {
group: 'reference',
}
Script.Signals = {
didMount() {
const domElement = Script.Inputs.group.getDOMElement()
//domElement.addEventListener(...)
},
willUnmount() {
// const domElement = Script.Inputs.group.getDOMElement();
// domElement.removeEventListener(...)
},
}
```