Changeset 37533

Timestamp:

2023-03-17T16:44:58+13:00 (7 days ago)

Author:

davidb

Message:

Initial work on having a winboxjs window working with interact.js

File:

• gs3-extensions/tabletop-dl/trunk/tabletop.html (modified) (3 diffs)

gs3-extensions/tabletop-dl/trunk/tabletop.html

@@ -18 +18 @@
     <script src="winbox-dist/js/winbox.min.js"></script>
     -->
+    <link rel="stylesheet" href="src/winbox-with-interactjs/dist/css/winbox.min.css">
+    <script src="src/winbox-with-interactjs/dist/js/winbox.min.js"></script>
     
     <script src="interactjs-dist/interact.min.js"></script>
@@ -81 +83 @@
       
     </div>
+
+    <!--
+    <div id="my-own-window"
+         style="position: absolute; left: 30px; top: 430px; width: 400px; height: 300px; background-color: red;">
+    </div>
+    -->
     
+      
       </div>
       <div class="row footer" style="display:none;">
@@ -105 +114 @@
             });
     });
+
+
+    const win = new WinBox({
+        id:    "my-winbox",
+        title: 'My Window2',
+        width: '400px',
+        height: '400px',
+    });
+
+    interact('#my-winbox')
+        .draggable({
+        // enable inertial throwing
+        inertia: true,
+        // keep the element within the area of it's parent
+        modifiers: [
+            interact.modifiers.restrictRect({
+            restriction: 'parent',
+            endOnly: true
+            })
+        ],
+        // enable autoScroll
+        autoScroll: true,
+        
+        listeners: {
+            // call this function on every dragmove event
+            move: dragMoveListener,
+            
+            // call this function on every dragend event
+            end (event) {
+            var textEl = event.target.querySelector('p')
+            
+            textEl && (textEl.textContent =
+                   'moved a distance of ' +
+                   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
+                          Math.pow(event.pageY - event.y0, 2) | 0))
+                   .toFixed(2) + 'px')
+            }
+        }
+        });
+
     });