scratch – Diff between revs 49 and 51

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 49 Rev 51
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" /> 7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" /> 8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1"> 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 --> 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"> 11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks"> 12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico"> 13 <link rel="icon" href="favicon.ico">
14   14  
15 <title>Quickload</title> 15 <title>Quickload</title>
16 16
17 <!-- Polyfill --> 17 <!-- Polyfill -->
18 <script src="js/polyfill/polyfill.min.js"></script> 18 <script src="js/polyfill/polyfill.min.js"></script>
19   19  
20 <!-- Bootstrap core CSS --> 20 <!-- Bootstrap core CSS -->
21 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> 21 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
22   22  
23 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 23 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
24 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet"> 24 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
25   25  
26 <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 26 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
27 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]--> 27 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
28 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script> 28 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
29   29  
30 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 30 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
31 <!--[if lt IE 9]> 31 <!--[if lt IE 9]>
32 <script src="js/bootstrap/html5shiv.min.js"></script> 32 <script src="js/bootstrap/html5shiv.min.js"></script>
33 <script src="js/bootstrap/respond.min.js"></script> 33 <script src="js/bootstrap/respond.min.js"></script>
34 <![endif]--> 34 <![endif]-->
35 35
36 <!-- Trumbowyg --> 36 <!-- Trumbowyg -->
37 <link href="css/trumbowyg/trumbowyg.min.css" rel="stylesheet"> 37 <link href="css/trumbowyg/trumbowyg.min.css" rel="stylesheet">
38 <!-- Local style --> 38 <!-- Local style -->
39 <link href="css/text/style.css" rel="stylesheet"> 39 <link href="css/text/style.css" rel="stylesheet">
40 </head> 40 </head>
41   41  
42 <body> 42 <body>
43   43  
44 <div class="container"> 44 <div class="container">
45   45  
46 <!-- Main component for a primary marketing message or call to action --> 46 <!-- Main component for a primary marketing message or call to action -->
47 <div class="jumbotron"> 47 <div class="jumbotron">
48 <h1>Quickload</h1> 48 <h1>Quickload</h1>
49 <p>Asset sharing platform.</p> 49 <p>Asset sharing platform.</p>
50 </div> 50 </div>
51 51
52 <ul class="nav nav-tabs"> 52 <ul class="nav nav-tabs">
53 <li><a href="index.html">Home</a></li> 53 <li><a href="index.html">Home</a></li>
54 <li><a href="files.html">Files</a></li> 54 <li><a href="files.html">Files</a></li>
55 <li class="active"><a href="#">Text</a></li> 55 <li class="active"><a href="#">Text</a></li>
56 </ul> 56 </ul>
57 57
58 <div class="panel panel-default"> 58 <div class="panel panel-default">
59 <div class="panel-heading"> 59 <div class="panel-heading">
60 <div class="form-group"> 60 <div class="form-group">
61 <div class="input-group"> 61 <div class="input-group">
62 <span class="input-group-btn"> 62 <span class="input-group-btn">
63 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link."> 63 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
64 <i class="glyphicon glyphicon-share"></i> 64 <i class="glyphicon glyphicon-share"></i>
65 </button> 65 </button>
66 </span> 66 </span>
67 <input id="URL" type="text" class="form-control" readonly> 67 <input id="URL" type="text" class="form-control" readonly>
68 <span class="input-group-btn"> 68 <span class="input-group-btn">
69 <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> 69 <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>
70 </span> 70 </span>
71 </div> 71 </div>
72 </div> 72 </div>
73 <form id="nick-form" role="form"> 73 <form id="nick-form" role="form">
74 <div class="form-group has-feedback"> 74 <div class="form-group has-feedback">
75 <div class="input-group"> 75 <div class="input-group">
76 <span class="input-group-btn"> 76 <span class="input-group-btn">
77 <button id="go" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Load document."> 77 <button id="go" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Load document.">
78 <i class="glyphicon glyphicon-play"></i> 78 <i class="glyphicon glyphicon-play"></i>
79 </button> 79 </button>
80 </span> 80 </span>
81 <span class="input-group-btn"> 81 <span class="input-group-btn">
82 <button id="reset" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Reset document."> 82 <button id="reset" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Reset document.">
83 <i id="home-icon" class="glyphicon glyphicon-home"></i> 83 <i id="home-icon" class="glyphicon glyphicon-home"></i>
84 </button> 84 </button>
85 </span> 85 </span>
86 <input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32"> 86 <input id="nick" type="text" class="form-control" pattern="^[A-Za-z0-9]{32}$" maxlength="32">
87 <span class="input-group-btn"> 87 <span class="input-group-btn">
88 <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> 88 <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>
89 </span> 89 </span>
90 </div> 90 </div>
91 </div> 91 </div>
92 </form> 92 </form>
93 </div> 93 </div>
94 <div class="panel-body" id="editorpanel"> 94 <div class="panel-body" id="editorpanel">
95 <div id="trumbowyg" style="display: none; font-family: monospace;"> 95 <div id="trumbowyg" style="display: none; font-family: monospace;">
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
99   99  
100 </div> <!-- /container --> 100 </div> <!-- /container -->
101 101
102 <div id="footer"> 102 <div id="footer">
103 <div class="container"> 103 <div class="container">
104 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 104 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
105 </div> 105 </div>
106 </div> 106 </div>
107   107  
108 <script src="js/jquery/jquery.min.js"></script> 108 <script src="js/jquery/jquery.min.js"></script>
109 <script src="js/bootstrap/bootstrap.min.js"></script> 109 <script src="js/bootstrap/bootstrap.min.js"></script>
110 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 110 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
111 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script> 111 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
112 112
113 <!-- Trumbowyg --> 113 <!-- Trumbowyg -->
114 <script src="js/trumbowyg/trumbowyg.min.js"></script> 114 <script src="js/trumbowyg/trumbowyg.min.js"></script>
115 <!-- Clipboard --> 115 <!-- Clipboard -->
116 <script src="js/clipboard/clipboard.min.js"></script> 116 <script src="js/clipboard/clipboard.min.js"></script>
117 <!-- Fingerprint 2 --> 117 <!-- Fingerprint 2 -->
118 <script src="js/fingerprintjs/fingerprint2.min.js"></script> 118 <script src="js/fingerprintjs/fingerprint2.min.js"></script>
119 <!-- js-cookie --> 119 <!-- js-cookie -->
120 <script src="js/jscookie/js.cookie.js"></script> 120 <script src="js/jscookie/js.cookie.js"></script>
121 <!-- Bootstrap Validator --> 121 <!-- Bootstrap Validator -->
122 <script src="js/validator/validator.min.js"></script> 122 <script src="js/validator/validator.min.js"></script>
123 <script> 123 <script>
124 $(document).ready(() => { 124 $(document).ready(() => {
125 // Attach the form validator. 125 // Attach the form validator.
126 $('#nick-form').validator({ 126 $('#nick-form').validator({
127 focus: false 127 focus: false
128 }); 128 });
129 129
130 // Enable the Clipboard button. 130 // Enable the Clipboard button.
131 new Clipboard('#copy-url'); 131 new Clipboard('#copy-url');
132 132
133 // Get the fingerprint. 133 // Get the fingerprint.
134 new Fingerprint2().get((result, components) => { 134 new Fingerprint2().get((result, components) => {
135 // Set the nick as a cookie. 135 // Set the nick as a cookie.
136 const fingerprint = result; 136 const fingerprint = result;
137 var nick = Cookies.get('nick'); 137 var nick = Cookies.get('nick');
138 if(!nick || nick.length !== 32) { 138 if(!nick || nick.length !== 32) {
139 Cookies.set('nick', result, { path: '' }); 139 Cookies.set('nick', result, { path: '' });
140 nick = result; 140 nick = result;
141 } 141 }
142 else 142 else
143 result = nick; 143 result = nick;
144 144
145 // Set the nick. 145 // Set the nick.
146 $('#nick').val(result); 146 $('#nick').val(result);
147 new Clipboard('#copy-nick'); 147 new Clipboard('#copy-nick');
148 148
149 if(fingerprint == nick) 149 if(fingerprint == nick)
150 $('#home-icon').addClass("text-success"); 150 $('#home-icon').addClass("text-success");
151 else 151 else
152 $('#home-icon').addClass("text-danger"); 152 $('#home-icon').addClass("text-danger");
153 153
154 // Load the editor. 154 // Load the editor.
155 $('#trumbowyg').trumbowyg({ 155 $('#trumbowyg').trumbowyg({
156 autogrow: true, 156 autogrow: true,
157 disabled: true 157 disabled: true
158 }).on('tbwchange', () => { 158 }).on('tbwchange', () => {
159 $('#editor').trumbowyg('disable'); 159 $('#editor').trumbowyg('disable');
160 $.post('text.php', { 160 $.post('text.php', {
161 data: $('#trumbowyg').trumbowyg('html'), 161 data: $('#trumbowyg').trumbowyg('html'),
162 fingerprint: result, 162 fingerprint: result,
163 action: 'SAVE' 163 action: 'SAVE',
-   164 timeout: 0
164 }).done((data) => { 165 }).done((data) => {
165 $('#trumbowyg').trumbowyg('enable'); 166 $('#trumbowyg').trumbowyg('enable');
166 }).fail(() => { 167 }).fail(() => {
167 $('#trumbowyg').trumbowyg('enable'); 168 $('#trumbowyg').trumbowyg('enable');
168 }); 169 });
169 }); 170 });
170 171
171 // Retrieve the contents of the shared file. 172 // Retrieve the contents of the shared file.
172 $.post('text.php', 173 $.post('text.php',
173 { 174 {
174 timestamp: window.performance.now(), 175 timestamp: window.performance.now(),
175 fingerprint: result, 176 fingerprint: result,
176 action: 'LOAD' 177 action: 'LOAD'
177 }).done((data) => {; 178 }).done((data) => {;
178 $('#trumbowyg') 179 $('#trumbowyg')
179 .trumbowyg('html', data); 180 .trumbowyg('html', data);
180 $('#trumbowyg').trumbowyg('enable'); 181 $('#trumbowyg').trumbowyg('enable');
181 $('#trumbowyg').show(); 182 $('#trumbowyg').show();
182 }).fail(() => { 183 }).fail(() => {
183 $('#trumbowyg').trumbowyg('enable'); 184 $('#trumbowyg').trumbowyg('enable');
184 $('#trumbowyg').show(); 185 $('#trumbowyg').show();
185 }); 186 });
186 187
187 $('#save').click(() => { 188 $('#save').click(() => {
188 $('#editor').trumbowyg('disable'); 189 $('#editor').trumbowyg('disable');
189 190
190 var formData = new FormData(); 191 var formData = new FormData();
191 formData.append('file', new Blob( 192 formData.append('file', new Blob(
192 [ 193 [
193 $('#trumbowyg').trumbowyg('html') 194 $('#trumbowyg').trumbowyg('html')
194 ] 195 ]
195 ), 196 ),
196 '.html' 197 '.html'
197 ); 198 );
198 199
199 $.ajax({ 200 $.ajax({
200 url: 'file.php', 201 url: 'file.php',
201 type: 'POST', 202 type: 'POST',
202 data: formData, 203 data: formData,
203 // cache: false // FF 204 // cache: false // FF
204 processData: false, 205 processData: false,
205 contentType: false 206 contentType: false
206 }).done((data) => { 207 }).done((data) => {
207 $('#URL').val(data); 208 $('#URL').val(data);
208 $('#trumbowyg').trumbowyg('enable'); 209 $('#trumbowyg').trumbowyg('enable');
209 }).fail(() => { 210 }).fail(() => {
210 $('#trumbowyg').trumbowyg('enable'); 211 $('#trumbowyg').trumbowyg('enable');
211 }); 212 });
212 }); 213 });
213 214
214 // When the button is clicked, navigate to the fingerprint. 215 // When the button is clicked, navigate to the fingerprint.
215 $('#go').click(() => { 216 $('#go').click(() => {
216 nick = $('#nick').val(); 217 nick = $('#nick').val();
217 if(!nick || nick.length != 32) 218 if(!nick || nick.length != 32)
218 return; 219 return;
219 Cookies.set('nick', nick, { path: '' }); 220 Cookies.set('nick', nick, { path: '' });
220 result = nick; 221 result = nick;
221 222
222 // Retrieve the contents of the shared file. 223 // Retrieve the contents of the shared file.
223 $.post('text.php', 224 $.post('text.php',
224 { 225 {
225 timestamp: window.performance.now(), 226 timestamp: window.performance.now(),
226 fingerprint: nick, 227 fingerprint: nick,
227 action: 'LOAD' 228 action: 'LOAD'
228 }).done((data) => {; 229 }).done((data) => {;
229 $('#trumbowyg') 230 $('#trumbowyg')
230 .trumbowyg('html', data); 231 .trumbowyg('html', data);
231 $('#trumbowyg').trumbowyg('enable'); 232 $('#trumbowyg').trumbowyg('enable');
232 $('#trumbowyg').show(); 233 $('#trumbowyg').show();
233 234
234 if(fingerprint == nick) 235 if(fingerprint == nick)
235 $('#home-icon').addClass("text-success").removeClass("text-danger"); 236 $('#home-icon').addClass("text-success").removeClass("text-danger");
236 else 237 else
237 $('#home-icon').addClass("text-danger").removeClass("text-success"); 238 $('#home-icon').addClass("text-danger").removeClass("text-success");
238 239
239 }).fail(() => { 240 }).fail(() => {
240 $('#trumbowyg').trumbowyg('enable'); 241 $('#trumbowyg').trumbowyg('enable');
241 $('#trumbowyg').show(); 242 $('#trumbowyg').show();
242 }); 243 });
243 }); 244 });
244 245
245 // When the form is submitted, naigate to the fingerprint. 246 // When the form is submitted, naigate to the fingerprint.
246 $('#nick-form').submit((e) => { 247 $('#nick-form').submit((e) => {
247 e.preventDefault(); 248 e.preventDefault();
248 249
249 nick = $('#nick').val(); 250 nick = $('#nick').val();
250 if(!nick || nick.length != 32) 251 if(!nick || nick.length != 32)
251 return; 252 return;
252 Cookies.set('nick', nick, { path: '' }); 253 Cookies.set('nick', nick, { path: '' });
253 result = nick; 254 result = nick;
254 255
255 // Retrieve the contents of the shared file. 256 // Retrieve the contents of the shared file.
256 $.post('text.php', 257 $.post('text.php',
257 { 258 {
258 timestamp: window.performance.now(), 259 timestamp: window.performance.now(),
259 fingerprint: nick, 260 fingerprint: nick,
260 action: 'LOAD' 261 action: 'LOAD'
261 }).done((data) => {; 262 }).done((data) => {;
262 $('#trumbowyg') 263 $('#trumbowyg')
263 .trumbowyg('html', data); 264 .trumbowyg('html', data);
264 $('#trumbowyg').trumbowyg('enable'); 265 $('#trumbowyg').trumbowyg('enable');
265 $('#trumbowyg').show(); 266 $('#trumbowyg').show();
266 267
267 if(fingerprint == nick) 268 if(fingerprint == nick)
268 $('#home-icon').addClass("text-success").removeClass("text-danger"); 269 $('#home-icon').addClass("text-success").removeClass("text-danger");
269 else 270 else
270 $('#home-icon').addClass("text-danger").removeClass("text-success"); 271 $('#home-icon').addClass("text-danger").removeClass("text-success");
271 272
272 }).fail(() => { 273 }).fail(() => {
273 $('#trumbowyg').trumbowyg('enable'); 274 $('#trumbowyg').trumbowyg('enable');
274 $('#trumbowyg').show(); 275 $('#trumbowyg').show();
275 }); 276 });
276 }); 277 });
277 278
278 // While the nick is changing, navigate to the changed fingerprint. 279 // While the nick is changing, navigate to the changed fingerprint.
279 $("#nick").on('input', () => { 280 $("#nick").on('input', () => {
280 nick = $('#nick').val(); 281 nick = $('#nick').val();
281 if(!nick || nick.length != 32) 282 if(!nick || nick.length != 32)
282 return; 283 return;
283 Cookies.set('nick', nick, { path: '' }); 284 Cookies.set('nick', nick, { path: '' });
284 result = nick; 285 result = nick;
285 286
286 // Retrieve the contents of the shared file. 287 // Retrieve the contents of the shared file.
287 $.post('text.php', 288 $.post('text.php',
288 { 289 {
289 timestamp: window.performance.now(), 290 timestamp: window.performance.now(),
290 fingerprint: nick, 291 fingerprint: nick,
291 action: 'LOAD' 292 action: 'LOAD'
292 }).done((data) => {; 293 }).done((data) => {;
293 $('#trumbowyg') 294 $('#trumbowyg')
294 .trumbowyg('html', data); 295 .trumbowyg('html', data);
295 $('#trumbowyg').trumbowyg('enable'); 296 $('#trumbowyg').trumbowyg('enable');
296 $('#trumbowyg').show(); 297 $('#trumbowyg').show();
297 298
298 if(fingerprint == nick) 299 if(fingerprint == nick)
299 $('#home-icon').addClass("text-success").removeClass("text-danger"); 300 $('#home-icon').addClass("text-success").removeClass("text-danger");
300 else 301 else
301 $('#home-icon').addClass("text-danger").removeClass("text-success"); 302 $('#home-icon').addClass("text-danger").removeClass("text-success");
302 }).fail(() => { 303 }).fail(() => {
303 $('#trumbowyg').trumbowyg('enable'); 304 $('#trumbowyg').trumbowyg('enable');
304 $('#trumbowyg').show(); 305 $('#trumbowyg').show();
305 }); 306 });
306 }); 307 });
307 308
308 // When the reset button is pressed, navigate to the fingerprint. 309 // When the reset button is pressed, navigate to the fingerprint.
309 $('#reset').click(() => { 310 $('#reset').click(() => {
310 Cookies.set('nick', fingerprint, { path: '' }); 311 Cookies.set('nick', fingerprint, { path: '' });
311 $('#nick').val(fingerprint); 312 $('#nick').val(fingerprint);
312 result = fingerprint; 313 result = fingerprint;
313 nick = fingerprint; 314 nick = fingerprint;
314 315
315 // Retrieve the contents of the shared file. 316 // Retrieve the contents of the shared file.
316 $.post('text.php', 317 $.post('text.php',
317 { 318 {
318 timestamp: window.performance.now(), 319 timestamp: window.performance.now(),
319 fingerprint: fingerprint, 320 fingerprint: fingerprint,
320 action: 'LOAD' 321 action: 'LOAD'
321 }).done((data) => {; 322 }).done((data) => {;
322 $('#trumbowyg') 323 $('#trumbowyg')
323 .trumbowyg('html', data); 324 .trumbowyg('html', data);
324 $('#trumbowyg').trumbowyg('enable'); 325 $('#trumbowyg').trumbowyg('enable');
325 $('#trumbowyg').show(); 326 $('#trumbowyg').show();
326 327
327 if(fingerprint == nick) 328 if(fingerprint == nick)
328 $('#home-icon').addClass("text-success").removeClass("text-danger"); 329 $('#home-icon').addClass("text-success").removeClass("text-danger");
329 else 330 else
330 $('#home-icon').addClass("text-danger").removeClass("text-success"); 331 $('#home-icon').addClass("text-danger").removeClass("text-success");
331 }).fail(() => { 332 }).fail(() => {
332 $('#trumbowyg').trumbowyg('enable'); 333 $('#trumbowyg').trumbowyg('enable');
333 $('#trumbowyg').show(); 334 $('#trumbowyg').show();
334 }); 335 });
335 }); 336 });
336 }); 337 });
337 }); 338 });
338 </script> 339 </script>
339 </body> 340 </body>
340 </html> 341 </html>
341   342