Show an animation while a preview is loading

diff --git a/app/assets/images/loading.gif b/app/assets/images/loading.gif
new file mode 100644 (file)
index 0000000..c21d3ed
Binary files /dev/null and b/app/assets/images/loading.gif differ

diff --git a/app/assets/javascripts/site.js b/app/assets/javascripts/site.js
index 5d727a0697fa3a982f56dc56c0b66d4a496eabd9..3d4130580c104731523a0e01b8251faebe1b434c 100644 (file)
--- a/app/assets/javascripts/site.js
+++ b/app/assets/javascripts/site.js
@@ -1,6 +1,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.autogrowtextarea
+//= require jquery.timers
 
 /*
  * Called as the user scrolls/zooms around to aniplate hrefs of the
@@ -216,7 +217,14 @@ function previewRichtext(event) {
   var minHeight = editor.outerHeight() - preview.outerHeight() + preview.innerHeight();
 
   editor.hide();
-  preview.load(editor.attr("data-preview-url"), { text: editor.val() });
+  preview.html("");
+  preview.oneTime(500, "loading", function () {
+    preview.addClass("loading");
+  });
+  preview.load(editor.attr("data-preview-url"), { text: editor.val() }, function () {
+    preview.stopTime("loading");
+    preview.removeClass("loading");
+  });
   preview.width(width);
   preview.css("min-height", minHeight + "px");
   preview.show();

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 0c2873acc245f1a56fc157ba5cf66accd577037b..72ef6b049aae7d878c0d04e0cdffa5958eaa427f 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1058,6 +1058,12 @@ abbr.geo {
       background-color: #eee;
       white-space: normal;
 
+      &.loading {
+        background-image: image-url("loading.gif");
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
       > :first-child {
         margin-top: 0px;
       }

diff --git a/vendor/assets/jquery/jquery.timers.js b/vendor/assets/jquery/jquery.timers.js
new file mode 100644 (file)
index 0000000..ce66eaf
--- /dev/null
+++ b/vendor/assets/jquery/jquery.timers.js
@@ -0,0 +1,138 @@
+/**
+ * jQuery.timers - Timer abstractions for jQuery
+ * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
+ * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
+ * Date: 2009/10/16
+ *
+ * @author Blair Mitchelmore
+ * @version 1.2
+ *
+ **/
+
+jQuery.fn.extend({
+       everyTime: function(interval, label, fn, times) {
+               return this.each(function() {
+                       jQuery.timer.add(this, interval, label, fn, times);
+               });
+       },
+       oneTime: function(interval, label, fn) {
+               return this.each(function() {
+                       jQuery.timer.add(this, interval, label, fn, 1);
+               });
+       },
+       stopTime: function(label, fn) {
+               return this.each(function() {
+                       jQuery.timer.remove(this, label, fn);
+               });
+       }
+});
+
+jQuery.extend({
+       timer: {
+               global: [],
+               guid: 1,
+               dataKey: "jQuery.timer",
+               regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
+               powers: {
+                       // Yeah this is major overkill...
+                       'ms': 1,
+                       'cs': 10,
+                       'ds': 100,
+                       's': 1000,
+                       'das': 10000,
+                       'hs': 100000,
+                       'ks': 1000000
+               },
+               timeParse: function(value) {
+                       if (value == undefined || value == null)
+                               return null;
+                       var result = this.regex.exec(jQuery.trim(value.toString()));
+                       if (result[2]) {
+                               var num = parseFloat(result[1]);
+                               var mult = this.powers[result[2]] || 1;
+                               return num * mult;
+                       } else {
+                               return value;
+                       }
+               },
+               add: function(element, interval, label, fn, times) {
+                       var counter = 0;
+                       
+                       if (jQuery.isFunction(label)) {
+                               if (!times) 
+                                       times = fn;
+                               fn = label;
+                               label = interval;
+                       }
+                       
+                       interval = jQuery.timer.timeParse(interval);
+
+                       if (typeof interval != 'number' || isNaN(interval) || interval < 0)
+                               return;
+
+                       if (typeof times != 'number' || isNaN(times) || times < 0) 
+                               times = 0;
+                       
+                       times = times || 0;
+                       
+                       var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
+                       
+                       if (!timers[label])
+                               timers[label] = {};
+                       
+                       fn.timerID = fn.timerID || this.guid++;
+                       
+                       var handler = function() {
+                               if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
+                                       jQuery.timer.remove(element, label, fn);
+                       };
+                       
+                       handler.timerID = fn.timerID;
+                       
+                       if (!timers[label][fn.timerID])
+                               timers[label][fn.timerID] = window.setInterval(handler,interval);
+                       
+                       this.global.push( element );
+                       
+               },
+               remove: function(element, label, fn) {
+                       var timers = jQuery.data(element, this.dataKey), ret;
+                       
+                       if ( timers ) {
+                               
+                               if (!label) {
+                                       for ( label in timers )
+                                               this.remove(element, label, fn);
+                               } else if ( timers[label] ) {
+                                       if ( fn ) {
+                                               if ( fn.timerID ) {
+                                                       window.clearInterval(timers[label][fn.timerID]);
+                                                       delete timers[label][fn.timerID];
+                                               }
+                                       } else {
+                                               for ( var fn in timers[label] ) {
+                                                       window.clearInterval(timers[label][fn]);
+                                                       delete timers[label][fn];
+                                               }
+                                       }
+                                       
+                                       for ( ret in timers[label] ) break;
+                                       if ( !ret ) {
+                                               ret = null;
+                                               delete timers[label];
+                                       }
+                               }
+                               
+                               for ( ret in timers ) break;
+                               if ( !ret ) 
+                                       jQuery.removeData(element, this.dataKey);
+                       }
+               }
+       }
+});
+
+jQuery(window).bind("unload", function() {
+       jQuery.each(jQuery.timer.global, function(index, item) {
+               jQuery.timer.remove(item);
+       });
+});
\ No newline at end of file