Add an upload progress bar
authorLunar <lunar@anargeek.net>
Wed, 30 Jun 2010 14:16:08 +0000 (16:16 +0200)
committerLunar <lunar@anargeek.net>
Wed, 30 Jun 2010 14:16:08 +0000 (16:16 +0200)
coquelicot.rb
public/javascripts/coquelicot.js [new file with mode: 0644]

index ebd00f2..4f5ce34 100644 (file)
@@ -69,6 +69,10 @@ __END__
     %base{ :href => base_href }
     %link{ :rel => 'stylesheet', :href => "style.css", :type => 'text/css',
            :media => "screen, projection" }
+    %script{ :type => 'text/javascript', :src => 'javascripts/jquery.min.js' }
+    %script{ :type => 'text/javascript', :src => 'javascripts/jquery.lightBoxFu.js' }
+    %script{ :type => 'text/javascript', :src => 'javascripts/jquery.uploadProgress.js' }
+    %script{ :type => 'text/javascript', :src => 'javascripts/coquelicot.js' }
   %body
     #container
       = yield
@@ -105,3 +109,13 @@ a, a:visited
   background-color: red
   color: white
   border: black solid 1px
+
+#progress
+  margin: 8px
+  width: 220px
+  height: 19px
+
+#progressbar
+  background: url('images/ajax-loader.gif') no-repeat
+  width: 0px
+  height: 19px
diff --git a/public/javascripts/coquelicot.js b/public/javascripts/coquelicot.js
new file mode 100644 (file)
index 0000000..ec76e67
--- /dev/null
@@ -0,0 +1,32 @@
+$(function($) {  
+  $.lightBoxFu.initialize({
+    imagesPath: 'images/',
+    stylesheetsPath: 'stylesheets/'
+  });
+  $('form#upload').uploadProgress({
+    start:function() {
+      // after starting upload open lightBoxFu with our bar as html
+      $.lightBoxFu.open({
+        html: '<div id="uploading"><span id="received"></span><span id="size"></span><br/><div id="progress" class="bar"><div id="progressbar">&nbsp;</div></div><span id="percent"></span></div>',
+        width: "250px",
+        closeOnClick: false
+      });
+      jQuery('#received').html("Upload starting.");
+      jQuery('#percent').html("0%");
+    },
+    uploading: function(upload) {
+      // update upload info on each /progress response
+      jQuery('#received').html("Uploading: " + parseInt(upload.received / 1024) + "/");
+      jQuery('#size').html(parseInt(upload.size / 1024) + " kB");
+      jQuery('#percent').html(upload.percents + "%");
+    },
+    interval: 2000,
+    /* if we are using images it's good to preload them, safari has problems with
+       downloading anything after hitting submit button. these are images for lightBoxFu
+       and progress bar */
+    preloadImages: ["images/overlay.png", "images/ajax-loader.gif"],
+    jqueryPath: "javascripts/jquery.min.js",
+    uploadProgressPath: "javascripts/jquery.uploadProgress.js",
+    progressUrl: "progress"
+  });
+});