scratch – Diff between revs 129 and 131

Subversion Repositories:

?pathlinks?

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

         <li><a href="draw.html">Draw</a></li>
         <li><a href="link.html">Link</a></li>
         <li><a href="view.html">View</a></li>
       </ul>
+      <form data-toggle="validator" role="form" id="file-form-upload">
-      <div id="main-panel" class="panel panel-default">
+          <div id="main-panel" class="panel panel-default">
           <div class="panel-heading">
               <div id="actions" class="row">
                 <div class="col-lg-5">
                     <div class="btn-group btn-group-justified" role="group">
                   <div>
                       <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
                   </div>
                   <div>
                       <p class="upload-filename" data-dz-name></p>
+                      <label for="file-upload-url">Download URL:</label>
                       <div class="input-group">
                           <input id="file-upload-url" type="text" class="form-control upload-url" readonly>
                           <span class="input-group-btn">
                               <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
                           </span>
                           </span>
                           <span class="input-group-btn">
                               <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                           </span>
                       </div>
+                      <label for="file-upload-url">Delete URL:</label>
                       <div class="input-group">
                           <input id="file-delete-url" type="text" class="form-control delete-url" readonly>
                           <span class="input-group-btn">
                               <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 bootstrap-tagsinput file-tags"></select>
+                          <select id="file-tags" multiple class="form-control file-tags"></select>
                       </div>
                       <strong class="error text-danger" data-dz-errormessage></strong>
                   </div>
                   <div>
                       <p class="size" data-dz-size></p>
                       <i class="glyphicon glyphicon-remove"></i>
                       <span>Remove</span>
                     </button>
                   </div>
                 </div>
               </div>
             </div>
             <!-- The global file processing state -->
             <div class="fileupload-process">
                 <div id="total-progress" class="progress active" role="progressbar">
                   <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
                 </div>
             </div>
-      </div>
+      </form>
     </div> <!-- /container -->
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
     <!-- Angular JS -->
     <script src="bower_components/angular/angular.min.js"></script>
     <!-- BootStrap -->
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <!-- BootStrap Validator -->
+    <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
     <!-- DropZone -->
     <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
     <!-- Clipboard -->
     <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
     <!-- TagsInput -->
                     .tagsinput('items');
                 formData.append('tags', JSON.stringify(tags));
                 // And disable the tags bar.
-                file
+                const tagsContainerID = file
+                    .previewElement
+                    .querySelector('.bootstrap-tagsinput')
+                    .getAttribute('id');
-                    .previewElement
-                    .querySelector('#' + tagsBoxID)
+                $('#' + tagsContainerID).attr('readonly', 'readonly');
-                    .setAttribute('disabled', 'disabled');
+                $('#' + tagsContainerID).attr('disabled', 'disabled');
             }).on('addedfile', (file) => {
                 file
                     .previewElement
                     .querySelector('#file-tags')
                     .setAttribute('id', tagsBoxID);
                 // Refresh the tags input.
+                $('#' + 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')
-                $('#' + tagsBoxID).tagsinput('refresh');
+                    .setAttribute('id', tagsContainerID);
             }).on('totaluploadprogress', (progress) => {
                 document
                     .querySelector('#total-progress .progress-bar')