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

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

Hide file tree

Showing 4 changed files with 115 additions and 85 deletions.
diff --git a/js/src/viewer/manifestsPanel.js b/js/src/viewer/manifestsPanel.js
@@ -57,88 +57,99 @@
           });
         },
 
-        bindEvents: function() {
-            var _this = this;
-
-            // handle interface events
-            this.element.find('form#url-load-form').on('submit', function(event) {
-              event.preventDefault();
-              _this.addManifestUrl(jQuery(this).find('input').val());
-            });
-
-            this.element.find('.remove-object-option').on('click', function(event) {
-              _this.togglePanel(event);
-            });
-
-            // Filter manifests based on user input
-            this.element.find('#manifest-search').on('keyup input', function(event) {
-              _this.filterManifests(this.value);
-            });
-
-            this.element.find('#manifest-search-form').on('submit', function(event) {
-              event.preventDefault();
-            });
-
-            jQuery(window).resize($.throttle(function() {
-              _this.resizePanel();
-            }, 50, true));
-        },
-
-        hide: function() {
-            var _this = this;
-            jQuery(this.element).hide({effect: "fade", duration: 160, easing: "easeOutCubic"});
-        },
-
-        show: function() {
-            var _this = this;
-            jQuery(this.element).show({effect: "fade", duration: 160, easing: "easeInCubic"});
-        },
-
-        addManifestUrl: function(url) {
-          var _this = this;
-          _this.eventEmitter.publish('ADD_MANIFEST_FROM_URL', url, "(Added from URL)");
-        },
-
-        togglePanel: function(event) {
-          var _this = this;
-          _this.eventEmitter.publish('TOGGLE_LOAD_WINDOW');
-        },
-
-        filterManifests: function(value) {
-          var _this = this;
-          if (value.length > 0) {
-             _this.element.find('.items-listing li').show().filter(function() {
-                return jQuery(this).text().toLowerCase().indexOf(value.toLowerCase()) === -1;
-             }).hide();
-          } else {
-             _this.element.find('.items-listing li').show();
-          }
-        },
-
-        resizePanel: function() {
-          var _this = this;
-          var clone = _this.element.clone().css("visibility","hidden").css("display", "block").appendTo(_this.appendTo);
-          _this.resultsWidth = clone.find('.select-results').outerWidth();
-          clone.remove();
-          _this.eventEmitter.publish("manifestPanelWidthChanged", _this.resultsWidth);
-        },
-
-        onPanelVisible: function(_, stateValue) {
-          var _this = this;
-          if (stateValue) { _this.show(); return; }
-           _this.hide();
-        },
-
-        onManifestReceived: function(event, newManifest) {
-          var _this = this;
-          _this.manifestListItems.push(new $.ManifestListItem({ 
-            manifest: newManifest, 
-            resultsWidth: _this.resultsWidth, 
-            state: _this.state,
-            eventEmitter: _this.eventEmitter,
-            appendTo: _this.manifestListElement }));
-          _this.element.find('#manifest-search').keyup();
-        },
+    bindEvents: function () {
+      var _this = this;
+
+      // handle interface events
+      this.element.find('form#url-load-form').on('submit', function (event) {
+        event.preventDefault();
+        _this.addManifestUrl(jQuery(this).find('input').val());
+      });
+
+      this.element.find('.remove-object-option').on('click', function (event) {
+        _this.togglePanel(event);
+      });
+
+      // Filter manifests based on user input
+      this.element.find('#manifest-search').on('keyup input', function (event) {
+        _this.filterManifests(this.value);
+      });
+
+      this.element.find('#manifest-search-form').on('submit', function (event) {
+        event.preventDefault();
+      });
+
+      jQuery(window).resize($.throttle(function () {
+        _this.resizePanel();
+      }, 50, true));
+    },
+
+    hide: function () {
+      var _this = this;
+      jQuery(this.element).hide({effect: "fade", duration: 160, easing: "easeOutCubic"});
+    },
+
+    show: function () {
+      var _this = this;
+      jQuery(this.element).css('display', 'block');
+      jQuery(this.element).show({
+        effect: "fade", duration: 160, 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');
+        }
+      });
+    },
+
+    addManifestUrl: function (url) {
+      var _this = this;
+      _this.eventEmitter.publish('ADD_MANIFEST_FROM_URL', url, "(Added from URL)");
+    },
+
+    togglePanel: function (event) {
+      var _this = this;
+      _this.eventEmitter.publish('TOGGLE_LOAD_WINDOW');
+    },
+
+    filterManifests: function (value) {
+      var _this = this;
+      if (value.length > 0) {
+        _this.element.find('.items-listing li').show().filter(function () {
+          return jQuery(this).text().toLowerCase().indexOf(value.toLowerCase()) === -1;
+        }).hide();
+      } else {
+        _this.element.find('.items-listing li').show();
+      }
+    },
+
+    resizePanel: function () {
+      var _this = this;
+      var clone = _this.element.clone().css("visibility", "hidden").css("display", "block").appendTo(_this.appendTo);
+      _this.resultsWidth = clone.find('.select-results').outerWidth();
+      clone.remove();
+      _this.eventEmitter.publish("manifestPanelWidthChanged", _this.resultsWidth);
+    },
+
+    onPanelVisible: function (_, stateValue) {
+      var _this = this;
+      if (stateValue) {
+        _this.show();
+        return;
+      }
+      _this.hide();
+    },
+
+    onManifestReceived: function (event, newManifest) {
+      var _this = this;
+      _this.manifestListItems.push(new $.ManifestListItem({
+        manifest: newManifest,
+        resultsWidth: _this.resultsWidth,
+        state: _this.state,
+        eventEmitter: _this.eventEmitter,
+        appendTo: _this.manifestListElement
+      }));
+      _this.element.find('#manifest-search').keyup();
+    },
 
         template: Handlebars.compile([
           '<div id="manifest-select-menu">',

diff --git a/js/src/viewer/workspacePanel.js b/js/src/viewer/workspacePanel.js
@@ -94,7 +94,13 @@
     },
 
     show: function() {
-      jQuery(this.element).show({effect: "fade", duration: 160, easing: "easeInCubic"});
+      jQuery(this.element).show({
+        effect: "fade", duration: 160, 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');
+        }
+      });
     },
 
     onPanelVisible: function(_, stateValue) {

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();
         }
       });