scratch – Blame information for rev 96

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