scratch – Diff between revs 18 and 19

Subversion Repositories:

?pathlinks?

Rev 18 – Rev 20 – Go to most recent revision – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
 <html lang="en">
   <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 file upload">
     <meta name="author" content="Wizardry and Steamworks">
     <link rel="icon" href="favicon.ico">
     <title>Quickload</title>
     <!-- Bootstrap core CSS -->
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
     <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
     <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="js/bootstrap/html5shiv.min.js"></script>
       <script src="js/bootstrap/respond.min.js"></script>
     <![endif]-->
     <!-- DropZone -->
     <link href="css/dropzone/dropzone.min.css" rel="stylesheet">
     <!-- Local style -->
     <link href="css/style.css" rel="stylesheet">
   </head>
   <body>
     <div class="container">
       <!-- Main component for a primary marketing message or call to action -->
       <div class="jumbotron">
         <h1>Quickload</h1>
         <p>Asset sharing platform.</p>
       </div>
       <ul class="nav nav-tabs">
         <li class="active"><a href="#">Files</a></li>
       </ul>
       <div id="actions" class="row">
         <div class="col-lg-7">
           <!-- The fileinput-button span is used to style the file input field as button -->
           <span class="btn btn-success fileinput-button">
               <i class="glyphicon glyphicon-plus"></i>
               <span>Add files...</span>
           </span>
           <button type="submit" class="btn btn-primary start">
               <i class="glyphicon glyphicon-upload"></i>
               <span>Start upload</span>
           </button>
           <button type="reset" class="btn btn-warning cancel">
               <i class="glyphicon glyphicon-ban-circle"></i>
               <span>Cancel upload</span>
           </button>
         </div>
         <div class="col-lg-5">
           <!-- The global file processing state -->
           <span class="fileupload-process">
             <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
               <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
             </div>
           </span>
         </div>
       </div>
       <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 data-dz-thumbnail /></span>
           </div>
           <div>
               <p id="name" class="name" data-dz-name></p>
-              <input id="URL" type="text" class='form-control' readonly>
               <span class="input-group-button">
+                  <input id="URL" type="text" class='form-control' readonly>
                   <button id="clippy" class="btn clipBtn" class='form-control' type="button">
                       <img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard">
                   </button>
               </span>
               <strong class="error text-danger" data-dz-errormessage></strong>
           </div>
           <div>
               <p class="size" data-dz-size></p>
               <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
               </div>
           </div>
           <div>
             <button class="btn btn-primary start">
                 <i class="glyphicon glyphicon-upload"></i>
                 <span>Start</span>
             </button>
             <button data-dz-remove class="btn btn-warning cancel">
                 <i class="glyphicon glyphicon-ban-circle"></i>
                 <span>Cancel</span>
             </button>
             <button data-dz-remove class="btn btn-danger delete">
               <i class="glyphicon glyphicon-trash"></i>
               <span>Delete</span>
             </button>
           </div>
         </div>
       </div>
     </div> <!-- /container -->
     <div id="footer">
         <div class="container">
             <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
         </div>
     </div>
     <script src="js/jquery/jquery.min.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
     <!-- DropZone -->
     <script src="js/dropzone/dropzone.min.js"></script>
     <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> -->
     <!-- Clipboard -->
     <script src="js/clipboard/clipboard.min.js"></script>
     <script>
     $(document).ready(function(){
         // 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(document.body, { // Make the whole body a dropzone
             url: "upload.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: ".fileinput-button" // Element that should be used as click trigger to select files.
         });
         myDropzone.on("addedfile", (file) => {
             // Hookup the start button
             file.previewElement.querySelector(".start").onclick = () => {
                 myDropzone.enqueueFile(file);
             };
         });
         // Update the total progress bar
         myDropzone.on("totaluploadprogress", (progress) => {
             document
                 .querySelector("#total-progress .progress-bar")
                     .style
                     .width = progress + "%";
         });
         myDropzone.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");
         });
         // Hide the total progress bar when nothing's uploading anymore
         myDropzone.on("queuecomplete", (progress) => {
             document.querySelector("#total-progress")
                 .style
                 .opacity = "0";
         });
         // Display the URL of the file.
         myDropzone.on("success", (file, data) => {
             var boxURLID = '_' + Math.random().toString(36).substr(2, 9);
             file
                 .previewElement
                 .querySelector("#URL")
                 .value = data;
             file
                 .previewElement
                 .querySelector("#URL")
                 .setAttribute('id', boxURLID)
             // Clipboard button.
             clipButtonID = '_' + Math.random().toString(36).substr(2, 9);
             file
                 .previewElement
                 .querySelector("#clippy")
                 .setAttribute('data-clipboard-target', '#' + boxURLID)
             file
                 .previewElement
                 .querySelector("#clippy")
                 .setAttribute('id', clipButtonID);
             new Clipboard('#' + clipButtonID);
         });
         // Setup the buttons for all transfers
         // The "add files" button doesn't need to be setup because the config
         // `clickable` has already been specified.
         document.querySelector("#actions .start").onclick = function() {
             myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
         };
         document.querySelector("#actions .cancel").onclick = function() {
             myDropzone.removeAllFiles(true);
         };
     });
     </script>
   </body>
 </html>