Changeset 37466

Timestamp:

2023-03-12T17:12:26+13:00 (12 days ago)

Author:

davidb

Message:

Added in text window that can be zoomed and dragged

Location:

gs3-extensions/tabletop-dl/trunk

Files:

• interactjs-dist (added)
• interactjs-dist/interact.min.js (added)
• tabletop-interact.js (modified) (1 diff)
• tabletop.css (modified) (7 diffs)
• tabletop.html (modified) (2 diffs)

gs3-extensions/tabletop-dl/trunk/tabletop-interact.js

@@ -112 +112 @@
 
 
+    var $drag_and_zoom_elems = $('.drag-and-zoom');
+
+    $drag_and_zoom_elems.each(function(index) {
+
+    let this_elem = this;
+    let $this_elem = $(this_elem);
+    
+    let angleScale = {
+        angle: 0,
+        scale: 1
+    }
+    let gestureArea = document.getElementById('gesture-area')
+    let scaleElement = document.getElementById('scale-element')
+    //let resetTimeout
 
 
-
-
-    
-
-    var angleScale = {
-    angle: 0,
-    scale: 1
-    }
-    var gestureArea = document.getElementById('gesture-area')
-    var scaleElement = document.getElementById('scale-element')
-    //var resetTimeout
-    
-    interact(gestureArea)
-    .gesturable({
-        listeners: {
-        start (event) {
-            angleScale.angle -= event.angle
-            
-            //clearTimeout(resetTimeout)
-            //scaleElement.classList.remove('reset')
-        },
-        move (event) {
-            // document.body.appendChild(new Text(event.scale))
-            var currentAngle = event.angle + angleScale.angle
-            var currentScale = event.scale * angleScale.scale
-            
-            scaleElement.style.transform =
-            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
-            
-            // uses the dragMoveListener from the draggable demo above
-            dragMoveListener(event)
-        },
-        end (event) {
-            angleScale.angle = angleScale.angle + event.angle
-            angleScale.scale = angleScale.scale * event.scale
-            
-            //resetTimeout = setTimeout(reset, 1000)
-            //scaleElement.classList.add('reset')
+    //let gesture_areas_col = interact('.drag-and-zoom');
+    //console.log(gesture_areas_col);
+    
+    //let gesture_area = interact(gestureArea)
+    //console.log(gesture_area);
+    
+    // interact(gestureArea)
+    //gesture_area
+    //gesture_areas_col
+    interact(this_elem)
+        .gesturable({
+        listeners: {
+            start (event) {
+            angleScale.angle -= event.angle
+            
+            //clearTimeout(resetTimeout)
+            //scaleElement.classList.remove('reset')
+            },
+            move (event) {
+            // document.body.appendChild(new Text(event.scale))
+            let currentAngle = event.angle + angleScale.angle
+            let currentScale = event.scale * angleScale.scale
+            //console.log(this);
+            
+            //scaleElement.style.transform =
+            let this_scale_elem = $(this_elem).find('.scale-element')[0];
+            
+            this_scale_elem.style.transform =           
+                'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
+            
+            // uses the dragMoveListener from the draggable demo above
+            dragMoveListener(event)
+            },
+            end (event) {
+            angleScale.angle = angleScale.angle + event.angle
+            angleScale.scale = angleScale.scale * event.scale
+            
+            //resetTimeout = setTimeout(reset, 1000)
+            //scaleElement.classList.add('reset')
+            }
         }
-        }
-    })
-    .draggable({
-        inertia: true,
-        modifiers: [
-        interact.modifiers.restrictRect({
-            restriction: 'parent',
-            endOnly: true
-        })
-        ],
-        listeners: { move: dragMoveListener }
-    })
+        })
+        .draggable({
+        inertia: true,
+        modifiers: [
+            interact.modifiers.restrictRect({
+            restriction: 'parent',
+            endOnly: true
+            })
+        ],
+        listeners: { move: dragMoveListener }
+        })
+    });
     
 

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

@@ +1 @@
+:root {
+    --gs-fg-primary-col: #fff;
+    --gs-bg-primary-col: #29e;
+}
+
+
 html {
     background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
@@ -15 +21 @@
 body {
     font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
-    color: #fff;
+    color: var(--gs-fg-primary-col);
 }
 
@@ -27 +33 @@
 
 /* construction lines to help show what is going on */
+/*
 .box .row {
     border: 1px dotted #0313fc;
 }
+*/
 
 .box .row.header {
@@ -45 +53 @@
 #gs-header {
     height: 2.5rem;
-    color: white;
+    color: var(--gs-fg-primary-col);
     background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
     text-align: center; 
@@ -54 +62 @@
     left: 10px;
     bottom: 10px;
-    background-color: #000040;
+    background-color: var(--gs-bg-primary-col);
 }
 
 
+/*
 #fixed-height {
     height: 40px;
@@ -72 +81 @@
     width: 100%;
 }
+*/
 
 
 .info-window {
-    width: 25%;
     min-height: 6.5em;
-    /* margin: 1rem 0 0 1rem; */
     margin: 0.5em;
     
-    background-color: #29e;
-    color: white;
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);
     
     font-size: 1.2rem;
-    /* font-family: sans-serif; */
 
     border-radius: 0.6em;
-    /*padding: 4%; */
     padding: 1em;
 
     touch-action: none;
-    user-select: none; 
+    user-select:  none; 
     transform: translate(0px, 0px);
 
@@ -116 +122 @@
 .button {
     display: inline-block;
-    background-color: #0050ff;
-    color: #fff;
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);;
     width: auto;
     border-radius: 10px;

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

@@ -42 +42 @@
     <div style="position: relative; width: 100%; height: 100%;">
 
-      <div id="gs-open-home" class="button" 
-           style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
-           onclick="gsToggleHeader()">Open DL Home</div>
+      <div id="gs-open-home" class="button" onclick="gsToggleHeader()">Toggle Control Bar</div>
       
 
-      <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
-        <img src="backgrounds/unsplash--matrix-like-binary.jpg"
+      <div id="gesture-area" class="drag-and-zoom"
+           style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
+        <img class="info-window scale-element" src="backgrounds/unsplash--matrix-like-binary.jpg"
          style="width: 576px; height: 384px"
          id="scale-element" />
       </div>
       
-      <div id="info-window-id" class="info-window resize-drag">
-        <p> You can drag one element </p>
+      <div id="info-window-id" class="info-window resize-drag" style="width: 400px;">
+        <p> You can Drag and Resize this element </p>
         <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
         <p>
@@ -61 +60 @@
           </form>
         </p>
+      </div>
+
+      <div class="drag-and-zoom"
+           style="position: absolute; left: 300px; top: 430px; width: 400px;">
+        <div class="info-window scale-element" style="width: 100%">
+          <p>You can Drag and Zoom this element </p>
+          <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
+          <p>
+        <form>
+          <input type="text" />
+        </form>
+          </p>
+        </div> 
       </div>