scratch – Blame information for rev 84

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