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

Last change on this file since 37461 was 37461, checked in by davidb, 14 months ago

A static pages that starts to build up the general structure of a tabletop Greenstone DL. No functionality in page at this stage
File size: 13.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
10 <link rel="stylesheet" href="tabletop-winbox.css">
11
12 <style>
13 html {
14 background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
15 background-size: cover;
16 height: 100%;
17 overflow: hidden;
18 }
19 </style>
20</head>
21
22<body>
23 <main>
24 <header>
25 Greenstone Tabletop Digital Library
26 </header>
27 <div class="wrapper">
28 <div class="button" onclick="window.examples['iframe']()" style="background-color: #004000">Open DL Home</div>
29 <br><br>
30
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>
36 </div>
37
38 <script>
39
40// target elements with the "draggable" class
41interact('.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
72function 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/*
103var angleScale = {
104 angle: 0,
105 scale: 1
106}
107var gestureArea = document.getElementById('gesture-area')
108var scaleElement = document.getElementById('scale-element')
109var resetTimeout
110
111interact(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>
146 </div>
147 </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>
360</body>
361</html>
Note: See TracBrowser for help on using the repository browser.