Add workaround to fix #929 by manually setting the display to block i…

…nside the complete animation callback
ProjectMirador · Jun 6, 2016 · 18b2824 · 18b2824
1 parent 76a35e7
commit 18b2824
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 26 deletions.
diff --git a/js/src/viewer/workspacePanel.js b/js/src/viewer/workspacePanel.js
@@ -94,7 +94,15 @@
     },
 
     show: function() {
-      jQuery(this.element).show({effect: "fade", duration: 160, easing: "easeInCubic"});
+      var onComplete = function () {
+        // Under firefox $.show() used under display:none iframe does not change the display.
+        // This is workaround for https://github.com/IIIF/mirador/issues/929
+        jQuery(this).css('display', 'block');
+      };
+
+      jQuery(this.element).show({
+        effect: "fade", duration: 160, easing: "easeInCubic", complete: onComplete
+      });
     },
 
     onPanelVisible: function(_, stateValue) {

diff --git a/js/src/widgets/bookView.js b/js/src/widgets/bookView.js
@@ -216,7 +216,13 @@ bindEvents: function() {
     },
 
     show: function() {
-      jQuery(this.element).show({effect: "fade", duration: 300, easing: "easeInCubic"});
+      jQuery(this.element).show({
+        effect: "fade", duration: 300, easing: "easeInCubic", complete: function () {
+          // Under firefox $.show() used under display:none iframe does not change the display.
+          // This is workaround for https://github.com/IIIF/mirador/issues/929
+          jQuery(this).css('display', 'block');
+        }
+      });
     },
 
     adjustWidth: function(className, hasClass) {

diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js
@@ -340,7 +340,13 @@
     },
 
     show: function() {
-      jQuery(this.element).show({effect: "fade", duration: 300, easing: "easeInCubic"});
+      jQuery(this.element).show({
+        effect: "fade", duration: 300, easing: "easeInCubic", complete: function () {
+          // Under firefox $.show() used under display:none iframe does not change the display.
+          // This is workaround for https://github.com/IIIF/mirador/issues/929
+          jQuery(this).css('display', 'block');
+        }
+      });
     },
 
     adjustWidth: function(className, hasClass) {

diff --git a/js/src/widgets/thumbnailsView.js b/js/src/widgets/thumbnailsView.js
@@ -108,7 +108,11 @@
     bindEvents: function() {
       var _this = this;
       _this.element.find('img').on('load', function() {
-        jQuery(this).hide().fadeIn(750);
+        jQuery(this).hide().fadeIn(750,function(){
+          // Under firefox $.show() used under display:none iframe does not change the display.
+          // This is workaround for https://github.com/IIIF/mirador/issues/929
+          jQuery(this).css('display', 'block');
+        });
       });
 
       jQuery(_this.element).scroll(function() {
@@ -199,6 +203,9 @@
         duration: 300,
         easing: "easeInCubic",
         complete: function() {
+          // Under firefox $.show() used under display:none iframe does not change the display.
+          // This is workaround for https://github.com/IIIF/mirador/issues/929
+          jQuery(this).css('display', 'block');
           _this.loadImages();
         }
       });

diff --git a/spec/widgets/thumbnailsView.test.js b/spec/widgets/thumbnailsView.test.js
@@ -1,72 +1,87 @@
-describe('ThumbnailsView', function() {
-
-  beforeEach(function() {
-
+describe('ThumbnailsView', function () {
+
+  beforeEach(function () {
+    this.eventEmitter = new Mirador.EventEmitter();
+    this.viewerDiv = jQuery('<div>');
+    this.workspace = {
+      setLayout: jasmine.createSpy()
+    };
+    this.view = new Mirador.ThumbnailsView({
+      appendTo: this.viewerDiv,
+      workspace: this.workspace,
+      state: new Mirador.SaveController({eventEmitter: this.eventEmitter}),
+      eventEmitter: this.eventEmitter
+    });
   });
 
-  afterEach(function() {
+  afterEach(function () {
 
   });
 
-  xdescribe('Initialization', function() {
-    it('should initialize', function() {
+  xdescribe('Initialization', function () {
+    it('should initialize', function () {
 
     });
   });
 
-  xdescribe('loadContent', function() {
+  xdescribe('loadContent', function () {
 
   });
 
-  xdescribe('updateImage', function() {
+  xdescribe('updateImage', function () {
 
   });
 
-  xdescribe('updateFocusImages', function() {
+  xdescribe('updateFocusImages', function () {
 
   });
 
-  xdescribe('currentImageChanged', function() {
+  xdescribe('currentImageChanged', function () {
 
   });
 
-  xdescribe('listenForActions', function() {
+  xdescribe('listenForActions', function () {
 
   });
 
-  xdescribe('bindEvents', function() {
+  xdescribe('bindEvents', function () {
 
   });
 
-  xdescribe('toggle', function() {
+  xdescribe('toggle', function () {
 
   });
 
-  xdescribe('loadImages', function() {
+  xdescribe('loadImages', function () {
 
   });
 
-  xdescribe('loadImage', function() {
+  xdescribe('loadImage', function () {
 
   });
 
-  xdescribe('reloadImages', function() {
+  xdescribe('reloadImages', function () {
 
   });
 
-  xdescribe('hide', function() {
+  xdescribe('hide', function () {
 
   });
 
-  xdescribe('show', function() {
-
+  describe('show', function () {
+    it('should show the thumbnailsView', function () {
+      spyOn(jQuery.fn, 'show');
+      this.view.show();
+      expect(jQuery.fn.show).toHaveBeenCalled();
+    });
   });
 
-  xdescribe('adjustWidth', function() {
+
+  xdescribe('adjustWidth', function () {
 
   });
 
-  xdescribe('adjustHeight', function() {
+  xdescribe('adjustHeight', function () {
 
   });
 });