scratch – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
5 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="quick file upload">
9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
12 <title>Quickload</title>
13  
14 <!-- Bootstrap core CSS -->
15 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
16  
17 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
18 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
19  
20 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
21 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
22 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
23  
24 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
25 <!--[if lt IE 9]>
26 <script src="js/bootstrap/html5shiv.min.js"></script>
27 <script src="js/bootstrap/respond.min.js"></script>
28 <![endif]-->
29  
30 <!-- DropZone -->
31 <link href="css/dropzone/dropzone.min.css" rel="stylesheet">
32 <!-- Local style -->
33 <link href="css/style.css" rel="stylesheet">
34 </head>
35  
36 <body>
37  
38 <div class="container">
39  
40 <!-- Main component for a primary marketing message or call to action -->
41 <div class="jumbotron">
42 <h1>Quickload</h1>
18 office 43 <p>Asset sharing platform.</p>
5 office 44 </div>
45  
46 <ul class="nav nav-tabs">
47 <li class="active"><a href="#">Files</a></li>
48 </ul>
49  
20 office 50 <div class="panel panel-default">
51 <div class="panel-heading">
52 <h3 class="panel-title">File Upload</h3>
53 </div>
54 <div class="panel-body" style="min-height: 480px; border: 2px dashed #0087F7; border-radius: 5px; background: white; box-sizing: border-box; padding: 54px 54px; outline-offset: -24px;">
55 <div id="actions" class="row fallback">
56 <div class="col-lg-5">
57 <div class="btn-group btn-group-justified" role="group">
58 <!-- The fileinput-button span is used to style the file input field as button -->
59 <div class="btn-group" role="group">
60 <button type="button" class="btn btn-default fileinput-button">
61 <i class="glyphicon glyphicon-plus"></i>
62 <span>Add...</span>
63 </button>
64 </div>
65 <div class="btn-group" role="group">
66 <button type="submit" class="btn btn-default start">
67 <i class="glyphicon glyphicon-upload"></i>
68 <span>Upload</span>
69 </button>
70 </div>
71 <div class="btn-group" role="group">
72 <button type="reset" class="btn btn-default cancel">
73 <i class="glyphicon glyphicon-ban-circle"></i>
74 <span>Cancel</span>
75 </button>
76 </div>
77 </div>
78 </div>
79 </div>
80 <div class="table table-striped files" id="previews">
81 <div id="template" class="file-row">
82 <!-- This is used as the file preview template -->
83 <div>
84 <span class="preview"><img src="img/fileholder.svg" alt="Upload file thumbnail" data-dz-thumbnail></span>
85 </div>
86 <div>
87 <p id="name" class="name" data-dz-name></p>
88 <div class="input-group">
89 <input id="URL" type="text" class="form-control" readonly>
90 <span class="input-group-btn">
91 <button id="btn-clipboard" class="btn btn-default" type="button"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard"></button>
92 </span>
93 </div>
94 <strong class="error text-danger" data-dz-errormessage></strong>
95 </div>
96 <div>
97 <p class="size" data-dz-size></p>
98 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
99 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
100 </div>
101 </div>
102 <div>
103 <button id="start" class="btn btn-default start">
104 <i class="glyphicon glyphicon-upload"></i>
105 <span>Upload</span>
106 </button>
107 <button id="cancel" data-dz-remove class="btn btn-default cancel">
108 <i class="glyphicon glyphicon-ban-circle"></i>
109 <span>Cancel</span>
110 </button>
111 <button id="delete" data-dz-remove class="btn btn-danger delete">
112 <i class="glyphicon glyphicon-trash"></i>
113 <span>Delete</span>
114 </button>
115 </div>
116 </div>
5 office 117  
20 office 118 </div>
119 </div>
120 <!-- The global file processing state -->
121 <div class="fileupload-process">
5 office 122 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
123 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
124 </div>
20 office 125 </div>
5 office 126 </div>
127  
128 </div> <!-- /container -->
129  
10 office 130 <div id="footer">
131 <div class="container">
132 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
133 </div>
134 </div>
5 office 135  
136 <script src="js/jquery/jquery.min.js"></script>
137 <script src="js/bootstrap/bootstrap.min.js"></script>
138 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
139 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
140  
141 <!-- DropZone -->
142 <script src="js/dropzone/dropzone.min.js"></script>
143 <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> -->
144 <!-- Clipboard -->
145 <script src="js/clipboard/clipboard.min.js"></script>
146 <script>
147 $(document).ready(function(){
148 // Get the template HTML and remove it from the doument
149 var previewNode = document
150 .querySelector("#template");
151 previewNode.id = "";
152 var previewTemplate = previewNode
153 .parentNode
154 .innerHTML;
155 previewNode
156 .parentNode
157 .removeChild(previewNode);
158  
20 office 159 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
5 office 160 url: "upload.php", // Set the url
161 paramName: "file",
162 thumbnailWidth: 80,
163 thumbnailHeight: 80,
20 office 164 //parallelUploads: 20,
5 office 165 previewTemplate: previewTemplate,
166 autoQueue: false, // Make sure the files aren't queued until manually added
167 previewsContainer: "#previews", // Container to display the previews
20 office 168 clickable: true,
169 //clickable: ".fileinput-button" // Element that should be used as click trigger to select files.
170 }).on("addedfile", (file) => {
5 office 171 // Hookup the start button
172 file.previewElement.querySelector(".start").onclick = () => {
173 myDropzone.enqueueFile(file);
174 };
20 office 175 }).on("totaluploadprogress", (progress) => {
5 office 176 document
177 .querySelector("#total-progress .progress-bar")
178 .style
179 .width = progress + "%";
20 office 180 }).on("sending", (file) => {
5 office 181 // Show the total progress bar when upload starts
182 document.querySelector("#total-progress")
183 .style
184 .opacity = 1;
185  
186 // And disable the start button.
187 file
188 .previewElement
189 .querySelector(".start")
190 .setAttribute("disabled", "disabled");
20 office 191 }).on("queuecomplete", (progress) => {
5 office 192 document.querySelector("#total-progress")
193 .style
194 .opacity = "0";
20 office 195 }).on("success", (file, data) => {
5 office 196  
20 office 197 var boxURLID = '_' + Math
198 .random()
199 .toString(36)
200 .substr(2, 9);
5 office 201 file
202 .previewElement
203 .querySelector("#URL")
204 .value = data;
205  
206 file
207 .previewElement
208 .querySelector("#URL")
209 .setAttribute('id', boxURLID)
210  
211 // Clipboard button.
20 office 212 clipButtonID = '_' + Math
213 .random()
214 .toString(36)
215 .substr(2, 9);
5 office 216 file
217 .previewElement
20 office 218 .querySelector("#btn-clipboard")
5 office 219 .setAttribute('data-clipboard-target', '#' + boxURLID)
220  
221 file
222 .previewElement
20 office 223 .querySelector("#btn-clipboard")
5 office 224 .setAttribute('id', clipButtonID);
20 office 225  
226 file
227 .previewElement
228 .querySelector(".start")
229 .setAttribute("disabled", "disabled");
230 file
231 .previewElement
232 .querySelector(".cancel")
233 .setAttribute("disabled", "disabled");
5 office 234  
235 new Clipboard('#' + clipButtonID);
236 });
20 office 237  
238 if($('.panel-body').hasClass('fallback')) {
239 document.querySelector("#actions .start").onclick = function() {
240 myDropzone.enqueueFiles(
241 myDropzone
242 .getFilesWithStatus(Dropzone.ADDED));
243 };
244 document.querySelector("#actions .cancel").onclick = function() {
245 myDropzone.removeAllFiles(true);
246 };
247 }
5 office 248 });
249 </script>
250 </body>
251 </html>