scratch – Diff between revs 57 and 58

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