Changeset 37467

Timestamp:

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

Author:

davidb

Message:

Control bar now slides out from left

Location:

gs3-extensions/tabletop-dl/trunk

Files:

• tabletop-interact.js (modified) (5 diffs)
• tabletop.css (modified) (1 diff)
• tabletop.html (modified) (4 diffs)

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

@@ -17 +17 @@
 $(document).ready(function() {
 
-
-    //var resize_drag_elems = document.getElementsByClassName('resize-drag')
-
-    //var resize_drag_elem = resize_drag_elems[0];
-    
-    //console.log(resize_drag_elem);
     
     interact('.resize-drag')
@@ -44 +38 @@
         // call this function on every dragend event
         end (event) {
-            var textEl = event.target.querySelector('p')
+            //var textEl = event.target.querySelector('p')
+            var textEl = $(event.target).find('.interact-info-bar')[0];
             
             textEl && (textEl.textContent =
-                   'moved a distance of ' +
+                   'Moved a distance of: ' +
                    (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                       Math.pow(event.pageY - event.y0, 2) | 0))
-                   .toFixed(2) + 'px')
+                   .toFixed(0) + ' pixels')
         }
         }
@@ -76 +71 @@
             target.setAttribute('data-x', x)
             target.setAttribute('data-y', y)
-            target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
+
+            var textEl = $(event.target).find('.interact-info-bar')[0];         
+            textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
         }
         },
@@ -170 +167 @@
         }
         })
+    
         .draggable({
         inertia: true,
@@ -180 +178 @@
         listeners: { move: dragMoveListener }
         })
+
+/*
+
+        .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')
+            }
+        }
+        })
+    
+        .resizable({
+        // resize from all edges and corners
+        edges: { left: true, right: true, bottom: true, top: true },
+        
+        listeners: {
+            move (event) {
+            var target = event.target;
+            var x = (parseFloat(target.getAttribute('data-x')) || 0)
+            var y = (parseFloat(target.getAttribute('data-y')) || 0)
+            
+            // update the element's style
+            target.style.width = event.rect.width + 'px'
+            target.style.height = event.rect.height + 'px'
+            
+            // translate when resizing from top or left edges
+            x += event.deltaRect.left
+            y += event.deltaRect.top
+            
+            target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
+            
+            target.setAttribute('data-x', x)
+            target.setAttribute('data-y', y)
+            target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
+            }
+        },
+        modifiers: [
+            // keep the edges inside the parent
+            interact.modifiers.restrictEdges({
+            outer: 'parent'
+            }),
+            
+            // minimum size
+            interact.modifiers.restrictSize({
+            min: { width: 100, height: 50 }
+            })
+        ],
+        
+        inertia: true
+        });
+
+        */
     });
     

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

@@ -51 +51 @@
 }
 
-#gs-header {
+#gs-control-bar {
     height: 2.5rem;
     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; 
+    text-align: center;
+    display: none;
 }
 
-#gs-open-home {
+#gs-control-bar-toggle {
     position: absolute;
-    left: 10px;
-    bottom: 10px;
+    left: 0px;
+    top: 0px;
     background-color: var(--gs-bg-primary-col);
+    padding: 0.8rem;
 }
 

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

@@ -35 +35 @@
 
     <div class="box">
-      <div id="gs-header" class="row header" style="display: none;">
+      <div id="gs-control-bar_ORIG" class="row header" style="display: none;">
     <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
       </div>
@@ -42 +42 @@
     <div style="position: relative; width: 100%; height: 100%;">
 
-      <div id="gs-open-home" class="button" onclick="gsToggleHeader()">Toggle Control Bar</div>
+      <div id="gs-control-bar">
+        <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
+      </div>
+      <div id="gs-control-bar-toggle" class="button" onclickXXX="gsToggleHeader()">&#9776;</div>
       
 
@@ -52 +55 @@
       </div>
       
-      <div id="info-window-id" class="info-window resize-drag" style="width: 400px;">
+      <div id="info-window-id" class="info-window resize-drag"
+           style="position: absolute; left: 100px; top: 60px; width: 400px;">
+        <p class="interact-info-bar">Info:</p>
         <p> You can Drag and Resize this element </p>
-        <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
+        <p>Goto <a target="_blank" href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
         <p>
           <form>
@@ -86 +91 @@
   </body>
   <script>
+    /*
     function gsToggleHeader()
     {
     $('#gs-header').slideToggle();
     }
+    */
+    $(document).ready(function() {
+    $("#gs-control-bar").width("100%").hide();
+    
+    $("#gs-control-bar-toggle").click(function(){
+            $("#gs-control-bar").animate({
+        width: "toggle"
+            });
+    });
+    });
+    
   </script>
 </html>