jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update demo

This commit is contained in:
“chrisshank” 2024-12-20 13:32:35 -08:00
parent e2234b8021
commit 01397c52ac
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
website/canvas/event-propagators-with-device-gravity.html
View File

@ -34,6 +34,7 @@
</style> </style>
</head> </head>
<body> <body>
<button onclick="enableGravity">Enable Gravity</button>
<folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape> <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<folk-shape id="box2" x="200" y="350">Hello World</folk-shape> <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
<folk-event-propagator <folk-event-propagator
@ -62,12 +63,24 @@ rotation: from.x"
const ropes = Array.from(document.querySelectorAll('folk-event-propagator')); const ropes = Array.from(document.querySelectorAll('folk-event-propagator'));
DeviceOrientationEvent?.requestPermission(); function onDeviceOrientation(e) {
window.addEventListener("deviceorientation", (event) => {
console.log(event); console.log(event);
// ropes.forEach(rope => { rope.gravity = { x: 0, y: 0} }) // ropes.forEach(rope => { rope.gravity = { x: 0, y: 0} })
}); }
async function enableGravity() {
if (DeviceOrientationEvent.requestPermission) {
const permission = await DeviceOrientationEvent.requestPermission();
if (permission === "granted") {
window.addEventListener("deviceorientation", onDeviceOrientation);
} else {
console.warn('Permission for device orientation rejected', permission)
}
} else {
window.addEventListener("deviceorientation", onDeviceOrientation);
}
}
</script> </script>
</body> </body>
</html> </html>