Changeset 37569 for gs3-extensions


Ignore:
Timestamp:
2023-03-25T23:38:36+13:00 (13 months ago)
Author:
davidb
Message:

Starting to develop gs3 open windows

Location:
gs3-extensions/tabletop-dl/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r37568 r37569  
    136136    modifiers: [
    137137        interact.modifiers.restrict({       
    138         restriction: dragRestrictionRect,
    139        
    140 /*
    141         function(x,y,interactable_elem) {
    142             //console.log(`!!! Called draggable restriction function with: x=${x}, y=${y}`);
    143 
    144             let elem = interactable_elem.element;
    145             let parent_elem = elem.parentElement;
    146             //console.log("parent elem:");
    147             //console.log(parent_elem);
    148 
    149             let parent_rect = parent_elem.getBoundingClientRect();
    150             let restrict_to_rect = {
    151             left:   parent_rect.left,
    152             right:  parent_rect.right,
    153             top:    parent_rect.top,
    154             bottom: parent_rect.bottom
    155             };
    156 
    157 
    158             let delta_xl = x - restrict_to_rect.left;
    159             let delta_xr = restrict_to_rect.right - x;
    160             let delta_yt = y - restrict_to_rect.top;
    161             let delta_yb = restrict_to_rect.bottom - y;
    162            
    163             let dragged_rect;
    164 
    165             let $dragged_elem = $(elem).find('.scale-element');
    166             if ($dragged_elem.length>0) {
    167             dragged_rect = $dragged_elem[0].getBoundingClientRect();
    168             }
    169             else {
    170             dragged_rect = elem.getBoundingClientRect();
    171             }
    172 
    173            
    174             //let delta_xl = x - dragged_rect.left;
    175             //let delta_xr = dragged_rect.right - x;
    176             //let delta_yt = y - dragged_rect.top;
    177             //let delta_yb = dragged_rect.bottom - y;
    178            
    179             //console.log(dragged_rect);
    180             //console.log("restrict to:");
    181             //console.log(restrict_to_rect);
    182            
    183             // test bounds of dragged_rect, to restrict_to_rect
    184             // factor in any overshoots in the encoded rect returned
    185 
    186             if ((dragged_rect.left >= restrict_to_rect.left) || (dragged_rect.right <= restrict_to_rect.right)) {
    187                 // want to avoid situation where for dragged_rect both left and right are
    188                 // outside of the restrict_to_rect
    189                
    190                 if (dragged_rect.left < restrict_to_rect.left) {
    191                 // encode how much the overshoot it
    192                 restrict_to_rect.left += (restrict_to_rect.left - dragged_rect.left);
    193                
    194                 // Now factor in the offset that comes from the supplied (x,y);         
    195                 restrict_to_rect.left  += (x - parent_rect.left);
    196                 restrict_to_rect.right += (x - parent_rect.left);
    197                
    198                 }
    199                 if (dragged_rect.right > restrict_to_rect.right) {
    200                 // encode how much the overshoot it
    201                 restrict_to_rect.right -= (dragged_rect.right - restrict_to_rect.right);
    202                
    203                 // Now factor in the offset that comes from the supplied (x,y);         
    204                 restrict_to_rect.left  -= (parent_rect.right - x) + 1;
    205                 restrict_to_rect.right -= (parent_rect.right - x) + 1;
    206 
    207                 }
    208             }
    209             if ((dragged_rect.top >= restrict_to_rect.top) || (dragged_rect.bottom <= restrict_to_rect.bottom)) {
    210                 // want to avoid situation where for dragged_rect both left and right are
    211                 // outside of the restrict_to_rect
    212            
    213             if (dragged_rect.top < restrict_to_rect.top) {
    214                 // encode how much the overshoot it
    215                 restrict_to_rect.top += (restrict_to_rect.top - dragged_rect.top);
    216                
    217                 // Now factor in the offset that comes from the supplied (x,y);         
    218                 restrict_to_rect.top    += (y - parent_rect.top);
    219                 restrict_to_rect.bottom += (y - parent_rect.top);
    220             }
    221             if (dragged_rect.bottom > restrict_to_rect.bottom) {
    222                 // encode how much the overshoot it
    223                 restrict_to_rect.bottom -= (dragged_rect.bottom - restrict_to_rect.bottom);
    224            
    225                 // Now factor in the offset that comes from the supplied (x,y);         
    226             restrict_to_rect.top    -= (parent_rect.bottom - y) + 1;
    227                 restrict_to_rect.bottom -= (parent_rect.bottom - y) + 1;
    228                
    229             }
    230             }
    231 
    232             //restrict_to_rect.x = restrict_to_rect.left;
    233             //restrict_to_rect.width = restrict_to_rect.right - restrict_to_rect.left + 1;
    234 
    235             //restrict_to_rect.y = restrict_to_rect.top;
    236             //restrict_to_rect.height = restrict_to_rect.bottom - restrict_to_rect.top + 1;
    237            
    238             //console.log(`Returning for (${x},${y}) as delta [xl<->xr],[yt,<->yb] [(${delta_xl}<->${delta_xr}],[${delta_yt})<->${delta_yb}]`);
    239             //console.log(restrict_to_rect);
    240                
    241             return restrict_to_rect;
    242             },*/       
    243        
     138        restriction: dragRestrictionRect,               
    244139        endOnly: true
    245140        }),
    … …  
    267162    listeners: {
    268163
    269         moveNEWER: function (event) {
     164        moveNEWER_UNUSED: function (event) {
    270165        let { x, y } = event.target.dataset
    271166       
    … …  
    335230
    336231
    337 function getCoreGesturableOptions(elem,angleScale)
     232//function getCoreGesturableOptions(elem,angleScale)
     233function getCoreGesturableOptions(elem)
    338234{
     235    //let elem_angle_scale = {
     236    let angleScale = {
     237    angle: 0,
     238    scale: 1
     239    };
     240   
    339241    let core_gesturable_options = {
    340242    listeners: {
    … …  
    371273//  https://codepen.io/bxchang04/pen/XWmWbZQ
    372274
     275/*
    373276$(document).ready(function() {
    374277
    … …  
    387290
    388291    let this_elem = this;
    389    
    390     let this_angle_scale = {
    391         angle: 0,
    392         scale: 1
    393     }
     292
     293   
     294    //let this_angle_scale = {
     295    //    angle: 0,
     296    //    scale: 1
     297    //}
     298   
    394299   
    395300    let gdraggable_options = getCoreDraggableOptions();
    396     let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
     301    let gesturable_options = getCoreGesturableOptions(this_elem);//this_angle_scale);
    397302
    398303    interact(this_elem)
    … …  
    402307    });
    403308});
     309*/
    404310
    405311
    … …  
    417323        x:  80,
    418324        y: 90,
    419         width:  "465px",
     325        width:  "475px",
    420326        height: "585px",
    421327        border: "0.3em",
    … …  
    484390       
    485391        let this_elem = document.getElementById('my-winbox2');
    486        
     392
     393        /*
    487394        let this_angle_scale = {
    488395        angle: 0,
    489396        scale: 1
    490397        };
    491        
     398        */
    492399       
    493400        let gdraggable_options = getCoreDraggableOptions();
    494         let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
     401        let gesturable_options = getCoreGesturableOptions(this_elem/*,this_angle_scale*/);
    495402       
    496403        var my_winbox2 = interact('#my-winbox2')

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

    r37559 r37569  
    6161#gs-control-bar {
    6262    position: absolute;
    63     z-index: 5;
     63    z-index: 20;
    6464    height: 2.5rem;
    6565    color: var(--gs-fg-primary-col);
    … …  
    7070
    7171#gs-control-bar-toggle {
    72     z-index: 6;
     72    z-index: 21;
    7373    position: absolute;
    7474    left: 0px;
    7575    top: 0px;
    76     background-color: var(--gs-bg-primary-col);
    77     padding: 0.8rem;
    78 }
     76    /*background-color: var(--gs-bg-primary-col); */
     77    background-color: #fff;
     78    color: #000;
     79    padding: 0.6rem 0.9rem 0.6rem 0.9rem;
     80}
     81
     82#gs-home-open {
     83    z-in4dex: 21;
     84    position: absolute;
     85    left: 0px;
     86    bottom: 0px;
     87    /* background-color: var(--gs-bg-primary-col); */
     88    background-color: #fff;
     89    padding: 0.5rem;
     90}
     91
    7992
    8093

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

    r37559 r37569  
    7777              <!--<xsl:call-template name="displayErrorsIfAny"/>-->
    7878         
    79           <!--
    80                   <div id="gs_content" class="ui-widget-content">
    81                   <xsl:apply-templates select="/page" />
    82                   </div>
    83           -->
    84 
    8579
    8680          <div class="box">
     81        <!-- currently not used -->
    8782        <div id="gs-control-bar_ORIG" class="row header" style="display: none;">
    8883          <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    8984        </div>
     85       
    9086        <div class="row content" style="margin: 0.5em;">
    9187         
    … …  
    9591              <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    9692            </div>
    97             <div id="gs-control-bar-toggle" class="button" onclickXXX="gsToggleHeader()">&#9776;</div>
    98            
    99            
    100             <div id="gesture-area" class="drag-and-zoom"
    101              style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
    102               <img class="info-window scale-element" src="ext/tabletop-dl/backgrounds/unsplash--matrix-like-binary.jpg"
    103                style="width: 576px; height: 384px"
    104                id="scale-element" />
     93            <div id="gs-control-bar-toggle" class="button">&#9776;</div>
     94            <div id="gs-home-open" class="button">
     95              <img src="interfaces/{$interface_name}/images/logo-icons/32/server32.png" width="32" height="32"/>
    10596            </div>
    106            
    107             <div id="info-window-id" class="info-window resize-drag"
    108              style="position: absolute; left: 100px; top: 60px; width: 400px;">
    109               <p class="interact-info-bar">Info:</p>
    110               <p> You can Drag and Resize this element </p>
    111               <p>Goto <a target="_blank" href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
    112               <p>
    113             <form>
    114               <input type="text" />
    115             </form>
    116               </p>
    117             </div>
    118            
    119             <div class="drag-and-zoom"
    120              style="position: absolute; left: 300px; top: 430px; width: 400px;">
    121               <div class="info-window scale-element" style="width: 100%">
    122             <p>You can Drag and Zoom this element </p>
    123             <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
    124             <p>
    125               <form>
    126                 <input type="text" />
    127               </form>
    128             </p>
    129               </div>
    130             </div>
    131            
     97                                               
    13298          </div>
    13399
    … …  
    140106     
    141107        </div>
     108
     109        <!-- currently not used -->
    142110        <div class="row footer" style="display:none;">
    143111          <p>footer (fixed height)</p>
Note: See TracChangeset for help on using the changeset viewer.