scratch – Blame information for rev 115

Subversion Repositories:
Rev:
Rev Author Line No. Line
25 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">
35 office 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" />
25 office 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  
64 office 15 <title>scratch</title>
25 office 16  
17 <!-- Bootstrap core CSS -->
58 office 18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
65 office 19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
25 office 21 <!-- Trumbowyg -->
58 office 22 <link href="bower_components/trumbowyg/dist/ui/trumbowyg.min.css" rel="stylesheet">
71 office 23  
24 <!-- Site-wide style CCS -->
25 <link href="css/style.css" rel="stylesheet">
26  
25 office 27 <!-- Local style -->
32 office 28 <link href="css/text/style.css" rel="stylesheet">
25 office 29 </head>
30  
31 <body>
32  
71 office 33 <!-- Main component for a primary marketing message or call to action -->
34 <div class="paralax-background"></div>
35 <div class="jumbotron">
36 <h1>scratch copy</h1>
37 <p class="quote">the asset sharer</p>
38 </div>
39  
25 office 40 <div class="container">
91 office 41  
25 office 42 <ul class="nav nav-tabs">
43 <li><a href="index.html">Home</a></li>
56 office 44 <li><a href="file.html">File</a></li>
25 office 45 <li class="active"><a href="#">Text</a></li>
84 office 46 <li><a href="draw.html">Draw</a></li>
91 office 47 <li><a href="link.html">Link</a></li>
115 office 48 <li><a href="gallery.html">Gallery</a></li>
25 office 49 </ul>
50  
84 office 51 <div id="main-panel" class="panel panel-default">
31 office 52 <div class="panel-heading">
37 office 53 <div class="form-group">
31 office 54 <div class="input-group">
55 <span class="input-group-btn">
39 office 56 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
41 office 57 <i class="glyphicon glyphicon-share"></i>
31 office 58 </button>
59 </span>
38 office 60 <input id="URL" type="text" class="form-control" readonly>
32 office 61 <span class="input-group-btn">
39 office 62 <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>
32 office 63 </span>
31 office 64 </div>
65 </div>
38 office 66 <form id="nick-form" role="form">
37 office 67 <div class="form-group has-feedback">
68 <div class="input-group">
69 <span class="input-group-btn">
39 office 70 <button id="go" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Load document.">
37 office 71 <i class="glyphicon glyphicon-play"></i>
72 </button>
73 </span>
74 <span class="input-group-btn">
39 office 75 <button id="reset" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Reset document.">
42 office 76 <i id="home-icon" class="glyphicon glyphicon-home"></i>
38 office 77 </button>
78 </span>
79 <input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32">
80 <span class="input-group-btn">
39 office 81 <button id="copy-nick" class="btn btn-default" type="button" data-clipboard-target="#nick" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
37 office 82 </span>
83 </div>
84 </div>
85 </form>
86 </div>
77 office 87 <div class="panel-body" id="editorpanel">
74 office 88 <div id="trumbowyg">
31 office 89 </div>
90 </div>
25 office 91 </div>
92  
93 </div> <!-- /container -->
94  
95 <div id="footer">
96 <div class="container">
71 office 97 <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>
25 office 98 </div>
99 </div>
100  
58 office 101 <!-- jQuery -->
102 <script src="bower_components/jquery/dist/jquery.min.js"></script>
103 <!-- BootStrap -->
104 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
77 office 105 <!-- Velocity -->
106 <script src="bower_components/velocity/velocity.min.js"></script>
25 office 107  
108 <!-- Trumbowyg -->
58 office 109 <script src="bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
32 office 110 <!-- Clipboard -->
58 office 111 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
37 office 112 <!-- Fingerprint 2 -->
58 office 113 <script src="bower_components/fingerprintjs2/dist/fingerprint2.min.js"></script>
37 office 114 <!-- js-cookie -->
58 office 115 <script src="bower_components/js-cookie/src/js.cookie.js"></script>
37 office 116 <!-- Bootstrap Validator -->
58 office 117 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
25 office 118 <script>
119 $(document).ready(() => {
38 office 120 // Attach the form validator.
91 office 121 $('#nick-form').validator({
38 office 122 focus: false
91 office 123 }).on('invalid.bs.validator', () => {
124 $('#go').attr('disabled', true);
125 }).on('valid.bs.validator', () => {
126 $('#go').attr('disabled', false);
38 office 127 });
128  
43 office 129 // Enable the Clipboard button.
130 new Clipboard('#copy-url');
131  
37 office 132 // Get the fingerprint.
61 office 133 new Fingerprint2({
134 //excludeUserAgent: true,
135 //excludeLanguage: true,
136 excludeColorDepth: true,
137 excludeScreenResolution: true,
138 excludeAvailableScreenResolution: true,
139 //excludeTimezoneOffset: true,
140 excludeSessionStorage: true,
141 excludeIndexedDB: true,
142 excludeAddBehavior: true,
143 excludeOpenDatabase: true,
144 //excludeCpuClass: true,
145 //excludePlatform: true,
146 excludeDoNotTrack: true,
147 excludeCanvas: true,
148 excludeWebGL: true,
149 excludeAdBlock: true,
150 //excludeHasLiedLanguages: true,
151 //excludeHasLiedResolution: true,
152 //excludeHasLiedOs: true,
153 //excludeHasLiedBrowser: true,
154 excludeJsFonts: true,
155 excludeFlashFonts: true,
156 excludePlugins: true,
157 excludeIEPlugins: true,
158 //excludeTouchSupport: true,
159 excludePixelRatio: true
160 }).get((result, components) => {
37 office 161 // Set the nick as a cookie.
38 office 162 const fingerprint = result;
37 office 163 var nick = Cookies.get('nick');
94 office 164 if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick)) {
37 office 165 Cookies.set('nick', result, { path: '' });
43 office 166 nick = result;
167 }
37 office 168 else
169 result = nick;
170  
171 // Set the nick.
172 $('#nick').val(result);
173 new Clipboard('#copy-nick');
174  
42 office 175 if(fingerprint == nick)
176 $('#home-icon').addClass("text-success");
177 else
178 $('#home-icon').addClass("text-danger");
179  
77 office 180 var autoSaveTimeoutID;
181  
54 office 182 function saveTextFile() {
96 office 183 $.get('session.php').then((token) => {
184 $.post('text.php', {
185 data: $('#trumbowyg').trumbowyg('html'),
186 token: token,
187 fingerprint: result,
188 action: 'SAVE',
189 token: token
190 }).done((data) => {
77 office 191  
96 office 192 // Visual feedback for a successful save.
193 $('#editorpanel')
194 .delay(250)
195 .velocity(
196 {
197 borderColor: '#ff99ff'
198 },
199 200)
200 .delay(500)
201 .velocity(
202 {
203 borderColor: '#ecf0f1'
204 },
205 200);
77 office 206  
96 office 207 }).fail(() => {
208 // Reschedule saving of the file.
209 if(autoSaveTimeoutID)
210 window.clearTimeout(autoSaveTimeoutID);
211 autoSaveTimeoutID = window.setTimeout(saveTextFile, 250);
212 });
37 office 213 });
54 office 214 }
215  
216 // Load the editor.
217 $('#trumbowyg').trumbowyg({
74 office 218 semantic: true,
54 office 219 autogrow: true,
220 disabled: true
221 }).on('tbwchange', () => {
222 // Clear the value of the URL box because the URL will have changed.
223 $('#URL').val('');
224 // Reschedule saving of the file.
77 office 225 if(autoSaveTimeoutID)
226 window.clearTimeout(autoSaveTimeoutID);
227 autoSaveTimeoutID = window.setTimeout(saveTextFile, 1000);
37 office 228 });
54 office 229  
37 office 230 // Retrieve the contents of the shared file.
54 office 231 $('#trumbowyg').trumbowyg('disable');
96 office 232 $.get('session.php').then((token) => {
233 $.post('text.php',
234 {
235 timestamp: window.performance.now(),
236 fingerprint: result,
237 action: 'LOAD',
238 token: token
239 }).done((data) => {;
240 $('#trumbowyg')
241 .trumbowyg('html', data);
242 $('#trumbowyg').trumbowyg('enable');
243 $('#trumbowyg').show();
244 }).fail(() => {
245 $('#trumbowyg').trumbowyg('enable');
246 $('#trumbowyg').show();
247 });
25 office 248 });
31 office 249  
37 office 250 $('#save').click(() => {
251 $('#editor').trumbowyg('disable');
252 var formData = new FormData();
253 formData.append('file', new Blob(
254 [
255 $('#trumbowyg').trumbowyg('html')
256 ]
257 ),
258 '.html'
259 );
96 office 260 $.get('session.php').then((token) => {
261 formData.append('token', token);
262 $.ajax({
263 url: 'file.php',
100 office 264 type: 'POST',
96 office 265 data: formData,
266 // cache: false // FF
267 processData: false,
268 contentType: false
269 }).done((data) => {
270 // Serialize JSON to object.
271 data = JSON.parse(data);
84 office 272  
96 office 273 $('#URL')
274 .val(
275 location.protocol
276 .concat("//")
277 .concat(window.location.hostname)
278 .concat("/")
279 .concat(data.hash)
280 );
281 $('#trumbowyg').trumbowyg('enable');
282 }).fail(() => {
283 $('#trumbowyg').trumbowyg('enable');
284 });
37 office 285 });
31 office 286 });
37 office 287  
41 office 288 // When the button is clicked, navigate to the fingerprint.
37 office 289 $('#go').click(() => {
290 nick = $('#nick').val();
94 office 291 if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
37 office 292 return;
293 Cookies.set('nick', nick, { path: '' });
40 office 294 result = nick;
37 office 295  
296 // Retrieve the contents of the shared file.
54 office 297 $('#editor').trumbowyg('disable');
96 office 298 $.get('session.php').then((token) => {
299 $.post('text.php',
300 {
301 timestamp: window.performance.now(),
302 fingerprint: nick,
303 action: 'LOAD',
304 token: token
305 }).done((data) => {;
306 $('#trumbowyg')
307 .trumbowyg('html', data);
308 $('#trumbowyg').trumbowyg('enable');
309 $('#trumbowyg').show();
42 office 310  
96 office 311 if(fingerprint == nick)
312 $('#home-icon').addClass("text-success").removeClass("text-danger");
313 else
314 $('#home-icon').addClass("text-danger").removeClass("text-success");
42 office 315  
96 office 316 }).fail(() => {
317 $('#trumbowyg').trumbowyg('enable');
318 $('#trumbowyg').show();
319 });
37 office 320 });
321 });
38 office 322  
41 office 323 // When the form is submitted, naigate to the fingerprint.
38 office 324 $('#nick-form').submit((e) => {
325 e.preventDefault();
326  
327 nick = $('#nick').val();
94 office 328 if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
38 office 329 return;
330 Cookies.set('nick', nick, { path: '' });
40 office 331 result = nick;
38 office 332  
333 // Retrieve the contents of the shared file.
54 office 334 $('#editor').trumbowyg('disable');
96 office 335 $.get('session.php').then((token) => {
336 $.post('text.php',
337 {
338 timestamp: window.performance.now(),
339 fingerprint: nick,
340 action: 'LOAD',
341 token: token
342 }).done((data) => {;
343 $('#trumbowyg')
344 .trumbowyg('html', data);
345 $('#trumbowyg').trumbowyg('enable');
346 $('#trumbowyg').show();
42 office 347  
96 office 348 if(fingerprint == nick)
349 $('#home-icon').addClass("text-success").removeClass("text-danger");
350 else
351 $('#home-icon').addClass("text-danger").removeClass("text-success");
42 office 352  
96 office 353 }).fail(() => {
354 $('#trumbowyg').trumbowyg('enable');
355 $('#trumbowyg').show();
356 });
38 office 357 });
358 });
359  
41 office 360 // While the nick is changing, navigate to the changed fingerprint.
361 $("#nick").on('input', () => {
362 nick = $('#nick').val();
94 office 363 if(!nick || !/^[A-Za-z0-9]{32}$/.test(nick))
41 office 364 return;
365 Cookies.set('nick', nick, { path: '' });
366 result = nick;
367  
368 // Retrieve the contents of the shared file.
54 office 369 $('#editor').trumbowyg('disable');
96 office 370 $.get('session.php').then((token) => {
371 $.post('text.php',
372 {
373 timestamp: window.performance.now(),
374 fingerprint: nick,
375 action: 'LOAD',
376 token: token
377 }).done((data) => {;
378 $('#trumbowyg')
379 .trumbowyg('html', data);
380 $('#trumbowyg').trumbowyg('enable');
381 $('#trumbowyg').show();
43 office 382  
96 office 383 if(fingerprint == nick)
384 $('#home-icon').addClass("text-success").removeClass("text-danger");
385 else
386 $('#home-icon').addClass("text-danger").removeClass("text-success");
387 }).fail(() => {
388 $('#trumbowyg').trumbowyg('enable');
389 $('#trumbowyg').show();
390 });
41 office 391 });
392 });
393  
394 // When the reset button is pressed, navigate to the fingerprint.
38 office 395 $('#reset').click(() => {
396 Cookies.set('nick', fingerprint, { path: '' });
397 $('#nick').val(fingerprint);
40 office 398 result = fingerprint;
42 office 399 nick = fingerprint;
38 office 400  
401 // Retrieve the contents of the shared file.
54 office 402 $('#editor').trumbowyg('disable');
96 office 403 $.get('session.php').then((token) => {
404 $.post('text.php',
405 {
406 timestamp: window.performance.now(),
407 fingerprint: fingerprint,
408 action: 'LOAD',
409 token: token
410 }).done((data) => {;
411 $('#trumbowyg')
412 .trumbowyg('html', data);
413 $('#trumbowyg').trumbowyg('enable');
414 $('#trumbowyg').show();
415 if(fingerprint == nick)
416 $('#home-icon').addClass("text-success").removeClass("text-danger");
417 else
418 $('#home-icon').addClass("text-danger").removeClass("text-success");
419 }).fail(() => {
420 $('#trumbowyg').trumbowyg('enable');
421 $('#trumbowyg').show();
422 });
38 office 423 });
424 });
31 office 425 });
84 office 426  
427 // Scroll to the panel.
428 $('html, body').animate({
429 scrollTop: $('#main-panel').offset().top
430 }, 'slow');
25 office 431 });
432 </script>
71 office 433 <!-- Jumbotron parallax effect -->
70 office 434 <script>
435 var jumboHeight = $('.jumbotron').outerHeight();
436 function parallax(){
437 var scrolled = $(window).scrollTop();
438 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
439 }
440  
441 $(window).scroll(function(e){
442 parallax();
443 });
444 </script>
25 office 445 </body>
446 </html>