durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +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

60
javascript/samples/pointer-position.md Normal file
View File

@@ -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)
}
```