scratch – Blame information for rev 58

Subversion Repositories:
Rev:
Rev Author Line No. Line
24 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 asset upload">
9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
58 office 12 <title>Scratch</title>
24 office 13  
14 <!-- Bootstrap core CSS -->
58 office 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
24 office 16  
17 <!-- DropZone -->
58 office 18 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
24 office 19 <!-- Local style -->
20 <link href="css/files/style.css" rel="stylesheet">
21 </head>
22  
23 <body>
24  
25 <div class="container">
26  
27 <!-- Main component for a primary marketing message or call to action -->
28 <div class="jumbotron">
57 office 29 <h1>Scratch</h1>
24 office 30 <p>Asset sharing platform.</p>
31 </div>
32  
33 <ul class="nav nav-tabs">
34 <li><a href="index.html">Home</a></li>
56 office 35 <li class="active"><a href="#">File</a></li>
24 office 36 <li><a href="text.html">Text</a></li>
37 </ul>
38  
39 <div class="panel panel-default">
40 <div class="panel-heading">
41 <div id="actions" class="row">
42 <div class="col-lg-5">
43 <div class="btn-group btn-group-justified" role="group">
44 <!-- The fileinput-button span is used to style the file input field as button -->
45 <div class="btn-group" role="group">
46 <button id="uploadbutton" type="button" class="btn btn-default">
47 <i class="glyphicon glyphicon-plus"></i>
48 <span>Add...</span>
49 </button>
50 </div>
51 <div class="btn-group" role="group">
52 <button type="submit" class="btn btn-default start">
53 <i class="glyphicon glyphicon-upload"></i>
57 office 54 <span>Upload All</span>
24 office 55 </button>
56 </div>
57 <div class="btn-group" role="group">
58 <button type="reset" class="btn btn-default cancel">
59 <i class="glyphicon glyphicon-ban-circle"></i>
57 office 60 <span>Cancel All</span>
24 office 61 </button>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67 <div class="panel-body" id="uploadpanel">
68 <div class="table table-striped files" id="previews">
69 <div id="template" class="file-row">
70 <!-- This is used as the file preview template -->
71 <div>
72 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
73 </div>
74 <div>
75 <p id="name" class="name" data-dz-name></p>
76 <div class="input-group">
77 <input id="URL" type="text" class="form-control" readonly>
78 <span class="input-group-btn">
39 office 79 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
24 office 80 </span>
81 </div>
82 <strong class="error text-danger" data-dz-errormessage></strong>
83 </div>
84 <div>
85 <p class="size" data-dz-size></p>
86 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
87 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
88 </div>
89 </div>
90 <div>
91 <button id="start" class="btn btn-default start">
92 <i class="glyphicon glyphicon-upload"></i>
93 <span>Upload</span>
94 </button>
95 <button id="cancel" data-dz-remove class="btn btn-default cancel">
96 <i class="glyphicon glyphicon-ban-circle"></i>
97 <span>Cancel</span>
98 </button>
99 <button id="remove" data-dz-remove class="btn btn-danger remove">
100 <i class="glyphicon glyphicon-remove"></i>
101 <span>Remove</span>
102 </button>
103 </div>
104 </div>
105  
106 </div>
107 </div>
108 <!-- The global file processing state -->
109 <div class="fileupload-process">
110 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
111 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
112 </div>
113 </div>
114 </div>
115  
116 </div> <!-- /container -->
117  
118 <div id="footer">
119 <div class="container">
120 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
121 </div>
122 </div>
123  
58 office 124 <!-- jQuery -->
125 <script src="bower_components/jquery/dist/jquery.min.js"></script>
126 <!-- BootStrap -->
127 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
24 office 128  
129 <!-- DropZone -->
58 office 130 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
24 office 131 <!-- Clipboard -->
58 office 132 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
24 office 133 <script>
26 office 134 $(document).ready(() => {
24 office 135 // Get the template HTML and remove it from the doument
136 var previewNode = document
137 .querySelector("#template");
138 previewNode.id = "";
139 var previewTemplate = previewNode
140 .parentNode
141 .innerHTML;
142 previewNode
143 .parentNode
144 .removeChild(previewNode);
145  
146 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
49 office 147 url: "file.php", // Set the url
24 office 148 paramName: "file",
149 thumbnailWidth: 80,
150 thumbnailHeight: 80,
151 //parallelUploads: 20,
152 previewTemplate: previewTemplate,
153 autoQueue: false, // Make sure the files aren't queued until manually added
154 previewsContainer: "#previews", // Container to display the previews
155 clickable: [
156 "#uploadbutton",
157 "#uploadpanel"
158 ],
159 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
160 }).on("addedfile", (file) => {
161 // Hookup the start button
162 file.previewElement.querySelector(".start").onclick = () => {
163 myDropzone.enqueueFile(file);
164 };
165 }).on("totaluploadprogress", (progress) => {
166 document
167 .querySelector("#total-progress .progress-bar")
168 .style
169 .width = progress + "%";
170 }).on("sending", (file) => {
171 // Show the total progress bar when upload starts
172 document.querySelector("#total-progress")
173 .style
174 .opacity = 1;
175  
176 // And disable the start button.
177 file
178 .previewElement
179 .querySelector(".start")
180 .setAttribute("disabled", "disabled");
181 }).on("queuecomplete", (progress) => {
182 document.querySelector("#total-progress")
183 .style
184 .opacity = "0";
185 }).on("success", (file, data) => {
186  
187 var boxURLID = '_' + Math
188 .random()
189 .toString(36)
190 .substr(2, 9);
191 file
192 .previewElement
193 .querySelector("#URL")
194 .value = data;
195  
196 file
197 .previewElement
198 .querySelector("#URL")
199 .setAttribute('id', boxURLID)
200  
201 // Clipboard button.
202 clipButtonID = '_' + Math
203 .random()
204 .toString(36)
205 .substr(2, 9);
206 file
207 .previewElement
208 .querySelector("#btn-clipboard")
209 .setAttribute('data-clipboard-target', '#' + boxURLID)
210  
211 file
212 .previewElement
213 .querySelector("#btn-clipboard")
214 .setAttribute('id', clipButtonID);
215  
216 file
217 .previewElement
218 .querySelector(".start")
219 .setAttribute("disabled", "disabled");
220 file
221 .previewElement
222 .querySelector(".cancel")
223 .setAttribute("disabled", "disabled");
224  
225 new Clipboard('#' + clipButtonID);
226 });
227  
228 document.querySelector("#actions .start").onclick = () => {
229 myDropzone.enqueueFiles(
230 myDropzone
231 .getFilesWithStatus(Dropzone.ADDED));
232 };
233  
234 document.querySelector("#actions .cancel").onclick = () => {
235 myDropzone.removeAllFiles(true);
236 };
237 });
238 </script>
239 </body>
240 </html>