scratch – Blame information for rev 77

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