scratch – Diff between revs 41 and 42

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 41 Rev 42
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 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 // Get the fingerprint. 130 // Get the fingerprint.
131 new Fingerprint2().get((result, components) => { 131 new Fingerprint2().get((result, components) => {
132 // Set the nick as a cookie. 132 // Set the nick as a cookie.
133 const fingerprint = result; 133 const fingerprint = result;
134 var nick = Cookies.get('nick'); 134 var nick = Cookies.get('nick');
135 if(!nick || nick.length !== 32) 135 if(!nick || nick.length !== 32)
136 Cookies.set('nick', result, { path: '' }); 136 Cookies.set('nick', result, { path: '' });
137 else 137 else
138 result = nick; 138 result = nick;
139 139
140 // Set the nick. 140 // Set the nick.
141 $('#nick').val(result); 141 $('#nick').val(result);
142 new Clipboard('#copy-nick'); 142 new Clipboard('#copy-nick');
-   143
-   144 if(fingerprint == nick)
-   145 $('#home-icon').addClass("text-success");
-   146 else
-   147 $('#home-icon').addClass("text-danger");
143 148
144 // Load the editor. 149 // Load the editor.
145 $('#trumbowyg').trumbowyg({ 150 $('#trumbowyg').trumbowyg({
146 autogrow: true, 151 autogrow: true,
147 disabled: true 152 disabled: true
148 }).on('tbwchange', () => { 153 }).on('tbwchange', () => {
149 $('#editor').trumbowyg('disable'); 154 $('#editor').trumbowyg('disable');
150 $.post('share-text.php', { 155 $.post('share-text.php', {
151 data: $('#trumbowyg').trumbowyg('html'), 156 data: $('#trumbowyg').trumbowyg('html'),
152 fingerprint: result, 157 fingerprint: result,
153 action: 'SAVE' 158 action: 'SAVE'
154 }).done((data) => { 159 }).done((data) => {
155 $('#trumbowyg').trumbowyg('enable'); 160 $('#trumbowyg').trumbowyg('enable');
156 }).fail(() => { 161 }).fail(() => {
157 $('#trumbowyg').trumbowyg('enable'); 162 $('#trumbowyg').trumbowyg('enable');
158 }); 163 });
159 }); 164 });
160 165
161 // Retrieve the contents of the shared file. 166 // Retrieve the contents of the shared file.
162 $.post('share-text.php', 167 $.post('share-text.php',
163 { 168 {
164 timestamp: window.performance.now(), 169 timestamp: window.performance.now(),
165 fingerprint: result, 170 fingerprint: result,
166 action: 'LOAD' 171 action: 'LOAD'
167 }).done((data) => {; 172 }).done((data) => {;
168 $('#trumbowyg') 173 $('#trumbowyg')
169 .trumbowyg('html', data); 174 .trumbowyg('html', data);
170 $('#trumbowyg').trumbowyg('enable'); 175 $('#trumbowyg').trumbowyg('enable');
171 $('#trumbowyg').show(); 176 $('#trumbowyg').show();
172 }).fail(() => { 177 }).fail(() => {
173 $('#trumbowyg').trumbowyg('enable'); 178 $('#trumbowyg').trumbowyg('enable');
174 $('#trumbowyg').show(); 179 $('#trumbowyg').show();
175 }); 180 });
176 181
177 // Enable the Clipboard button. 182 // Enable the Clipboard button.
178 new Clipboard('#copy-url'); 183 new Clipboard('#copy-url');
179 184
180 $('#save').click(() => { 185 $('#save').click(() => {
181 $('#editor').trumbowyg('disable'); 186 $('#editor').trumbowyg('disable');
182 187
183 var formData = new FormData(); 188 var formData = new FormData();
184 formData.append('file', new Blob( 189 formData.append('file', new Blob(
185 [ 190 [
186 $('#trumbowyg').trumbowyg('html') 191 $('#trumbowyg').trumbowyg('html')
187 ] 192 ]
188 ), 193 ),
189 '.html' 194 '.html'
190 ); 195 );
191 196
192 $.ajax({ 197 $.ajax({
193 url: 'upload-files.php', 198 url: 'upload-files.php',
194 type: 'POST', 199 type: 'POST',
195 data: formData, 200 data: formData,
196 // cache: false // FF 201 // cache: false // FF
197 processData: false, 202 processData: false,
198 contentType: false 203 contentType: false
199 }).done((data) => { 204 }).done((data) => {
200 $('#URL').val(data); 205 $('#URL').val(data);
201 $('#trumbowyg').trumbowyg('enable'); 206 $('#trumbowyg').trumbowyg('enable');
202 }).fail(() => { 207 }).fail(() => {
203 alert('failed'); -  
204 $('#trumbowyg').trumbowyg('enable'); 208 $('#trumbowyg').trumbowyg('enable');
205 }); 209 });
206 }); 210 });
207 211
208 // When the button is clicked, navigate to the fingerprint. 212 // When the button is clicked, navigate to the fingerprint.
209 $('#go').click(() => { 213 $('#go').click(() => {
210 nick = $('#nick').val(); 214 nick = $('#nick').val();
211 if(!nick || nick.length != 32) 215 if(!nick || nick.length != 32)
212 return; 216 return;
213 Cookies.set('nick', nick, { path: '' }); 217 Cookies.set('nick', nick, { path: '' });
214 result = nick; 218 result = nick;
-   219
-   220 if(fingerprint == nick)
-   221 $('#home-icon').addClass("text-success").removeClass("text-danger");
-   222 else
-   223 $('#home-icon').addClass("text-danger").removeClass("text-success");
215 224
216 // Retrieve the contents of the shared file. 225 // Retrieve the contents of the shared file.
217 $.post('share-text.php', 226 $.post('share-text.php',
218 { 227 {
219 timestamp: window.performance.now(), 228 timestamp: window.performance.now(),
220 fingerprint: nick, 229 fingerprint: nick,
221 action: 'LOAD' 230 action: 'LOAD'
222 }).done((data) => {; 231 }).done((data) => {;
223 $('#trumbowyg') 232 $('#trumbowyg')
224 .trumbowyg('html', data); 233 .trumbowyg('html', data);
225 $('#trumbowyg').trumbowyg('enable'); 234 $('#trumbowyg').trumbowyg('enable');
226 $('#trumbowyg').show(); 235 $('#trumbowyg').show();
-   236
-   237 if(fingerprint == nick)
-   238 $('#home-icon').addClass("text-success");
-   239 else
-   240 $('#home-icon').addClass("text-danger");
-   241
227 }).fail(() => { 242 }).fail(() => {
228 $('#trumbowyg').trumbowyg('enable'); 243 $('#trumbowyg').trumbowyg('enable');
229 $('#trumbowyg').show(); 244 $('#trumbowyg').show();
230 }); 245 });
231 }); 246 });
232 247
233 // When the form is submitted, naigate to the fingerprint. 248 // When the form is submitted, naigate to the fingerprint.
234 $('#nick-form').submit((e) => { 249 $('#nick-form').submit((e) => {
235 e.preventDefault(); 250 e.preventDefault();
236 251
237 nick = $('#nick').val(); 252 nick = $('#nick').val();
238 if(!nick || nick.length != 32) 253 if(!nick || nick.length != 32)
239 return; 254 return;
240 Cookies.set('nick', nick, { path: '' }); 255 Cookies.set('nick', nick, { path: '' });
241 result = nick; 256 result = nick;
-   257
-   258 if(fingerprint == nick)
-   259 $('#home-icon').addClass("text-success");
-   260 else
-   261 $('#home-icon').addClass("text-danger");
242 262
243 // Retrieve the contents of the shared file. 263 // Retrieve the contents of the shared file.
244 $.post('share-text.php', 264 $.post('share-text.php',
245 { 265 {
246 timestamp: window.performance.now(), 266 timestamp: window.performance.now(),
247 fingerprint: nick, 267 fingerprint: nick,
248 action: 'LOAD' 268 action: 'LOAD'
249 }).done((data) => {; 269 }).done((data) => {;
250 $('#trumbowyg') 270 $('#trumbowyg')
251 .trumbowyg('html', data); 271 .trumbowyg('html', data);
252 $('#trumbowyg').trumbowyg('enable'); 272 $('#trumbowyg').trumbowyg('enable');
253 $('#trumbowyg').show(); 273 $('#trumbowyg').show();
-   274
-   275 if(fingerprint == nick)
-   276 $('#home-icon').addClass("text-success").removeClass("text-danger");
-   277 else
-   278 $('#home-icon').addClass("text-danger").removeClass("text-success");
-   279
254 }).fail(() => { 280 }).fail(() => {
255 $('#trumbowyg').trumbowyg('enable'); 281 $('#trumbowyg').trumbowyg('enable');
256 $('#trumbowyg').show(); 282 $('#trumbowyg').show();
257 }); 283 });
258 }); 284 });
259 285
260 // While the nick is changing, navigate to the changed fingerprint. 286 // While the nick is changing, navigate to the changed fingerprint.
261 $("#nick").on('input', () => { 287 $("#nick").on('input', () => {
262 nick = $('#nick').val(); 288 nick = $('#nick').val();
263 if(!nick || nick.length != 32) 289 if(!nick || nick.length != 32)
264 return; 290 return;
265 Cookies.set('nick', nick, { path: '' }); 291 Cookies.set('nick', nick, { path: '' });
266 result = nick; 292 result = nick;
-   293
-   294 if(fingerprint == nick)
-   295 $('#home-icon').addClass("text-success").removeClass("text-danger");
-   296 else
-   297 $('#home-icon').addClass("text-danger").removeClass("text-success");
267 298
268 // Retrieve the contents of the shared file. 299 // Retrieve the contents of the shared file.
269 $.post('share-text.php', 300 $.post('share-text.php',
270 { 301 {
271 timestamp: window.performance.now(), 302 timestamp: window.performance.now(),
272 fingerprint: nick, 303 fingerprint: nick,
273 action: 'LOAD' 304 action: 'LOAD'
274 }).done((data) => {; 305 }).done((data) => {;
275 $('#trumbowyg') 306 $('#trumbowyg')
276 .trumbowyg('html', data); 307 .trumbowyg('html', data);
277 $('#trumbowyg').trumbowyg('enable'); 308 $('#trumbowyg').trumbowyg('enable');
278 $('#trumbowyg').show(); 309 $('#trumbowyg').show();
279 }).fail(() => { 310 }).fail(() => {
280 $('#trumbowyg').trumbowyg('enable'); 311 $('#trumbowyg').trumbowyg('enable');
281 $('#trumbowyg').show(); 312 $('#trumbowyg').show();
282 }); 313 });
283 }); 314 });
284 315
285 // When the reset button is pressed, navigate to the fingerprint. 316 // When the reset button is pressed, navigate to the fingerprint.
286 $('#reset').click(() => { 317 $('#reset').click(() => {
287 Cookies.set('nick', fingerprint, { path: '' }); 318 Cookies.set('nick', fingerprint, { path: '' });
288 $('#nick').val(fingerprint); 319 $('#nick').val(fingerprint);
289 result = fingerprint; 320 result = fingerprint;
-   321 nick = fingerprint;
-   322
-   323 if(fingerprint == nick)
-   324 $('#home-icon').addClass("text-success").removeClass("text-danger");
-   325 else
-   326 $('#home-icon').addClass("text-danger").removeClass("text-success");
290 327
291 // Retrieve the contents of the shared file. 328 // Retrieve the contents of the shared file.
292 $.post('share-text.php', 329 $.post('share-text.php',
293 { 330 {
294 timestamp: window.performance.now(), 331 timestamp: window.performance.now(),
295 fingerprint: fingerprint, 332 fingerprint: fingerprint,
296 action: 'LOAD' 333 action: 'LOAD'
297 }).done((data) => {; 334 }).done((data) => {;
298 $('#trumbowyg') 335 $('#trumbowyg')
299 .trumbowyg('html', data); 336 .trumbowyg('html', data);
300 $('#trumbowyg').trumbowyg('enable'); 337 $('#trumbowyg').trumbowyg('enable');
301 $('#trumbowyg').show(); 338 $('#trumbowyg').show();
302 }).fail(() => { 339 }).fail(() => {
303 $('#trumbowyg').trumbowyg('enable'); 340 $('#trumbowyg').trumbowyg('enable');
304 $('#trumbowyg').show(); 341 $('#trumbowyg').show();
305 }); 342 });
306 }); 343 });
307 }); 344 });
308 345
309 }); 346 });
310 </script> 347 </script>
311 </body> 348 </body>
312 </html> 349 </html>
313   350