scratch – Blame information for rev 117

Subversion Repositories:
Rev:
Rev Author Line No. Line
115 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico">
14  
15 <title>scratch</title>
16  
17 <!-- Bootstrap core CSS -->
18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
21 <!-- blueimp gallery -->
22 <link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css">
117 office 23 <!-- Swiper -->
24 <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css">
115 office 25  
26 <!-- Site-wide style CCS -->
27 <link href="css/style.css" rel="stylesheet">
28  
29 <!-- Local style -->
30 <link href="css/gallery/style.css" rel="stylesheet">
31 </head>
32  
33 <body>
34  
35 <!-- Main component for a primary marketing message or call to action -->
36 <div class="paralax-background"></div>
37 <div class="jumbotron">
38 <h1>scratch copy</h1>
39 <p class="quote">the asset sharer</p>
40 </div>
41  
42 <div class="container">
43  
44 <ul class="nav nav-tabs">
45 <li><a href="index.html">Home</a></li>
46 <li><a href="file.html">File</a></li>
47 <li><a href="text.html">Text</a></li>
48 <li><a href="draw.html">Draw</a></li>
49 <li><a href="link.html">Link</a></li>
50 <li class="active"><a href="#">Gallery</a></li>
51 </ul>
52  
53 <div id="main-panel" class="panel panel-default">
54 <div class="panel-body">
55 <div class="input-group">
56 <input id="URL" type="text" class="form-control" readonly>
57 <span class="input-group-btn">
58 <button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
59 </span>
60 <span class="input-group-btn">
61 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
62 </span>
63 </div>
64  
65 <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
66 <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
67 <div class="slides"></div>
68 <h3 class="title"></h3>
69 <a class="prev">‹</a>
70 <a class="next">›</a>
71 <a class="play-pause"></a>
72 <ol class="indicator"></ol>
73 </div>
117 office 74  
75 <div class="swiper-container">
76 <div id="links" class="swiper-wrapper">
77 </div>
78 <!-- If we need pagination -->
79 <div class="swiper-pagination"></div>
80  
81 <!-- If we need navigation buttons -->
82 <div class="swiper-button-prev"></div>
83 <div class="swiper-button-next"></div>
84  
85 <!-- If we need scrollbar -->
86 <div class="swiper-scrollbar"></div>
115 office 87 </div>
88 </div>
89 </div>
90  
91 </div> <!-- /container -->
92  
93 <div id="footer">
94 <div class="container">
95 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
96 </div>
97 </div>
98  
99 <!-- jQuery -->
100 <script src="bower_components/jquery/dist/jquery.min.js"></script>
101 <!-- BootStrap -->
102 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
103 <!-- Bootstrap Validator -->
104 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
105 <!-- blueimp-gallery -->
106 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
107 <!-- Clipboard -->
108 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
109 <!-- YAML -->
110 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
117 office 111 <!-- Swiper -->
112 <script src="bower_components/swiper/dist/js/swiper.min.js"></script>
113 <!-- Wizardry and Steamworks -->
114 <script src="bower_components/was/dist/was.min.js"></script>
115 office 115 <script>
116 $(document).ready(() => {
117  
118 // Extend gallery for HTML.
119 blueimp.Gallery.prototype.textFactory = function (obj, callback) {
120 var $element = $('<div>')
121 .addClass('text-content')
122 .attr('title', obj.title);
117 office 123 $.get(obj.href, {
124 timestamp: window.performance.now()
125 }).done(function (result) {
115 office 126 $element.html(result);
127 callback({
128 type: 'load',
129 target: $element[0]
130 });
131 })
132 .fail(function () {
133 callback({
134 type: 'error',
135 target: $element[0]
136 });
137 });
138 return $element[0];
139 };
140  
117 office 141 $.getJSON('gallery.php', {
142 timestamp: window.performance.now()
143 }).then((data) => {
115 office 144 //alert(JSON.stringify(data, null, 4));
145  
117 office 146 // Create slides.
147 var index = 0;
148 data.chunk(50).forEach((page) => {
115 office 149 document.getElementById('links')
150 .insertAdjacentHTML(
117 office 151 'beforeend',
152 '<div id="swiper-slide-' + index + '" class="swiper-slide"></div>'
153 );
154 page.forEach((link) => {
155 // Generic icon for text / html items.
156 switch(link.type) {
157 case 'text/plain':
158 link.preview ='img/text.png';
159 break;
160 }
161 document.getElementById('swiper-slide-' + index)
162 .insertAdjacentHTML(
163 'beforeend',
164 '<a href="' +
165 link.url +
166 '" type="' +
167 link.type +
168 '"><img src="' +
169 link.preview +
170 '" width="60" height="40"></a>'
171 );
172 });
173 ++index;
115 office 174 });
175 document.getElementById('links').onclick = function (event) {
176 event = event || window.event;
177 var target = event.target || event.srcElement,
178 link = target.src ? target.parentNode : target,
179 options = {
180 index: link,
181 event: event,
182 carousel: true,
183 container: '#blueimp-gallery-carousel',
184 stretchImages: true,
185 startSlideshow: false,
186 onslideend: function(index, slide) {
187 // Set the URL.
188 $('#URL').val(
189 location.protocol
190 .concat("//")
191 .concat(window.location.hostname)
192 .concat("/").concat(data[index].url)
193 );
194  
195 // Check if OpenGraph should be enabled.
196 switch(data[index].opengraph) {
197 case true:
198 // Enable the facebook button.
199 $('#btn-facebook')
200 .prop("disabled", false);
201 break;
202 default:
203 // Disable the facebook button.
204 $('#btn-facebook')
205 .prop("disabled", true);
206 break;
207 }
208  
209 // Change the URL to OpenGraph when the user clicks the button.
210 $('#btn-facebook').on('click', () => {
211 $('#URL')
212 .val(
213 location.protocol.concat("//")
214 .concat(window.location.hostname)
215 .concat("/")
216 .concat("og")
217 .concat("/")
218 .concat(data[index].url)
219 );
220 });
221 }
222 },
223 links = this.getElementsByTagName('a');
224 blueimp.Gallery(links, options);
225 };
226  
117 office 227 new Swiper ('.swiper-container', {
228 // Optional parameters
229 direction: 'horizontal',
230 loop: true,
231  
232 // If we need pagination
233 pagination: '.swiper-pagination',
234  
235 // Navigation arrows
236 nextButton: '.swiper-button-next',
237 prevButton: '.swiper-button-prev',
238  
239 // And if we need scrollbar
240 scrollbar: '.swiper-scrollbar',
241 });
242  
115 office 243 // Enable the Clipboard button.
244 new Clipboard('#copy-url');
245 });
246 });
247 </script>
248 <!-- Jumbotron parallax effect -->
249 <script>
250 var jumboHeight = $('.jumbotron').outerHeight();
251 function parallax(){
252 var scrolled = $(window).scrollTop();
253 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
254 }
255  
256 $(window).scroll(function(e){
257 parallax();
258 });
259 </script>
260 </body>
261 </html>