Changeset 37555 for gs3-extensions

Timestamp:

2023-03-23T13:28:55+13:00 (13 months ago)

Author:

davidb

Message:

Some gradual improvements to the features supported, ready to be incorporated as an XSL generated page in Greenstone

Location:

gs3-extensions/tabletop-dl/trunk

Files:

• RSYNC-INSTALL-TABLETOP-DL.sh (modified) (1 diff)
• tabletop-interact.js (modified) (8 diffs)
• tabletop.css (modified) (1 diff)

gs3-extensions/tabletop-dl/trunk/RSYNC-INSTALL-TABLETOP-DL.sh

@@ -1 +1 @@
 #!/bin/bash
 
-if [ ! -d ../../web/tabletop-dl ] ; then
-    echo "Making directory ../../web/tabletop-dl"
-    mkdir ../../web/tabletop-dl
+dst_dir=../../web/ext/tabletop-dl
+
+if [ ! -d $dst_dir ] ; then
+    echo "Making directory $dst_dir"
+    mkdir $dst_dir
 fi
 
-cd .. && rsync -pav \
-           tabletop-dl/tableletop*.*  \
-           tabletop-dl/backgrounds  \
-           ../web/tabletop-dl/.
+rsync -pav \
+      tabletop*.*  \
+      backgrounds  \
+      interactjs-dist \
+      winbox-with-interactjs-dist \
+      $dst_dir/.

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

@@ -40 +40 @@
 }
 
+// http://localhost:8383/greenstone3/library
+
 function getCoreResizableOptions()
 {
@@ -47 +49 @@
         
     listeners: {
+
+        moveNEWER: function (event) {
+        let { x, y } = event.target.dataset
+        
+        x = (parseFloat(x) || 0) + event.deltaRect.left
+        y = (parseFloat(y) || 0) + event.deltaRect.top
+        
+        Object.assign(event.target.style, {
+            width: `${event.rect.width}px`,
+            height: `${event.rect.height}px`,
+            transform: `translate(${x}px, ${y}px)`
+        })
+        
+        Object.assign(event.target.dataset, { x, y })
+        },
+        
         move (event) {
         var target = event.target
         var x = (parseFloat(target.getAttribute('data-x')) || 0)
         var y = (parseFloat(target.getAttribute('data-y')) || 0)
+        //var x = (parseFloat(target.getAttribute('data-x')) || target.style.clientLeft)
+        //var y = (parseFloat(target.getAttribute('data-y')) || target.style.clientTop)
         
         // update the element's style
@@ -62 +82 @@
         target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
         
+        //var target_new_x_org = target.clientLeft + event.deltaRect.left;
+        //var target_new_y_org = target.clientTop  + event.deltaRect.top;
+
+        //target.style.left = target_new_x_org + 'px';
+        //target.style.top  = target_new_y_org + 'px';
+
+        //target.style.left = x + 'px';
+        //target.style.top  = y + 'px';
+
         target.setAttribute('data-x', x)
         target.setAttribute('data-y', y)
@@ -82 +111 @@
     ],
         
-    
-    inertia: {
+    inertia: false
+    
+    /*inertia: {
             resistance: 6,
             //minSpeed: 20,
@@ -89 +119 @@
             smoothEndDuration: 500,
             allowResume: true
-    }       
+    }*/     
     };
 
@@ -109 +139 @@
         let currentScale = event.scale * angleScale.scale;
         
-        let scale_elem = $(elem).find('.scale-element')[0];
-        
-        scale_elem.style.transform =            
-            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
+        //let scale_elem = $(elem).find('.scale-element')[0];
+        
+        //scale_elem.style.transform =          
+        //    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';
+
+        let $scale_elem = $(elem).find('.scale-element');
+        
+        $scale_elem.css(
+            'transform',
+            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
+        );
+
         
         dragMoveListener(event);
@@ -204 +242 @@
 
 $(document).ready(function() {
-    
-    const win1 = new WinBox({
-    id:    "my-winbox1",
-    title: 'Winbox + Interact Example 1',
-    x: 200,
-    y: 200,
-    width: '400px',
-    height: '400px',
-    border: "0.3em",
-    background: "#29e",
-    html: "<p style=\"padding: 8px; color: #000;\">This window can be dragged around and resized</p>"
-    });
-    
-    let draggable_options = getCoreDraggableOptions();
-    let resizable_options = getCoreResizableOptions();
-    
-    draggable_options.autoScroll = true;
-    
-    interact('#my-winbox1')
-    .draggable(draggable_options)
-    .resizable(resizable_options);
+
+    $.ajax({
+    url: "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks"
+    })
+    .done(function(data) {
+        const winbox1 = new WinBox({
+        id:    "my-winbox1",
+        title: 'Winbox + Interact Example 1',
+        x: 200,
+        y: 200,
+        width: '900px',
+        height: '400px',
+        border: "0.3em",
+        background: "#29e",
+        html: data
+
+        });
+
+        $('#my-winbox1 .wb-header').css("user-select", "none");
+        $('#my-winbox1 .wb-header').css("touch-action","none");
+        
+        let draggable_options = getCoreDraggableOptions();
+        let resizable_options = getCoreResizableOptions();
+        
+        draggable_options.autoScroll = true;
+    
+        interact('#my-winbox1')
+        .draggable(draggable_options)
+        .resizable(resizable_options);
+    });
 
 
@@ -237 +284 @@
     border: "0.3em",
     background: "#29e",
-    html: "<p class=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
+    html: "<p classXXX=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
     });
-    
+
+    // user-select: none;
+    // touch-action: none;
+    
+    let $win2 = $('#my-winbox2');
+    let $scale_element_div = $('<div>').attr("class","scale-element");
+    $scale_element_div.append($win2.children()).clone();
+    
+    $win2.empty().append($scale_element_div);
+    
+    
+    
     /*
     interact('#my-winbox2')

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

@@ -22 +22 @@
     font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
     color: var(--gs-fg-primary-col);
+    background-color: transparent;
 }