Add errorDuration option to hide error notice, closes i-like-robots#31

bjornmeansbear · Jul 15, 2014 · a4824e2 · a4824e2
1 parent 855f064
commit a4824e2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 20 deletions.
diff --git a/dist/easyzoom.js b/dist/easyzoom.js
diff --git a/index.html b/index.html
@@ -213,6 +213,12 @@ <h1>
 					The text to display within the notice box if an error occurs loading the zoom image. Default:
 					<code>"The image could not be loaded"</code>.
 				</dd>
+				<dt>
+					<var>errorDuration</var>
+				</dt>
+				<dd>
+					The time (in milliseconds) to display the error notice. Default: <code>2500</code>.
+				</dd>
 				<dt>
 					<var>preventClicks</var>
 				</dt>
@@ -292,4 +298,4 @@ <h1>
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/src/easyzoom.js b/src/easyzoom.js
@@ -12,6 +12,9 @@
         // The text to display within the notice box if an error occurs loading the zoom image.
         errorNotice: 'The image could not be loaded',
 
+        // The time (in milliseconds) to display the error notice.
+        errorDuration: 2500,
+
         // Prevent clicks on the zoom image link.
         preventClicks: true,
 
@@ -133,33 +136,39 @@
      * @param {Function} callback
      */
     EasyZoom.prototype._load = function(href, callback) {
-        var self = this;
         var zoom = new Image();
 
         this.$target.addClass('is-loading').append(this.$notice.text(this.opts.loadingNotice));
 
         this.$zoom = $(zoom);
 
-        zoom.onerror = function() {
-            self.$notice.text(self.opts.errorNotice);
-            self.$target.removeClass('is-loading').addClass('is-error');
-        };
+        zoom.onerror = $.proxy(function() {
+            var self = this;
+
+            this.$notice.text(this.opts.errorNotice);
+            this.$target.removeClass('is-loading').addClass('is-error');
 
-        zoom.onload = function() {
+            this.detachNotice = setTimeout(function() {
+                self.$notice.detach();
+                self.detachNotice = null;
+            }, this.opts.errorDuration);
+        }, this);
+
+        zoom.onload = $.proxy(function() {
 
             // IE may fire a load event even on error so check the image has dimensions
             if (zoom.width === 0) {
                 return;
             }
 
-            self.isReady = true;
+            this.isReady = true;
 
-            self.$notice.detach();
-            self.$flyout.html(self.$zoom);
-            self.$target.removeClass('is-loading').addClass('is-ready');
+            this.$notice.detach();
+            this.$flyout.html(this.$zoom);
+            this.$target.removeClass('is-loading').addClass('is-ready');
 
             callback();
-        };
+        }, this);
 
         zoom.style.position = 'absolute';
         zoom.src = href;
@@ -188,9 +197,6 @@
         var xt = pt * rh;
         var xl = pl * rw;
 
-        // xt = (xt > dh) ? dh : xt;
-        // xl = (xl > dw) ? dw : xl;
-
         // Close if outside
         if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
             this.hide();
@@ -227,6 +233,14 @@
         this.hide();
         this.isReady = false;
 
+        if (this.detachNotice) {
+            clearTimeout(this.detachNotice);
+        }
+
+        if (this.$notice.parent().length) {
+            this.$notice.detach();
+        }
+
         this.$target.removeClass('is-loading is-ready is-error');
         this.$image.attr('src', standardSrc);
         this.$link.attr('href', zoomHref);
@@ -240,6 +254,10 @@
 
         this.$target.removeClass('is-loading is-ready is-error').off('.easyzoom');
 
+        if (this.detachNotice) {
+            clearTimeout(this.detachNotice);
+        }
+
         delete this.$link;
         delete this.$zoom;
         delete this.$image;

diff --git a/test/spec/easyzoom.js b/test/spec/easyzoom.js
@@ -166,16 +166,21 @@
 
     asyncTest("._load(404)", function() {
 
-        expect(2);
+        expect(3);
 
+        api.opts.errorDuration = 100;
         api._load("404.jpg");
 
         api.$zoom.on("error", function() {
 
             equal(api.$notice.parent().length, 1, "Error notice appended to DOM");
             equal(api.$target.hasClass("is-error"), true, "Error class added to target");
 
-            start();
+            setTimeout(function() {
+                equal(api.$notice.parent().length, 0, "Error notice removed from DOM");
+                start();
+            }, 100);
+
         });
 
     });