scratch – Diff between revs 132 and 133
?pathlinks?
Rev 132 | Rev 133 | |||
---|---|---|---|---|
Line 16... | Line 16... | |||
16 | <!-- Font Awesome --> |
16 | <!-- Font Awesome --> |
|
17 | <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
17 | <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
|
18 | <!-- DropZone --> |
18 | <!-- DropZone --> |
|
19 | <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> |
19 | <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> |
|
20 | <!-- TagsInput --> |
20 | <!-- TagsInput --> |
|
21 | <link href="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"> |
21 | <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet"> |
|
Line 22... | Line 22... | |||
22 | |
22 | |
|
23 | <!-- Site-wide style CCS --> |
23 | <!-- Site-wide style CCS --> |
|
Line 24... | Line 24... | |||
24 | <link href="css/style.css" rel="stylesheet"> |
24 | <link href="css/style.css" rel="stylesheet"> |
|
Line 110... | Line 110... | |||
110 | <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
110 | <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
|
111 | </span> |
111 | </span> |
|
112 | </div> |
112 | </div> |
|
113 | <label for="file-tags">Tags:</label> |
113 | <label for="file-tags">Tags:</label> |
|
114 | <div class="input-group"> |
114 | <div class="input-group"> |
|
115 | <select id="file-tags" multiple class="form-control file-tags"></select> |
115 | <!-- <select id="file-tags" multiple class="form-control file-tags"></select> --> |
|
- | 116 | <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/> |
||
116 | </div> |
117 | </div> |
|
117 | <strong class="error text-danger" data-dz-errormessage></strong> |
118 | <strong class="error text-danger" data-dz-errormessage></strong> |
|
118 | </div> |
119 | </div> |
|
119 | <div> |
120 | <div> |
|
120 | <p class="size" data-dz-size></p> |
121 | <p class="size" data-dz-size></p> |
|
Line 163... | Line 164... | |||
163 | <!-- DropZone --> |
164 | <!-- DropZone --> |
|
164 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
165 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
|
165 | <!-- Clipboard --> |
166 | <!-- Clipboard --> |
|
166 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
167 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
|
167 | <!-- TagsInput --> |
168 | <!-- TagsInput --> |
|
168 | <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> |
169 | <!-- <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> --> |
|
- | 170 | <!-- BootStrap TokenField --> |
||
- | 171 | <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script> |
||
169 | <!-- Angular Initialization. --> |
172 | <!-- Angular Initialization. --> |
|
170 | <script> |
173 | <script> |
|
171 | var app = angular.module('scratch', []); |
174 | var app = angular.module('scratch', []); |
|
172 | </script> |
175 | </script> |
|
173 | <script> |
176 | <script> |
|
Line 205... | Line 208... | |||
205 | // Append tags to the form data. |
208 | // Append tags to the form data. |
|
206 | const tagsBoxID = file |
209 | const tagsBoxID = file |
|
207 | .previewElement |
210 | .previewElement |
|
208 | .querySelector('.file-tags') |
211 | .querySelector('.file-tags') |
|
209 | .getAttribute('id'); |
212 | .getAttribute('id'); |
|
210 | |
213 | |
|
211 | const tags = $('#' + tagsBoxID) |
214 | const tags = $('#' + tagsBoxID) |
|
212 | .tagsinput('items'); |
215 | .tokenfield('getTokens') |
|
- | 216 | .map((token) => { |
||
- | 217 | return token.value; |
||
- | 218 | }); |
||
Line 213... | Line 219... | |||
213 | |
219 | |
|
Line 214... | Line 220... | |||
214 | formData.append('tags', JSON.stringify(tags)); |
220 | formData.append('tags', JSON.stringify(tags)); |
|
215 | |
- | ||
216 | // And disable the tags bar. |
- | ||
217 | const tagsContainerID = file |
- | ||
218 | .previewElement |
- | ||
219 | .querySelector('.bootstrap-tagsinput') |
- | ||
220 | .getAttribute('id'); |
221 | |
|
221 | |
222 | // And disable the tags bar. |
|
222 | $('#' + tagsBoxID).attr('readonly', 'readonly'); |
- | ||
223 | $('#' + tagsBoxID).attr('disabled', 'disabled'); |
- | ||
Line 224... | Line 223... | |||
224 | $('#' + tagsContainerID).attr('readonly', 'readonly'); |
223 | $('#' + tagsBoxID).tokenfield('readonly'); |
|
225 | $('#' + tagsContainerID).attr('disabled', 'disabled'); |
224 | $('#' + tagsBoxID).tokenfield('disable'); |
|
226 | |
225 | |
|
227 | }).on('addedfile', (file) => { |
226 | }).on('addedfile', (file) => { |
|
Line 314... | Line 313... | |||
314 | |
313 | |
|
315 | file |
314 | file |
|
316 | .previewElement |
315 | .previewElement |
|
317 | .querySelector('#file-tags') |
316 | .querySelector('#file-tags') |
|
318 | .setAttribute('id', tagsBoxID); |
317 | .setAttribute('id', tagsBoxID); |
|
319 | |
318 | |
|
320 | $('#' + tagsBoxID).tagsinput('refresh'); |
- | ||
321 | |
- | ||
322 | // Set the ID of the tags div. |
- | ||
323 | const tagsContainerID = '_' + Math |
- | ||
324 | .random() |
- | ||
325 | .toString(36) |
- | ||
326 | .substr(2, 9); |
- | ||
327 | |
- | ||
328 | // Add form control to tags list. |
- | ||
329 | file |
- | ||
330 | .previewElement |
- | ||
331 | .querySelector('.bootstrap-tagsinput') |
- | ||
332 | .classList |
- | ||
333 | .add('form-control'); |
- | ||
334 | |
- | ||
335 | file |
- | ||
336 | .previewElement |
- | ||
337 | .querySelector('.bootstrap-tagsinput') |
- | ||
Line 338... | Line 319... | |||
338 | .setAttribute('id', tagsContainerID); |
319 | $('#' + tagsBoxID).tokenfield(); |
|
339 | |
320 | |
|
340 | }).on('totaluploadprogress', (progress) => { |
321 | }).on('totaluploadprogress', (progress) => { |
|
341 | document |
322 | document |