Ignore:
Timestamp:
2023-03-11T22:04:33+13:00 (14 months ago)
Author:
davidb
Message:

Better merging of winbox.js styled page with DIY drag-with-intertia.html

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r37461 r37462  
    77    <title>Greenstone Tabletop DL</title>
    88
    9    
     9    <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
     10
     11   
     12    <script src="drag-with-inertia.js"></script>
     13
    1014    <link rel="stylesheet" href="tabletop-winbox.css">
    11 
     15   
    1216    <style>
    1317      html  {
     18      overflow: hidden;
     19     
    1420      background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
    1521      background-size: cover;
    1622      height: 100%;
    1723      overflow: hidden;
    18       }     
     24      }
    1925    </style>
    2026</head>
    … …  
    2531      Greenstone Tabletop Digital Library
    2632    </header>
     33
    2734    <div class="wrapper">
    2835      <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
    29       <br><br>
     36      <br /><br />
    3037
    31 
    32       <div id="my-window-div" class="draggable" style="width: 500px; padding: 16px; background-color: #004000;">
    33     <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. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    34         <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>
    35         <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.</p>
     38      <div style="position: relative; height: 400px; ">
     39    <div id="myWindow" style="width: 500px; padding: 16px; background-color: #004000; position: absolute;">
     40      <div style="width: 100% height 40px; background-color: #002000;">DIY Dragable</div>
     41      <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>
     42          <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>
     43    </div>
    3644      </div>
    3745
    38       <script>
     46      <div style="position: relative">
    3947   
    40 // target elements with the "draggable" class
    41 interact('.draggable')
    42   .draggable({
    43     // enable inertial throwing
    44     inertia: true,
    45     // keep the element within the area of it's parent
    46     modifiers: [
    47       interact.modifiers.restrictRect({
    48         restriction: 'parent',
    49         endOnly: true
    50       })
    51     ],
    52     // enable autoScroll
    53     autoScroll: true,
    54 
    55     listeners: {
    56       // call this function on every dragmove event
    57       move: dragMoveListener,
    58 
    59       // call this function on every dragend event
    60       end (event) {
    61         var textEl = event.target.querySelector('p')
    62 
    63         textEl && (textEl.textContent =
    64           'moved a distance of ' +
    65           (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    66                      Math.pow(event.pageY - event.y0, 2) | 0))
    67             .toFixed(2) + 'px')
    68       }
    69     }
    70   })
    71 
    72 function dragMoveListener (event) {
    73   var target = event.target
    74   // keep the dragged position in the data-x/data-y attributes
    75   var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    76   var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
    77 
    78   // translate the element
    79   target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
    80 
    81   // update the posiion attributes
    82   target.setAttribute('data-x', x)
    83   target.setAttribute('data-y', y)
    84 }
    85 
    86     /*
    87     interact("#my-window-div")
    88             .draggable({
    89             inertia: true
    90             })
    91             .resizable({
    92             inertia: {
    93                 resistance: 30,
    94                 minSpeed: 200,
    95                 endSpeed: 100
    96             }
    97             });
    98    
    99     */
    100 
    101 
    102 /*
    103 var angleScale = {
    104   angle: 0,
    105   scale: 1
    106 }
    107 var gestureArea = document.getElementById('gesture-area')
    108 var scaleElement = document.getElementById('scale-element')
    109 var resetTimeout
    110 
    111 interact(gestureArea)
    112   .gesturable({
    113     listeners: {
    114       start (event) {
    115         angleScale.angle -= event.angle
    116 
    117         clearTimeout(resetTimeout)
    118         scaleElement.classList.remove('reset')
    119       },
    120       move (event) {
    121         // document.body.appendChild(new Text(event.scale))
    122         var currentAngle = event.angle + angleScale.angle
    123         var currentScale = event.scale * angleScale.scale
    124 
    125         scaleElement.style.transform =
    126           'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
    127 
    128         // uses the dragMoveListener from the draggable demo above
    129         dragMoveListener(event)
    130       },
    131       end (event) {
    132         angleScale.angle = angleScale.angle + event.angle
    133         angleScale.scale = angleScale.scale * event.scale
    134 
    135         resetTimeout = setTimeout(reset, 1000)
    136         scaleElement.classList.add('reset')
    137       }
    138     }
    139   })
    140   .draggable({
    141     listeners: { move: dragMoveListener }
    142   })
    143 
    144 */ 
    145       </script>
     48    <div id="myWindow2" style="width: 500px; padding: 16px; background-color: #200000; position: absolute;">
     49      <div style="width: 100% height 40px; background-color: #400000;">Fixed -- no handler</div>
     50      <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>
     51          <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>
     52    </div>
     53      </div>
     54     
     55    </div>
     56     
    14657    </div>
    14758  </main>
    148  
    149   <div id="backstore" style="display: none">
    150     <div id="content">
    151         <h1>Lorem Ipsum</h1>
    152         <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. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    153         <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>
    154         <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.</p>
    155     </div>
    156     <!--
    157     <div id="controls">
    158         <button onclick="window.buttons['minimize']()">Minimize (Toggle)</button>
    159         <button onclick="window.buttons['maximize']()">Maximize (Toggle)</button>
    160         <button onclick="window.buttons['fullscreen']()">Fullscreen (Toggle)</button>
    161         <button onclick="window.buttons['modal']()">Modal (Toggle)</button>
    162         <button onclick="window.buttons['center']()">Move (Center, Center)</button>
    163         <button onclick="window.buttons['move']()">Move (Right, Bottom)</button>
    164         <button onclick="window.buttons['resize']()">Resize (50%, 50%)</button>
    165         <button onclick="window.buttons['title']()">Set Title</button>
    166         <button onclick="window.buttons['color']()">Set Color</button>
    167         <button onclick="window.buttons['add']()">Add Class (my-theme)</button>
    168         <button onclick="window.buttons['remove']()">Remove Class (my-theme)</button>
    169         <button onclick="window.buttons['close']()">Close</button>
    170         <button onclick="window.buttons['force_close']()">Force Close</button>
    171     </div>
    172     -->
    173    
    174   </div>
    175 <!--
    176 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    177 -->
    178 
    179 <script type="module">
    180 
    181     //import WinBox from "./src/js/winbox.js";
    182     //window.WinBox = WinBox;
    183 
    184     (function(){
    185 
    186         let winbox;
    187 
    188         window.examples = {
    189 
    190             "iframe": function(){
    191 
    192                 new WinBox("WinBox.js", {
    193             root: document.querySelector("main"),
    194             id: "my-window",
    195                     //url: "https://nextapps-de.github.io/winbox/",
    196                     url: "http://localhost:8383/greenstone3/library",
    197             width:  "50%",
    198             height: "80%",
    199             minheight:  55,
    200             minwidth:  200,
    201             //maxheight: 300,
    202             //maxwidth: 500,
    203             //autosize: true,
    204            
    205             // position:
    206             x: "center",
    207             y: "center",
    208 
    209             background: "#004000",
    210                     class: "iframe"
    211                 });
    212        
    213             },
    214             "custom-css": function(){
    215 
    216                 new WinBox("Custom CSS", {
    217 
    218                     width: 350,
    219                     height: 250,
    220                     class: "custom",
    221                     mount: document.getElementById("content")
    222                                    .cloneNode(true)
    223                 });
    224             },
    225             "custom-class": function(){
    226 
    227                 new WinBox("Custom CSS (Class)", {
    228 
    229                     class: "my-theme",
    230                     mount: document.getElementById("content")
    231                                    .cloneNode(true)
    232                 });
    233             },
    234             "custom-control": function(){
    235 
    236                 const winbox = new WinBox("Custom Controls", { class: "no-full", background: "#313646" });
    237                 winbox.removeControl("wb-max").removeControl("wb-min");
    238                 winbox.addControl({
    239                     // the position index
    240                     index: 0,
    241                     // classname to apply styling
    242                     class: "wb-like",
    243                     // icon url when not specified via classname
    244                     image: "demo/heart.svg",
    245                     // click listener
    246                     click: function(event, winbox){
    247                         // the winbox instance will be passed as 2nd parameter
    248                         console.log(winbox.id);
    249                         // "this" refers to the button which was clicked:
    250                         this.classList.toggle("active");
    251                     }
    252                 });
    253             },
    254             "custom-template": function(){
    255 
    256                 const template = document.createElement("div");
    257                 template.innerHTML = `
    258                     <div class=wb-header>
    259                         <div class=wb-control>
    260                             <span class=wb-custom></span>
    261                             <span class=wb-close></span>
    262                         </div>
    263                         <div class=wb-drag>
    264                             <div class=wb-title></div>
    265                         </div>
    266                     </div>
    267                     <div class=wb-body></div>
    268                 `;
    269 
    270                 new WinBox("Custom Template", { template, background: "#313646" });
    271             },
    272             "theme-modern": function(){
    273 
    274                 new WinBox("Theme: Modern", {
    275 
    276                     class: "modern",
    277                     mount: document.getElementById("content")
    278                                    .cloneNode(true)
    279                 });
    280             },
    281             "controls": function(){
    282 
    283                 winbox = new WinBox("Controls", {
    284 
    285                     mount: document.getElementById("controls"),
    286                     border: 4,
    287                     onclose: function(force){
    288                         return !force && !confirm("Close window?");
    289                     }
    290                 });
    291             }
    292         };
    293 
    294         window.buttons = {
    295 
    296             minimize: function(){
    297 
    298                 winbox.minimize(!winbox.min);
    299             },
    300             maximize: function(){
    301 
    302                 winbox.maximize(!winbox.max);
    303             },
    304             fullscreen: function(){
    305 
    306                 winbox.fullscreen(!winbox.full);
    307             },
    308             center: function(){
    309 
    310                 winbox.move("center", "center");
    311             },
    312             move: function(){
    313 
    314                 winbox.move("right", "bottom");
    315             },
    316             resize: function(){
    317 
    318                 winbox.resize("50%", "50%");
    319             },
    320             title: function(){
    321 
    322                 winbox.setTitle("Title-" + Math.random());
    323             },
    324             color: function(){
    325 
    326                 winbox.setBackground(
    327                     "rgb(" + (Math.random() * 255 | 0) + "," +
    328                              (Math.random() * 255 | 0) + "," +
    329                              (Math.random() * 255 | 0) + ")"
    330                 );
    331             },
    332             modal: function(){
    333 
    334                 winbox.toggleClass("modal");
    335             },
    336             add: function(){
    337 
    338                 winbox.addClass("my-theme");
    339             },
    340             remove: function(){
    341 
    342                 winbox.removeClass("my-theme");
    343             },
    344             close: function(){
    345 
    346                 winbox.close();
    347             },
    348             force_close: function () {
    349 
    350                 winbox.close(true);
    351             }
    352         };
    353 
    354     }());
    355 
    356  
    357     // hljs.highlightAll();
    358 
    359 </script>
    36059</body>
    36160</html>
Note: See TracChangeset for help on using the changeset viewer.