Changeset 37559

Timestamp:

2023-03-23T23:41:37+13:00 (13 months ago)

Author:

davidb

Message:

Series of changes that improve the overall interactive and visual display of zooming/rotating

Location:

gs3-extensions/tabletop-dl/trunk

Files:

• tabletop-interact.js (modified) (4 diffs)
• tabletop.css (modified) (3 diffs)
• tabletop.xsl (modified) (2 diffs)

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

@@ -40 +40 @@
 }
 
-// http://localhost:8383/greenstone3/library
-
 function getCoreResizableOptions()
 {
     let core_resizable_options = {
-    
-    edges: { left: true, right: true, bottom: true, top: true },
+
+    preserveAspectRatio: false,
+    edges: { left: true, right: true, bottom: true, top: false },
         
     listeners: {
@@ -249 +248 @@
         const winbox1 = new WinBox({
         id:    "my-winbox1",
-        title: 'Winbox + Interact Example 1',
-        x: 200,
-        y: 200,
-        width: '900px',
-        height: '400px',
+        title: 'Winbox + Interact Example: Drag and Resize',
+        x:  80,
+        y: 90,
+        width:  "465px",
+        height: "585px",
         border: "0.3em",
         background: "#29e",
@@ -262 +261 @@
         $('#my-winbox1 .wb-header').css("user-select", "none");
         $('#my-winbox1 .wb-header').css("touch-action","none");
+
+        $('#my-winbox1 .wb-body').addClass("winbox-info-window");
         
         let draggable_options = getCoreDraggableOptions();
@@ -275 +276 @@
 
 
-    const win2 = new WinBox({
-    id:    "my-winbox2",
-    title: 'Winbox + Interact Example 2',
-    x: 800,
-    y: 200,
-    width: '500px',
-    height: '300px',
-    border: "0.3em",
-    background: "#29e",
-    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')
-    .draggable(draggable_options)
-    .resizable(resizable_options);
-    */
-
-    let this_elem = document.getElementById('my-winbox2');
-    
-    let this_angle_scale = {
-    angle: 0,
-    scale: 1
-    }
-    
-    
-    let gdraggable_options = getCoreDraggableOptions();
-    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
-    
-    interact('#my-winbox2')
-    .gesturable(gesturable_options)
-    .draggable(gdraggable_options);
-    
-    
+
+    let doc_url = "http://localhost:8383/greenstone3/library/collection/gs2mgdemo/document/HASHe3aae2159b0dda6553cee4";
+
+    $.ajax({
+    url: doc_url,
+    data: {
+        "excerptid": "gs_content",
+        "ed": "1"
+    }
+    })
+    .done(function(html_result) {
+
+        
+        const win2 = new WinBox({
+        id:    "my-winbox2",
+        title: 'Winbox + Interact Example: Drag, Scale and Rotate',
+        x: 1000,
+        y: 80,
+        width: '900px',
+        height: '600px',
+        border: "0.3em",
+        //background: "#29e",
+        //html: "<p>Some Sample Text</p>"
+        html: html_result
+        });
+        
+        // user-select: none;
+        // touch-action: none;
+        
+        let $win2 = $('#my-winbox2');
+        let $scale_element_div = $('<div>')
+        .attr("class","scale-element")
+            .css("position","relative")
+            .css("width","100%")
+            .css("height","100%")
+        .css("background-color", "#29e");
+        
+        $scale_element_div.append($win2.children()).clone();
+        
+        $win2.empty().append($scale_element_div);
+        
+        $('#my-winbox2 .wb-body').addClass("winbox-info-window");
+    
+        
+        //
+        //  interact('#my-winbox2')
+        //  .draggable(draggable_options)
+        //  .resizable(resizable_options);
+        //
+        
+        let this_elem = document.getElementById('my-winbox2');
+        
+        let this_angle_scale = {
+        angle: 0,
+        scale: 1
+        }
+        
+        
+        let gdraggable_options = getCoreDraggableOptions();
+        let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
+        
+        interact('#my-winbox2')
+        .gesturable(gesturable_options)
+        .draggable(gdraggable_options);
+        
+    });
+
+
     /*
     interact('#my-winbox')

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

@@ -25 +25 @@
 }
 
+div.collectionLinkText {
+    min-width: 365px;
+}
+
+span.collectionAndGroupLinks {
+    display: inline-block;
+}
 
 
@@ -93 +100 @@
     min-height: 6.5em;
     margin: 0.5em;
-    
-    background-color: var(--gs-bg-primary-col);
-    color: var(--gs-fg-primary-col);
+
+    /*
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);
+   */
+    
+    background-color: #fff;
+    color: #000; 
+    
+    border: 0.25rem var(--gs-bg-primary-col) solid;
     
     font-size: 1.2rem;
@@ -111 +125 @@
 }
 
+
+.winbox-info-window {
+    min-height: 6.5em;
+    margin: 0.5em;
+
+    /*
+    background-color: var(--gs-bg-primary-col);
+    color: var(--gs-fg-primary-col);
+   */
+    
+    background-color: #fff;
+    color: #000;
+    /*
+    border: 0.25rem var(--gs-bg-primary-col) solid;
+   */
+    
+    font-size: 1.2rem;
+
+    /* border-radius: 0.6em; */
+    padding: 1em;
+
+    touch-action: none;
+    user-select:  none; 
+    transform: translate(0px, 0px);
+
+    /* This makes things *much* easier */
+    box-sizing: border-box;
+
+}
+
+
+.wb-header {
+    background-color: var(--gs-bg-primary-col);
+}
+
+.winbox {
+    background-color: transparent;
+}
+
+.wb-n {
+    cursor: revert;
+}
+
+
+
+/* Visual artefact turns up from box-shadow when roting */
+/* This is due to the parent div dtaying in the same fixed place, but the
+   scaled and rotated inner elements breaking out of that shap */
+
+/* Perhaps we only want none, when its being rotated? */
+
+.winbox {
+    box-shadow: none;
+}
+
+/* Report to help promote anti-aliasing affects on transform elements
+
+e.g. https://slickmedia.io/blog/stop-blurring-jagged-edges-css-transform-transition
+
+outline: 1px solid transparent;
+-webkit-backface-visibility: hidden;
+transform: translateZ(0);
+will-change: transform;
+-webkit-perspective: 1000;
+*/
+
+    
 /* currently nothing specific for resize-drag that info-window does already do */
 /*

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

@@ -17 +17 @@
     <gslib:siteName/>
   </xsl:template>
+
+
+  <!-- This and the following template rule is copied verbatim from document.xsl -->
   
+  <xsl:template name="javascriptForDocumentView">
+    <script type="text/javascript" src="interfaces/{$interface_name}/js/utility_scripts.js"><xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="interfaces/{$interface_name}/js/document_scripts.js"><xsl:text> </xsl:text></script>
+    <gsf:metadata name="Thumb" hidden="true"/>
+    <script type="text/javascript">
+      <xsl:text disable-output-escaping="yes">
+    function goToAnchor(sectionID,anchor)
+    {
+        var docIdentifier = '</xsl:text><xsl:value-of select="//documentNode[@nodeType = 'root']/@nodeID"/><xsl:text disable-output-escaping="yes">';
+        focusAnchor(docIdentifier + "."+ sectionID,0,1,anchor);
+    }
+      </xsl:text>
+    </script>
+    <xsl:call-template name="customJavascriptForDocumentView"/>
+  </xsl:template>
+
+  <!-- Use this to add in extra javascript/files for an interface, site, collection -->
+  <xsl:template name="customJavascriptForDocumentView">
+  </xsl:template>
+
   <!-- the main layout is defined here -->
   <xsl:template name="mainTemplate">
@@ -26 +49 @@
         <!-- ***** in header.xsl ***** -->
         <xsl:call-template name="create-html-header" />
+    <xsl:call-template name="javascriptForDocumentView"/>