feature 2417 added: add progress bar (jQuery UI progress bar) + details on

progressing upload like "photo 21 of 46".


git-svn-id: http://piwigo.org/svn/trunk@12005 68402e56-0260-453c-a942-63ccdbb3a9ee

3 files changed, 35 insertions, 2 deletions

diff --git a/admin/themes/default/images/pbar-ani.gif b/admin/themes/default/images/pbar-ani.gif
new file mode 100644
index 000000000..cb59a04f9
--- /dev/null
+++ b/admin/themes/default/images/pbar-ani.gif
diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl
index 9aac44c93..52bc6b323 100644
--- a/admin/themes/default/template/photos_add_direct.tpl
+++ b/admin/themes/default/template/photos_add_direct.tpl
@@ -1,6 +1,7 @@
 {if $upload_mode eq 'multiple'}
 {combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js' }
 {combine_script id='jquery.uploadify' load='footer' require='jquery' path='admin/include/uploadify/jquery.uploadify.v3.0.0.min.js' }
+{combine_script id='jquery.ui.progressbar' load='footer'}
 {combine_css path="admin/themes/default/uploadify.jGrowl.css"}
 {combine_css path="admin/include/uploadify/uploadify.css"}
 {/if}
@@ -235,6 +236,21 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
       /* Let's display the thumbnail of the uploaded photo, no need to wait the  */
       /* end of the queue                                                        */
       jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
+    },
+    onUploadComplete: function(file,swfuploadifyQueue) {
+      var max = parseInt(jQuery("#progressMax").text());
+      var next = parseInt(jQuery("#progressCurrent").text())+1;
+      var addToProgressBar = 2;
+      if (next <= max) {
+        jQuery("#progressCurrent").text(next);
+      }
+      else {
+        addToProgressBar = 1;
+      }
+
+      jQuery("#progressbar").progressbar({
+        value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
+      });
     }
   });
 
@@ -254,6 +270,13 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
       }
     );
 
+    nb_files = jQuery(".uploadifyQueueItem").size();
+    jQuery("#progressMax").text(nb_files);
+    jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
+    jQuery("#progressCurrent").text(1);
+
+    jQuery("#uploadProgress").show();
+
     jQuery("#uploadify").uploadifyUpload();
   });
 
@@ -388,13 +411,19 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
       <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
     </p>
 {elseif $upload_mode eq 'multiple'}
-    <p>
+    <p style="margin-bottom:1em">
       <input class="submit" type="button" value="{'Start Upload'|@translate}">
       <input type="submit" name="submit_upload" style="display:none">
     </p>
 {/if}
 </form>
 
+<div id="uploadProgress" style="display:none">
+{'Photo %s of %s'|@translate|@sprintf:'<span id="progressCurrent">1</span>':'<span id="progressMax">10</span>'}
+<br>
+<div id="progressbar"></div>
+</div>
+
 <fieldset style="display:none">
   <legend>{'Uploaded Photos'|@translate}</legend>
   <div id="uploadedPhotos"></div>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 84e1e2518..7b798dc59 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1071,4 +1071,8 @@ p#uploadWarningsSummary .showInfo {position:static;display:inline;padding:1px 6p
 p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
 p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
 
-#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
\ No newline at end of file
+#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
+
+#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
+#progressbar {border:1px solid #ccc; background-color:#eee;}
+.ui-progressbar-value { background-image: url(images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;}