Initial commit

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>

javascript/samples/get-dom-element.mdx

@@ -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(...)
+    },
+}
+```

javascript/samples/pointer-position.md

@@ -0,0 +1,60 @@
+---
+hide_title: true
+hide_table_of_contents: true
+title: Pointer position example
+---
+
+import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
+
+# Pointer position example
+
+<div class="ndl-image-with-background xl">
+    
+     <CopyToClipboardButton json={{"nodes":[{"id":"0f09b7cb-50ab-74b8-52c1-7058a0769284","type":"Javascript2","label":"Pointer Position","x":-497.981910869314,"y":389.26538248207396,"parameters":{"code":"function setPosition(e) {\n    Script.Outputs.PointerX = e.clientX;\n    Script.Outputs.PointerY = e.clientY;\n}\n\nScript.OnInit = function() {\n     document.body.addEventListener(\"mousemove\", setPosition);\n\t document.body.addEventListener(\"mousedown\", setPosition);\n}\n\nScript.OnDestroy = function() {\n\t document.body.removeEventListener(\"mousedown\", setPosition);\n\t document.body.removeEventListener(\"mousemove\", setPosition);    \n}"},"ports":[],"children":[]},{"id":"bdc3ce12-5c23-27ee-7918-ad154b20e668","type":"Number","label":"X","x":-249.18868850167155,"y":333.4616732156818,"parameters":{},"ports":[],"children":[]},{"id":"efbbb196-1b60-27f2-26c6-e7fc0d69d23d","type":"Number","label":"Y","x":-256.3223936828915,"y":481.4925282575018,"parameters":{},"ports":[],"children":[]}],"connections":[{"fromId":"0f09b7cb-50ab-74b8-52c1-7058a0769284","fromProperty":"PointerX","toId":"bdc3ce12-5c23-27ee-7918-ad154b20e668","toProperty":"value"},{"fromId":"0f09b7cb-50ab-74b8-52c1-7058a0769284","fromProperty":"PointerY","toId":"efbbb196-1b60-27f2-26c6-e7fc0d69d23d","toProperty":"value"}]}} />
+
+![](/javascript/samples/pointer-position/pointer-position.png)
+</div>
+
+This example will attach an event listener to the body element of the web page, and listen for `mousemove`.
+
+```js
+Script.OnInit = function () {
+    document.body.addEventListener('mousemove', (e) => {
+        Script.Outputs.PointerX = e.clientX
+        Script.Outputs.PointerY = e.clientY
+    })
+}
+```
+
+Now lets extend this to also include the `mousedown` event, so it updates directly when a pointer event starts, not just when it moves. Since we need the same code twice we can add it to a function.
+
+```js
+function setPosition(e) {
+    Script.Outputs.PointerX = e.clientX
+    Script.Outputs.PointerY = e.clientY
+}
+
+Script.OnInit = function () {
+    document.body.addEventListener('mousemove', setPosition)
+    document.body.addEventListener('mousedown', setPosition)
+}
+```
+
+We can extend this even further by removing the event listener when the JavaScript node is destroyed. This can happen when a user navigates from a page that runs this code, or when a component with this code is generated by a **Repeater** node.
+
+```js
+function setPosition(e) {
+    Script.Outputs.PointerX = e.clientX
+    Script.Outputs.PointerY = e.clientY
+}
+
+Script.OnInit = function () {
+    document.body.addEventListener('mousemove', setPosition)
+    document.body.addEventListener('mousedown', setPosition)
+}
+
+Script.OnDestroy = function () {
+    document.body.removeEventListener('mousedown', setPosition)
+    document.body.removeEventListener('mousemove', setPosition)
+}
+```