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

Last change on this file since 37538 was 37538, checked in by davidb, 15 months ago

'Development of winbox combined with interact.js to the point where basic rotation and zooming is working

File size: 3.5 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="winbox-with-interactjs-dist/css/winbox.min.css">
21 <script 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 $(document).ready(function() {
104 $("#gs-control-bar").width("100%").hide();
105
106 $("#gs-control-bar-toggle").click(function(){
107 $("#gs-control-bar").animate({
108 width: "toggle"
109 });
110 });
111
112 });
113
114 </script>
115
116</html>
Note: See TracBrowser for help on using the repository browser.