scratch – Blame information for rev 125

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