scratch – Diff between revs 132 and 133

Subversion Repositories:

?pathlinks?

Rev 132 – Rev 135 – Go to most recent revision – Details – Blame – Last modification – View Log

     <!-- Font Awesome -->
     <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
     <!-- DropZone -->
     <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
     <!-- TagsInput -->
-    <link href="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet">
+    <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">
     <!-- Site-wide style CCS -->
     <link href="css/style.css" rel="stylesheet">
                           <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                       </span>
                   </div>
                   <label for="file-tags">Tags:</label>
                   <div class="input-group">
-                      <select id="file-tags" multiple class="form-control file-tags"></select>
+                      <!-- <select id="file-tags" multiple class="form-control file-tags"></select> -->
+                      <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
                   </div>
                   <strong class="error text-danger" data-dz-errormessage></strong>
               </div>
               <div>
                   <p class="size" data-dz-size></p>
     <!-- DropZone -->
     <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
     <!-- Clipboard -->
     <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
     <!-- TagsInput -->
-    <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
+    <!-- <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> -->
+    <!-- BootStrap TokenField -->
+    <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script>
     <!-- Angular Initialization. -->
     <script>
     var app = angular.module('scratch', []);
     </script>
     <script>
                 // Append tags to the form data.
                 const tagsBoxID = file
                     .previewElement
                     .querySelector('.file-tags')
                     .getAttribute('id');
                 const tags = $('#' + tagsBoxID)
-                    .tagsinput('items');
+                    .tokenfield('getTokens')
+                    .map((token) => {
+                        return token.value;
+                    });
                 formData.append('tags', JSON.stringify(tags));
-                // And disable the tags bar.
-                const tagsContainerID = file
-                    .previewElement
-                    .querySelector('.bootstrap-tagsinput')
-                    .getAttribute('id');
+                // And disable the tags bar.
-                $('#' + tagsBoxID).attr('readonly', 'readonly');
-                $('#' + tagsBoxID).attr('disabled', 'disabled');
-                $('#' + tagsContainerID).attr('readonly', 'readonly');
+                $('#' + tagsBoxID).tokenfield('readonly');
-                $('#' + tagsContainerID).attr('disabled', 'disabled');
+                $('#' + tagsBoxID).tokenfield('disable');
             }).on('addedfile', (file) => {
                 file
                     .previewElement
                     .querySelector('#file-tags')
                     .setAttribute('id', tagsBoxID);
-                $('#' + tagsBoxID).tagsinput('refresh');
-                // Set the ID of the tags div.
-                const tagsContainerID = '_' + Math
-                    .random()
-                    .toString(36)
-                    .substr(2, 9);
-                // Add form control to tags list.
-                file
-                    .previewElement
-                    .querySelector('.bootstrap-tagsinput')
-                    .classList
-                    .add('form-control');
-                file
-                    .previewElement
-                    .querySelector('.bootstrap-tagsinput')
-                    .setAttribute('id', tagsContainerID);
+                $('#' + tagsBoxID).tokenfield();
             }).on('totaluploadprogress', (progress) => {
                 document