source: gs3-extensions/tabletop-dl/trunk/tabletop.html@ 37533

Last change on this file since 37533 was 37533, checked in by davidb, 13 months ago

Initial work on having a winboxjs window working with interact.js
File size: 4.4 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <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
7 <title>Greenstone Tabletop DL</title>
8
9 <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
10
11
12 <!-- Import as bundled (All-in-one): -->
13 <!-- <script src="dist/winbox.bundle.min.js"></script> -->
14
15 <!-- Or import JS + CSS separately: -->
16 <!--
17 <link rel="stylesheet" href="winbox-dist/css/winbox.min.css">
18 <script src="winbox-dist/js/winbox.min.js"></script>
19 -->
20 <link rel="stylesheet" href="src/winbox-with-interactjs/dist/css/winbox.min.css">
21 <script src="src/winbox-with-interactjs/dist/js/winbox.min.js"></script>
22
23 <script src="interactjs-dist/interact.min.js"></script>
24 <script src="tabletop-interact.js"></script>
25
26
27 <link rel="stylesheet" href="tabletop.css">
28
29</head>
30
31<!--
32 To create a div that fills to the remaining available height see Approach 1 of:
33 https://www.w3docs.com/snippets/html/how-to-make-a-div-fill-the-height-of-the-remaining-space.html
34 -->
35
36 <body>
37
38 <div class="box">
39 <div id="gs-control-bar_ORIG" class="row header" style="display: none;">
40 <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
41 </div>
42 <div class="row content" style="margin: 0.5em;">
43
44 <div style="position: relative; width: 100%; height: 100%;">
45
46 <div id="gs-control-bar">
47 <div style="padding-top: 0.6em;">Greenstone Tabletop Digital Library</div>
48 </div>
49 <div id="gs-control-bar-toggle" class="button" onclickXXX="gsToggleHeader()">&#9776;</div>
50
51
52 <div id="gesture-area" class="drag-and-zoom"
53 style="position: absolute; left: 700px; top: 30px; width: 576px; height: 384px;">
54 <img class="info-window scale-element" src="backgrounds/unsplash--matrix-like-binary.jpg"
55 style="width: 576px; height: 384px"
56 id="scale-element" />
57 </div>
58
59 <div id="info-window-id" class="info-window resize-drag"
60 style="position: absolute; left: 100px; top: 60px; width: 400px;">
61 <p class="interact-info-bar">Info:</p>
62 <p> You can Drag and Resize this element </p>
63 <p>Goto <a target="_blank" href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
64 <p>
65 <form>
66 <input type="text" />
67 </form>
68 </p>
69 </div>
70
71 <div class="drag-and-zoom"
72 style="position: absolute; left: 300px; top: 430px; width: 400px;">
73 <div class="info-window scale-element" style="width: 100%">
74 <p>You can Drag and Zoom this element </p>
75 <p>Goto <a href="https://greenstone.org/">Greenstone3 Project Home Page</a></p>
76 <p>
77 <form>
78 <input type="text" />
79 </form>
80 </p>
81 </div>
82 </div>
83
84 </div>
85
86 <!--
87 <div id="my-own-window"
88 style="position: absolute; left: 30px; top: 430px; width: 400px; height: 300px; background-color: red;">
89 </div>
90 -->
91
92
93 </div>
94 <div class="row footer" style="display:none;">
95 <p>footer (fixed height)</p>
96 </div>
97 </div>
98
99
100 </body>
101 <script>
102 /*
103 function gsToggleHeader()
104 {
105 $('#gs-header').slideToggle();
106 }
107 */
108 $(document).ready(function() {
109 $("#gs-control-bar").width("100%").hide();
110
111 $("#gs-control-bar-toggle").click(function(){
112 $("#gs-control-bar").animate({
113 width: "toggle"
114 });
115 });
116
117
118 const win = new WinBox({
119 id: "my-winbox",
120 title: 'My Window2',
121 width: '400px',
122 height: '400px',
123 });
124
125 interact('#my-winbox')
126 .draggable({
127 // enable inertial throwing
128 inertia: true,
129 // keep the element within the area of it's parent
130 modifiers: [
131 interact.modifiers.restrictRect({
132 restriction: 'parent',
133 endOnly: true
134 })
135 ],
136 // enable autoScroll
137 autoScroll: true,
138
139 listeners: {
140 // call this function on every dragmove event
141 move: dragMoveListener,
142
143 // call this function on every dragend event
144 end (event) {
145 var textEl = event.target.querySelector('p')
146
147 textEl && (textEl.textContent =
148 'moved a distance of ' +
149 (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
150 Math.pow(event.pageY - event.y0, 2) | 0))
151 .toFixed(2) + 'px')
152 }
153 }
154 });
155
156 });
157
158 </script>
159</html>
Note: See TracBrowser for help on using the repository browser.