Changeset 29394 for trunk/admin/themes/default/template/photos_add_direct.tpl

Timestamp:

Sep 3, 2014, 9:56:59 PM (10 years ago)

Author:

mistic100

Message:

feature:2616 add custom big progressbar

File:

• trunk/admin/themes/default/template/photos_add_direct.tpl (modified) (5 diffs)

trunk/admin/themes/default/template/photos_add_direct.tpl

@@ -97 +97 @@
             up.start();
           });
+        
+        jQuery('#cancelUpload').on('click', function(e) {
+            e.preventDefault();
+            up.stop();
+            up.trigger('UploadComplete', up.files);
+          });
       }
     },
@@ -106 +112 @@
       },
       
+      UploadProgress: function(up, file) {
+        jQuery('#uploadingActions .progressbar').width(up.total.percent+'%');
+      },
+      
       BeforeUpload: function(up, file) {
         //console.log('[BeforeUpload]', file);
@@ -111 +121 @@
         // hide buttons
         jQuery('#startUpload, #addFiles').hide();
+        jQuery('#uploadingActions').show();
 
         // warn user if she wants to leave page while upload is running
@@ -181 +192 @@
 
         jQuery(".afterUploadActions").show();
+        jQuery('#uploadingActions').hide();
 
         // user can safely leave page without warning
@@ -266 +278 @@
         <p>Your browser doesn't have HTML5 support.</p>
       </div>
-      
-      <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
 
     </fieldset>
+    
+    <div id="uploadingActions" style="display:none">
+      <button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button>
+      
+      <div class="big-progressbar">
+        <div class="progressbar" style="width:0%"></div>
+      </div>
+    </div>
+      
+    <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
 
 </form>