scratch – Diff between revs 129 and 131
?pathlinks?
Rev 129 | Rev 131 | |||
---|---|---|---|---|
Line 51... | Line 51... | |||
51 | <li><a href="draw.html">Draw</a></li> |
51 | <li><a href="draw.html">Draw</a></li> |
|
52 | <li><a href="link.html">Link</a></li> |
52 | <li><a href="link.html">Link</a></li> |
|
53 | <li><a href="view.html">View</a></li> |
53 | <li><a href="view.html">View</a></li> |
|
54 | </ul> |
54 | </ul> |
|
Line -... | Line 55... | |||
- | 55 | |
||
55 | |
56 | <form data-toggle="validator" role="form" id="file-form-upload"> |
|
56 | <div id="main-panel" class="panel panel-default"> |
57 | <div id="main-panel" class="panel panel-default"> |
|
57 | <div class="panel-heading"> |
58 | <div class="panel-heading"> |
|
58 | <div id="actions" class="row"> |
59 | <div id="actions" class="row"> |
|
59 | <div class="col-lg-5"> |
60 | <div class="col-lg-5"> |
|
60 | <div class="btn-group btn-group-justified" role="group"> |
61 | <div class="btn-group btn-group-justified" role="group"> |
|
Line 88... | Line 89... | |||
88 | <div> |
89 | <div> |
|
89 | <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> |
90 | <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> |
|
90 | </div> |
91 | </div> |
|
91 | <div> |
92 | <div> |
|
92 | <p class="upload-filename" data-dz-name></p> |
93 | <p class="upload-filename" data-dz-name></p> |
|
- | 94 | <label for="file-upload-url">Download URL:</label> |
||
93 | <div class="input-group"> |
95 | <div class="input-group"> |
|
94 | <input id="file-upload-url" type="text" class="form-control upload-url" readonly> |
96 | <input id="file-upload-url" type="text" class="form-control upload-url" readonly> |
|
95 | <span class="input-group-btn"> |
97 | <span class="input-group-btn"> |
|
96 | <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button> |
98 | <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button> |
|
97 | </span> |
99 | </span> |
|
Line 100... | Line 102... | |||
100 | </span> |
102 | </span> |
|
101 | <span class="input-group-btn"> |
103 | <span class="input-group-btn"> |
|
102 | <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
104 | <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
|
103 | </span> |
105 | </span> |
|
104 | </div> |
106 | </div> |
|
- | 107 | <label for="file-upload-url">Delete URL:</label> |
||
105 | <div class="input-group"> |
108 | <div class="input-group"> |
|
106 | <input id="file-delete-url" type="text" class="form-control delete-url" readonly> |
109 | <input id="file-delete-url" type="text" class="form-control delete-url" readonly> |
|
107 | <span class="input-group-btn"> |
110 | <span class="input-group-btn"> |
|
108 | <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
111 | <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
|
109 | </span> |
112 | </span> |
|
110 | </div> |
113 | </div> |
|
- | 114 | <label for="file-tags">Tags:</label> |
||
111 | <div class="input-group"> |
115 | <div class="input-group"> |
|
112 | <select id="file-tags" multiple class="form-control bootstrap-tagsinput file-tags"></select> |
116 | <select id="file-tags" multiple class="form-control file-tags"></select> |
|
113 | </div> |
117 | </div> |
|
114 | <strong class="error text-danger" data-dz-errormessage></strong> |
118 | <strong class="error text-danger" data-dz-errormessage></strong> |
|
115 | </div> |
119 | </div> |
|
116 | <div> |
120 | <div> |
|
117 | <p class="size" data-dz-size></p> |
121 | <p class="size" data-dz-size></p> |
|
Line 132... | Line 136... | |||
132 | <i class="glyphicon glyphicon-remove"></i> |
136 | <i class="glyphicon glyphicon-remove"></i> |
|
133 | <span>Remove</span> |
137 | <span>Remove</span> |
|
134 | </button> |
138 | </button> |
|
135 | </div> |
139 | </div> |
|
136 | </div> |
140 | </div> |
|
137 | |
- | ||
138 | </div> |
141 | </div> |
|
139 | </div> |
142 | </div> |
|
140 | <!-- The global file processing state --> |
143 | <!-- The global file processing state --> |
|
141 | <div class="fileupload-process"> |
144 | <div class="fileupload-process"> |
|
142 | <div id="total-progress" class="progress active" role="progressbar"> |
145 | <div id="total-progress" class="progress active" role="progressbar"> |
|
143 | <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> |
146 | <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> |
|
144 | </div> |
147 | </div> |
|
145 | </div> |
148 | </div> |
|
146 | </div> |
149 | </form> |
|
Line 147... | Line 150... | |||
147 | |
150 | |
|
Line 148... | Line 151... | |||
148 | </div> <!-- /container --> |
151 | </div> <!-- /container --> |
|
149 | |
152 | |
|
Line 157... | Line 160... | |||
157 | <script src="bower_components/jquery/dist/jquery.min.js"></script> |
160 | <script src="bower_components/jquery/dist/jquery.min.js"></script> |
|
158 | <!-- Angular JS --> |
161 | <!-- Angular JS --> |
|
159 | <script src="bower_components/angular/angular.min.js"></script> |
162 | <script src="bower_components/angular/angular.min.js"></script> |
|
160 | <!-- BootStrap --> |
163 | <!-- BootStrap --> |
|
161 | <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
164 | <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
|
- | 165 | <!-- BootStrap Validator --> |
||
- | 166 | <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script> |
||
162 | <!-- DropZone --> |
167 | <!-- DropZone --> |
|
163 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
168 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
|
164 | <!-- Clipboard --> |
169 | <!-- Clipboard --> |
|
165 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
170 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
|
166 | <!-- TagsInput --> |
171 | <!-- TagsInput --> |
|
Line 211... | Line 216... | |||
211 | .tagsinput('items'); |
216 | .tagsinput('items'); |
|
Line 212... | Line 217... | |||
212 | |
217 | |
|
Line 213... | Line 218... | |||
213 | formData.append('tags', JSON.stringify(tags)); |
218 | formData.append('tags', JSON.stringify(tags)); |
|
214 | |
219 | |
|
215 | // And disable the tags bar. |
220 | // And disable the tags bar. |
|
216 | file |
221 | const tagsContainerID = file |
|
- | 222 | .previewElement |
||
- | 223 | .querySelector('.bootstrap-tagsinput') |
||
- | 224 | .getAttribute('id'); |
||
217 | .previewElement |
225 | |
|
Line 218... | Line 226... | |||
218 | .querySelector('#' + tagsBoxID) |
226 | $('#' + tagsContainerID).attr('readonly', 'readonly'); |
|
219 | .setAttribute('disabled', 'disabled'); |
227 | $('#' + tagsContainerID).attr('disabled', 'disabled'); |
|
220 | |
228 | |
|
221 | }).on('addedfile', (file) => { |
229 | }).on('addedfile', (file) => { |
|
Line 309... | Line 317... | |||
309 | file |
317 | file |
|
310 | .previewElement |
318 | .previewElement |
|
311 | .querySelector('#file-tags') |
319 | .querySelector('#file-tags') |
|
312 | .setAttribute('id', tagsBoxID); |
320 | .setAttribute('id', tagsBoxID); |
|
Line 313... | Line -... | |||
313 | |
- | ||
314 | // Refresh the tags input. |
321 | |
|
Line -... | Line 322... | |||
- | 322 | $('#' + tagsBoxID).tagsinput('refresh'); |
||
- | 323 | |
||
- | 324 | // Set the ID of the tags div. |
||
- | 325 | const tagsContainerID = '_' + Math |
||
- | 326 | .random() |
||
- | 327 | .toString(36) |
||
- | 328 | .substr(2, 9); |
||
- | 329 | |
||
- | 330 | // Add form control to tags list. |
||
- | 331 | file |
||
- | 332 | .previewElement |
||
- | 333 | .querySelector('.bootstrap-tagsinput') |
||
- | 334 | .classList |
||
- | 335 | .add('form-control'); |
||
- | 336 | |
||
- | 337 | file |
||
- | 338 | .previewElement |
||
- | 339 | .querySelector('.bootstrap-tagsinput') |
||
315 | $('#' + tagsBoxID).tagsinput('refresh'); |
340 | .setAttribute('id', tagsContainerID); |
|
316 | |
341 | |
|
317 | }).on('totaluploadprogress', (progress) => { |
342 | }).on('totaluploadprogress', (progress) => { |
|
318 | document |
343 | document |
|
319 | .querySelector('#total-progress .progress-bar') |
344 | .querySelector('#total-progress .progress-bar') |