Changeset 37464


Ignore:
Timestamp:
2023-03-12T16:09:33+13:00 (12 days ago)
Author:
davidb
Message:

Changed fill-remainging height to Flex-box based

Location:
gs3-extensions/tabletop-dl/trunk
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

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

    r37463 r37464  
    1 // target elements with the "draggable" class
    2 interact('.resize-drag')
    3   .draggable({
    4     // enable inertial throwing
    5     inertia: true,
    6     // keep the element within the area of it's parent
    7     modifiers: [
    8       interact.modifiers.restrictRect({
    9         restriction: 'parent',
    10         endOnly: true
    11       })
    12     ],
    13     // enable autoScroll
    14     autoScroll: true,
    15 
    16     listeners: {
    17       // call this function on every dragmove event
    18       move: dragMoveListener,
    19 
    20       // call this function on every dragend event
    21       end (event) {
    22         var textEl = event.target.querySelector('p')
    23 
    24         textEl && (textEl.textContent =
    25           'moved a distance of ' +
    26           (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    27                      Math.pow(event.pageY - event.y0, 2) | 0))
    28             .toFixed(2) + 'px')
    29       }
    30     }
    31   })
    321
    332function dragMoveListener (event) {
    … …  
    4615
    4716
     17$(document).ready(function() {
    4818
    49 interact('.resize-drag')
    50   .resizable({
    51     // resize from all edges and corners
    52     edges: { left: true, right: true, bottom: true, top: true },
    5319
    54     listeners: {
    55       move (event) {
    56         var target = event.target
    57         var x = (parseFloat(target.getAttribute('data-x')) || 0)
    58         var y = (parseFloat(target.getAttribute('data-y')) || 0)
     20    //var resize_drag_elems = document.getElementsByClassName('resize-drag')
    5921
    60         // update the element's style
    61         target.style.width = event.rect.width + 'px'
    62         target.style.height = event.rect.height + 'px'
    63 
    64         // translate when resizing from top or left edges
    65         x += event.deltaRect.left
    66         y += event.deltaRect.top
    67 
    68         target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
    69 
    70         target.setAttribute('data-x', x)
    71         target.setAttribute('data-y', y)
    72         target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
    73       }
    74     },
    75     modifiers: [
    76       // keep the edges inside the parent
    77       interact.modifiers.restrictEdges({
    78         outer: 'parent'
    79       }),
    80 
    81       // minimum size
    82       interact.modifiers.restrictSize({
    83         min: { width: 100, height: 50 }
    84       })
    85     ],
    86 
    87     inertia: true
    88   });
     22    //var resize_drag_elem = resize_drag_elems[0];
     23   
     24    //console.log(resize_drag_elem);
     25   
     26    interact('.resize-drag')
     27    .draggable({
     28        // enable inertial throwing
     29        inertia: true,
     30        // keep the element within the area of it's parent
     31        modifiers: [
     32        interact.modifiers.restrictRect({
     33            restriction: 'parent',
     34            endOnly: true
     35        })
     36        ],
     37        // enable autoScroll
     38        autoScroll: true,
     39       
     40        listeners: {
     41        // call this function on every dragmove event
     42        move: dragMoveListener,
     43       
     44        // call this function on every dragend event
     45        end (event) {
     46            var textEl = event.target.querySelector('p')
     47           
     48            textEl && (textEl.textContent =
     49                   'moved a distance of ' +
     50                   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
     51                      Math.pow(event.pageY - event.y0, 2) | 0))
     52                   .toFixed(2) + 'px')
     53        }
     54        }
     55    })
     56    .resizable({
     57        // resize from all edges and corners
     58        edges: { left: true, right: true, bottom: true, top: true },
     59       
     60        listeners: {
     61        move (event) {
     62            var target = event.target
     63            var x = (parseFloat(target.getAttribute('data-x')) || 0)
     64            var y = (parseFloat(target.getAttribute('data-y')) || 0)
     65           
     66            // update the element's style
     67            target.style.width = event.rect.width + 'px'
     68            target.style.height = event.rect.height + 'px'
     69           
     70            // translate when resizing from top or left edges
     71            x += event.deltaRect.left
     72            y += event.deltaRect.top
     73           
     74            target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
     75           
     76            target.setAttribute('data-x', x)
     77            target.setAttribute('data-y', y)
     78            target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
     79        }
     80        },
     81        modifiers: [
     82        // keep the edges inside the parent
     83        interact.modifiers.restrictEdges({
     84            outer: 'parent'
     85        }),
     86       
     87        // minimum size
     88        interact.modifiers.restrictSize({
     89            min: { width: 100, height: 50 }
     90        })
     91        ],
     92       
     93        inertia: true
     94    });
    8995
    9096/*
    … …  
    101107*/
    102108
    103 // this function is used later in the resizing and gesture demos
    104 window.dragMoveListener = dragMoveListener
     109
     110    // this function is used later in the resizing and gesture demos
     111    window.dragMoveListener = dragMoveListener
    105112
    106113
    … …  
    108115
    109116
    110 $(document).ready(function() {
     117
    111118   
    112119
    113 var angleScale = {
    114   angle: 0,
    115   scale: 1
    116 }
    117 var gestureArea = document.getElementById('gesture-area')
    118 var scaleElement = document.getElementById('scale-element')
    119 var resetTimeout
    120 
    121 interact(gestureArea)
    122   .gesturable({
    123     listeners: {
    124       start (event) {
    125         angleScale.angle -= event.angle
    126 
    127         clearTimeout(resetTimeout)
    128         scaleElement.classList.remove('reset')
    129       },
    130       move (event) {
    131         // document.body.appendChild(new Text(event.scale))
    132         var currentAngle = event.angle + angleScale.angle
    133         var currentScale = event.scale * angleScale.scale
    134 
    135         scaleElement.style.transform =
    136           'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
    137 
    138         // uses the dragMoveListener from the draggable demo above
    139         dragMoveListener(event)
    140       },
    141       end (event) {
    142         angleScale.angle = angleScale.angle + event.angle
    143         angleScale.scale = angleScale.scale * event.scale
    144 
    145         //resetTimeout = setTimeout(reset, 1000)
    146         //scaleElement.classList.add('reset')
    147       }
     120    var angleScale = {
     121    angle: 0,
     122    scale: 1
    148123    }
    149   })
    150   .draggable({
    151       inertia: true,
    152       modifiers: [
    153       interact.modifiers.restrictRect({
    154               restriction: 'parent',
    155               endOnly: true
    156       })
    157       ],
    158       listeners: { move: dragMoveListener }
    159   })
    160 
     124    var gestureArea = document.getElementById('gesture-area')
     125    var scaleElement = document.getElementById('scale-element')
     126    //var resetTimeout
     127   
     128    interact(gestureArea)
     129    .gesturable({
     130        listeners: {
     131        start (event) {
     132            angleScale.angle -= event.angle
     133           
     134            //clearTimeout(resetTimeout)
     135            //scaleElement.classList.remove('reset')
     136        },
     137        move (event) {
     138            // document.body.appendChild(new Text(event.scale))
     139            var currentAngle = event.angle + angleScale.angle
     140            var currentScale = event.scale * angleScale.scale
     141           
     142            scaleElement.style.transform =
     143            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
     144           
     145            // uses the dragMoveListener from the draggable demo above
     146            dragMoveListener(event)
     147        },
     148        end (event) {
     149            angleScale.angle = angleScale.angle + event.angle
     150            angleScale.scale = angleScale.scale * event.scale
     151           
     152            //resetTimeout = setTimeout(reset, 1000)
     153            //scaleElement.classList.add('reset')
     154        }
     155        }
     156    })
     157    .draggable({
     158        inertia: true,
     159        modifiers: [
     160        interact.modifiers.restrictRect({
     161            restriction: 'parent',
     162            endOnly: true
     163        })
     164        ],
     165        listeners: { move: dragMoveListener }
     166    })
     167   
    161168
    162169/*

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

    r37463 r37464  
    11<!DOCTYPE html>
    22<html lang="en">
    3 <head>
     3  <head>
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    55    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
    6 
     6   
    77    <title>Greenstone Tabletop DL</title>
    88
    … …  
    2121    <script src="interactjs-dist/interact.min.js"></script>
    2222    <script src="my-interact.js"></script>
     23   
    2324
    24     <!--
    25     <script src="drag-with-inertia.js"></script>
    26     -->
     25    <link rel="stylesheet" href="tabletop.css">
    2726   
    28     <!--
    29     <link rel="stylesheet" href="tabletop-winbox.css">
    30     -->
    31    
    32     <style>
    33       /*
    34       html  {
    35       overflow: hidden;
    36      
    37       background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    38       background-size: cover;
    39       height: 100%;
    40       overflow: hidden;
    41       }
    42 
    43       html, body {
    44       margin: 0;
    45       padding: 0;
    46       border: 0;
    47       }
    48 
    49       body {
    50       position: fixed;
    51       top: 0;
    52       right: 0;
    53       bottom: 0;
    54       left: 0;
    55       font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    56       text-align: center;
    57       color: #fff;
    58       }
    59 
    60       header {
    61       position: sticky;
    62       top: 0;
    63       width: 100%;
    64       //height: 30px;
    65       color: white;
    66       background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    67       padding: 0.6rem;
    68       border-bottom: 1px solid #181f2a;
    69       z-index: 2;
    70       }
    71 */
    72       html {
    73       background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    74       background-size: cover;
    75       }
    76          
    77       html, body {
    78       overflow: hidden;
    79           height: 100%;
    80           width:  100%;
    81           margin:  0;
    82       padding: 0;
    83       border:  0;
    84       }
    85 
    86       body {
    87       font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
    88       color: #fff;
    89       }
    90      
    91       #fixed-height {
    92           height: 40px;
    93       color: white;
    94       background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
    95           text-align: center;
    96       }
    97 
    98       #remaining-height {
    99       overflow: hidden;   
    100           position: absolute;
    101           top: 40px;
    102           bottom: 0;
    103           width: 100%;
    104       }
    105 
    106 
    107       #drag-1, #drag-2 {
    108       width: 25%;
    109       min-height: 6.5em;
    110       margin: 1rem 0 0 1rem;
    111       background-color: #29e;
    112       color: white;
    113       border-radius: 0.75em;
    114       padding: 4%;
    115       touch-action: none;
    116       user-select: none;
    117       transform: translate(0px, 0px);
    118       }
    119      
    120       .resize-drag {
    121       width: 120px;
    122       border-radius: 8px;
    123       padding: 20px;
    124       margin: 1rem;
    125       background-color: #29e;
    126       color: white;
    127       font-size: 20px;
    128       font-family: sans-serif;
    129      
    130       touch-action: none;
    131      
    132       /* This makes things *much* easier */
    133       box-sizing: border-box;
    134       }
    135 
    136 
    137       #scale-element {
    138       display: block;
    139       max-width: 100%;
    140       margin: 1rem auto;
    141       touch-action: none;
    142       }
    143      
    144     </style>
    14527</head>
    14628
    14729<!--
    148     https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html#:~:text=Another%20way%20of%20making%20a,to%20stretch%20the%20.
     30    To create a div that fills to the remaining available height see Approach 1 of:   
     31      https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html
    14932  -->
    15033
    151 <body>
     34  <body>
     35
     36    <div class="box">
     37      <div id="gs-header" class="row header" style="display: none;">
     38    <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
     39      </div>
     40      <div class="row content" style="margin: 0.5em;">
     41
     42    <div style="position: relative; width: 100%; height: 100%;">
     43
     44      <div id="gs-open-home" class="button"
     45           style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
     46           onclick="gsToggleHeader()">Open DL Home</div>
     47     
     48
     49      <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
     50        <img src="backgrounds/unsplash--matrix-like-binary.jpg"
     51         style="width: 576px; height: 384px"
     52         id="scale-element" />
     53      </div>
     54     
     55      <div id="info-window-id" class="info-window resize-drag">
     56        <p> You can drag one element </p>
     57        <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
     58        <p>
     59          <form>
     60        <input type="text" />
     61          </form>
     62        </p>
     63      </div>
     64     
     65    </div>
     66   
     67      </div>
     68      <div class="row footer" style="display:none;">
     69        <p>footer (fixed height)</p>
     70      </div>
     71    </div>
     72   
     73    <!--
    15274    <header id="fixed-height">
    15375      <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
    15476    </header>
     77   
     78    <div id="remaining-height">
    15579
    156     <!--
    157     <div class="wrapperXXX" style="position: absolute; height: 95%; width: 100%; margin: 0.8rem;">
    158       -->
    159      <div id="remaining-height">
     80      <div style="position: relative; height: 100%; width: 100%; padding: 40px;">
     81    <div>
     82     
     83      <div class="button"
     84       style="position: absolute; left: 10px; bottom: 10px; background-color: #004000"
     85       onclick="openGSWindow()">Open DL Home</div>
     86       
     87      < !- -
     88      <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
     89      - - >
    16090
    161       <!--
    162       <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
    163       -->
    164 
    165       <!--
     91     
     92      < ! - -
    16693        <hr />
    167       -->
     94      - - >
    16895   
    16996    <div id="gesture-area" style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
    17097      <img src="backgrounds/unsplash--matrix-like-binary.jpg"
    17198           style="width: 576px; height: 384px"
    172            alt="sample image" id="scale-element" />
     99           id="scale-element" />
    173100    </div>
    174101
    175     <div id="drag-1" class="resize-drag">
     102    <div id="info-window-id" class="info-window resize-drag">
    176103      <p> You can drag one element </p>
    177104      <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
     105      <p>
     106        <form>
     107          <input type="text" />
     108        </form>
     109      </p>
    178110    </div>
    179     <div id="drag-2" class="resize-drag">
    180       <p> with each pointer </p>
    181       <form>
    182         <input type="text" />
    183       </form>
    184     </div>
     111   
     112    < ! - -
     113        <hr />
     114        - - >
    185115
    186    
    187 <!--
    188     <hr />
    189 -->
    190       <!--
    191       <div style="position: relative; height: 400px; ">
    192     <div id="myWindow" style="width: 500px; padding: 16px; background-color: #004000; position: absolute;">
    193       <div style="width: 100% height 40px; background-color: #002000;">DIY Dragable</div>
    194       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
    195           <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    196116    </div>
    197117      </div>
    198 
    199       <div style="position: relative">
    200    
    201     <div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute; left: 600px;">
    202       <div style="width: 100% height 40px; background-color: #400000;">Fixed -- no handler</div>
    203       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
    204           <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    205     </div>
    206       </div>
    207      
     118       
    208119    </div>
    209120    -->
    210     </div>
    211 </body>
     121   
     122  </body>
     123  <script>
     124    function gsToggleHeader()
     125    {
     126    $('#gs-header').slideToggle();
     127    }
     128  </script>
    212129</html>
Note: See TracChangeset for help on using the changeset viewer.