scratch – Diff between revs 121 and 125

Subversion Repositories:

?pathlinks?

Rev 121 – Rev 126 – Go to most recent revision – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="scratch">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <meta name="description" content="quick asset upload">
     <meta name="author" content="Wizardry and Steamworks">
     <link rel="icon" href="favicon.ico">
     <title>scratch</title>
     <!-- Bootstrap core CSS -->
     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- 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">
     <!-- Site-wide style CCS -->
     <link href="css/style.css" rel="stylesheet">
     <!-- Local style -->
     <link href="css/files/style.css" rel="stylesheet">
+    <!-- Scratch Angular Includes -->
+    <ng-include src="'html/scratch-head-last.html'"></ng-include>
   </head>
   <body>
+  <!-- Scratch Angular Includes -->
+  <ng-include src="'html/scratch-body-first.html'"></ng-include>
   <!-- Main component for a primary marketing message or call to action -->
   <div class="paralax-background"></div>
   <div class="jumbotron">
     <h1>scratch copy</h1>
     <p class="quote">the asset sharer</p>
   </div>
     <div class="container">
       <ul class="nav nav-tabs">
         <li><a href="index.html">Home</a></li>
         <li class="active"><a href="#">File</a></li>
         <li><a href="text.html">Text</a></li>
         <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>
       <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">
                       <!-- The fileinput-button span is used to style the file input field as button -->
                       <div class="btn-group" role="group">
                           <button id="uploadbutton" type="button" class="btn btn-default">
                               <i class="glyphicon glyphicon-plus"></i>
                               <span>Add...</span>
                           </button>
                       </div>
                       <div class="btn-group" role="group">
                           <button type="submit" class="btn btn-default start">
                               <i class="glyphicon glyphicon-upload"></i>
                               <span>Upload All</span>
                           </button>
                       </div>
                       <div class="btn-group" role="group">
                           <button type="reset" class="btn btn-danger cancel">
                               <i class="glyphicon glyphicon-ban-circle"></i>
                               <span>Cancel All</span>
                           </button>
                       </div>
                     </div>
                 </div>
               </div>
           </div>
           <div class="panel-body" id="uploadpanel">
               <div class="table table-striped files" id="previews">
                 <div id="template" class="file-row">
                   <!-- This is used as the file preview template -->
                   <div>
                       <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
                   </div>
                   <div>
                       <p id="name" class="name" data-dz-name></p>
                       <div class="input-group">
                           <input id="URL" type="text" class="form-control" readonly>
                           <span class="input-group-btn">
                               <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
                           </span>
                           <span class="input-group-btn">
                               <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
                           </span>
                           <span class="input-group-btn">
                               <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                           </span>
                       </div>
                       <div class="input-group">
                           <input id="deleteURL" type="text" class="form-control" readonly>
                           <span class="input-group-btn">
                               <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
                           </span>
                       </div>
+                      <div class="input-group">
+                          <select id="tags" multiple class="form-control bootstrap-tagsinput"></select>
+                      </div>
                       <strong class="error text-danger" data-dz-errormessage></strong>
                   </div>
                   <div>
                       <p class="size" data-dz-size></p>
                       <div id="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>
                     <button id="start" class="btn btn-default start">
                         <i class="glyphicon glyphicon-upload"></i>
                         <span>Upload</span>
                     </button>
                     <button id="cancel" data-dz-remove class="btn btn-warning cancel">
                         <i class="glyphicon glyphicon-ban-circle"></i>
                         <span>Cancel</span>
                     </button>
                     <button id="remove" data-dz-remove class="btn btn-danger remove">
                       <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>
     </div> <!-- /container -->
     <div id="footer">
         <div class="container">
             <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
         </div>
     </div>
     <!-- jQuery -->
     <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>
     <!-- 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>
+    <!-- Angular Initialization. -->
+    <script>
+    var app = angular.module('scratch', []);
+    </script>
     <script>
     $(document).ready(() => {
         $.get('session.php').then((token) => {
             // Get the template HTML and remove it from the doument
             var previewNode = document
                 .querySelector("#template");
             previewNode.id = "";
             var previewTemplate = previewNode
                 .parentNode
                 .innerHTML;
             previewNode
                 .parentNode
                 .removeChild(previewNode);
             var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
                 url: 'file.php', // Set the url
                 paramName: 'file',
                 thumbnailWidth: 80,
                 thumbnailHeight: 80,
                 //parallelUploads: 20,
                 previewTemplate: previewTemplate,
                 autoQueue: false, // Make sure the files aren't queued until manually added
                 previewsContainer: '#previews', // Container to display the previews
                 clickable: [
                     '#uploadbutton',
                     '#uploadpanel'
                 ],
                 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
             }).on('sending', (file, xhr, formData) => {
                 // Append session token.
                 formData.append('token', token);
             }).on('addedfile', (file) => {
                 // Hookup the start button
                 file.previewElement.querySelector(".start").onclick = () => {
                     myDropzone.enqueueFile(file);
                 };
+                // Set the ID of the tags input.
+                const tagsBoxID = '_' + Math
+                    .random()
+                    .toString(36)
+                    .substr(2, 9);
+                file
+                    .previewElement
+                    .querySelector("#tags")
+                    .setAttribute('id', tagsBoxID);
+                $('#' + tagsBoxID).tagsinput('refresh');
+                //$('input').tagsInput('refresh');
             }).on('totaluploadprogress', (progress) => {
                 document
                     .querySelector('#total-progress .progress-bar')
                         .style
                         .width = progress + "%";
             }).on('sending', (file) => {
                 // Show the total progress bar when upload starts
                 document.querySelector("#total-progress")
                     .style
                     .opacity = 1;
                 // And disable the start button.
                 file
                     .previewElement
                     .querySelector(".start")
                     .setAttribute("disabled", "disabled");
             }).on('queuecomplete', (progress) => {
                 document.querySelector("#total-progress")
                     .style
                     .opacity = "0";
             }).on('success', (file, data) => {
                 // Serialize JSON to object.
                 data = JSON.parse(data);
                 // Set the ID of the URL box.
                 const boxURLID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#URL")
                     .value = location.protocol
                         .concat("//")
                         .concat(window.location.hostname)
                         .concat("/")
                         .concat(data.hash);
                 file
                     .previewElement
                     .querySelector("#URL")
                     .setAttribute('id', boxURLID)
                 // Set the ID of the delete URL box.
                 const deleteBoxURLID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#deleteURL")
                     .value = location.protocol.concat("//")
                         .concat(window.location.hostname)
                         .concat("/")
                         .concat(data.timestamp)
                         .concat("/")
                         .concat(data.hash);
                 file
                     .previewElement
                     .querySelector("#deleteURL")
                     .setAttribute('id', deleteBoxURLID)
                 // Set the ID of the URL clipboard button.
                 const clipButtonID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#btn-clipboard")
                     .setAttribute('data-clipboard-target', '#' + boxURLID)
                 file
                     .previewElement
                     .querySelector("#btn-clipboard")
                     .setAttribute('id', clipButtonID);
                 new Clipboard('#' + clipButtonID);
                 // Set the ID of the delete URL clipboard button.
                 const clipButtonDeleteID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#btn-clipboard-delete")
                     .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
                 file
                     .previewElement
                     .querySelector("#btn-clipboard-delete")
                     .setAttribute('id', clipButtonDeleteID);
                 new Clipboard('#' + clipButtonDeleteID);
                 // Set the ID of the mailto button.
                 const mailToButtonID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#btn-mailto")
                     .setAttribute('id', mailToButtonID);
                 file
                     .previewElement
                     .querySelector(".start")
                     .setAttribute("disabled", "disabled");
                 file
                     .previewElement
                     .querySelector(".cancel")
                     .setAttribute("disabled", "disabled");
                 $('#' + mailToButtonID).on('click', () => {
                     window.location.href = "mailto:?subject="+
                         encodeURIComponent("Can't scratch this!") + "&body=" +
                     encodeURIComponent($('#' + boxURLID).val());
                 });
                 // Set the ID of the facebook button.
                 const faceBookButtonID = '_' + Math
                     .random()
                     .toString(36)
                     .substr(2, 9);
                 file
                     .previewElement
                     .querySelector("#btn-facebook")
                     .setAttribute('id', faceBookButtonID);
                 switch(data.opengraph) {
                     case true:
                         // Enable the facebook button.
                         file
                             .previewElement
                             .querySelector('#' + faceBookButtonID)
                             .removeAttribute("disabled");
                         // Change the URL when the user clicks the button.
                         $('#' + faceBookButtonID).on('click', () => {
                             $('#' + boxURLID)
                                 .val(
                                     location.protocol.concat("//")
                                     .concat(window.location.hostname)
                                     .concat("/")
                                     .concat("og")
                                     .concat("/")
                                     .concat(data.hash)
                             );
                         });
                         break;
                     default:
                         // Disable the facebook button.
                         file
                             .previewElement
                             .querySelector('#' + faceBookButtonID)
                             .setAttribute("disabled", "disabled");
                         break;
+                }
             });
             document.querySelector("#actions .start").onclick = () => {
                 myDropzone.enqueueFiles(
                     myDropzone
                         .getFilesWithStatus(Dropzone.ADDED));
             };
             document.querySelector("#actions .cancel").onclick = () => {
                 myDropzone.removeAllFiles(true);
             };
         });
         // Scroll to the panel.
         $('html, body').animate({
             scrollTop: $('#main-panel').offset().top
         }, 'slow');
     });
     </script>
     <!-- Jumbotron parallax effect -->
     <script>
     const jumboHeight = $('.jumbotron').outerHeight();
     function parallax(){
         var scrolled = $(window).scrollTop();
         $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
+    }
     $(window).scroll(function(e){
         parallax();
     });
     </script>
   </body>
 </html>