Feature 3185 : Add upload progress indicator with Piecon

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

admin/themes/default/template/photos_add_direct.tpl

@@ -1,8 +1,9 @@
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
+
 {combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js'}
+
 {combine_script id='jquery.plupload' load='footer' require='jquery' path='themes/default/js/plugins/plupload/plupload.full.min.js'}
 {combine_script id='jquery.plupload.queue' load='footer' require='jquery' path='themes/default/js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js'}
-{combine_script id='jquery.ui.progressbar' load='footer'}
 
 {combine_css path="themes/default/js/plugins/jquery.jgrowl.css"}
 {combine_css path="themes/default/js/plugins/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"}
@@ -20,6 +21,8 @@
 {combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
 {combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
 
+{combine_script id='piecon' load='footer' path='themes/default/js/plugins/piecon.min.js'}
+
 {footer_script}
 {* <!-- CATEGORIES --> *}
 var categoriesCache = new CategoriesCache({
@@ -44,6 +47,13 @@ jQuery('[data-add-album]').pwgAddAlbum({
   }
 });
 
+Piecon.setOptions({
+  color: '#ff7700',
+  background: '#bbb',
+  shadow: '#fff',
+  fallback: 'force'
+});
+
 var pwg_token = '{$pwg_token}';
 var photosUploaded_label = "{'%d photos uploaded'|translate}";
 var batch_Label = "{'Manage this set of %d photos'|translate}";
@@ -118,6 +128,7 @@ jQuery(document).ready(function(){
       
       UploadProgress: function(up, file) {
         jQuery('#uploadingActions .progressbar').width(up.total.percent+'%');
+        Piecon.setProgress(up.total.percent);
       },
       
       BeforeUpload: function(up, file) {
@@ -173,6 +184,8 @@ jQuery(document).ready(function(){
       UploadComplete: function(up, files) {
         // Called when all files are either uploaded or failed
         //console.log('[UploadComplete]');
+        
+        Piecon.reset();
 
         jQuery(".selectAlbum, .selectFiles, #permissions, .showFieldset").hide();
 

themes/default/js/plugins/piecon.min.js

@@ -0,0 +1 @@
+!function(){var a={},b=null,c=null,d=null,e=null,f={},g={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},h=window.devicePixelRatio>1,i=function(){var a=navigator.userAgent.toLowerCase();return function(b){return-1!==a.indexOf(b)}}(),j={ie:i("msie"),chrome:i("chrome"),webkit:i("chrome")||i("safari"),safari:i("safari")&&!i("chrome"),mozilla:i("mozilla")&&!i("chrome")&&!i("safari")},k=function(){for(var a=document.getElementsByTagName("link"),b=0,c=a.length;c>b;b++)if("icon"===a[b].getAttribute("rel")||"shortcut icon"===a[b].getAttribute("rel"))return a[b];return!1},l=function(){for(var a=document.getElementsByTagName("link"),b=document.getElementsByTagName("head")[0],c=0,d=a.length;d>c;c++)("icon"===a[c].getAttribute("rel")||"shortcut icon"===a[c].getAttribute("rel"))&&b.removeChild(a[c])},m=function(a){l();var b=document.createElement("link");b.type="image/x-icon",b.rel="icon",b.href=a,document.getElementsByTagName("head")[0].appendChild(b)},n=function(){return e||(e=document.createElement("canvas"),h?(e.width=32,e.height=32):(e.width=16,e.height=16)),e},o=function(a){var b=n(),c=b.getContext("2d");a=a||0,c&&(c.clearRect(0,0,b.width,b.height),c.beginPath(),c.moveTo(b.width/2,b.height/2),c.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2),0,2*Math.PI,!1),c.fillStyle=f.shadow,c.fill(),c.beginPath(),c.moveTo(b.width/2,b.height/2),c.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,0,2*Math.PI,!1),c.fillStyle=f.background,c.fill(),a>0&&(c.beginPath(),c.moveTo(b.width/2,b.height/2),c.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,-.5*Math.PI,(-.5+2*a/100)*Math.PI,!1),c.lineTo(b.width/2,b.height/2),c.fillStyle=f.color,c.fill()),m(b.toDataURL()))},p=function(a){document.title=a>0?"("+a+"%) "+d:d};a.setOptions=function(a){f={};for(var b in g)f[b]=a.hasOwnProperty(b)?a[b]:g[b];return this},a.setProgress=function(a){if(d||(d=document.title),!c||!b){var e=k();c=b=e?e.getAttribute("href"):"/favicon.ico"}return!isNaN(parseFloat(a))&&isFinite(a)?!n().getContext||j.ie||j.safari||f.fallback===!0?p(a):("force"===f.fallback&&p(a),o(a)):!1},a.reset=function(){d&&(document.title=d),c&&(b=c,m(b))},a.setOptions(g),window.Piecon=a}();