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

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

Hide file tree

Showing 4 changed files with 121 additions and 94 deletions.
diff --git a/js/src/viewer/manifestsPanel.js b/js/src/viewer/manifestsPanel.js
@@ -16,7 +16,7 @@
 
         var _this = this;
         _this.init();
-        
+
     };
 
     $.ManifestsPanel.prototype = {
@@ -26,7 +26,7 @@
                 showURLBox : this.state.getStateProperty('showAddFromURLBox')
             })).appendTo(this.appendTo);
             this.manifestListElement = this.element.find('ul');
-            
+
             //this code gives us the max width of the results area, used to determine how many preview images to show
             //cloning the element and adjusting the display and visibility means it won't break the normal flow
             var clone = this.element.clone().css("visibility","hidden").css("display", "block").appendTo(this.appendTo);
@@ -35,7 +35,7 @@
             this.paddingListElement = this.controlsHeight;
             this.manifestListElement.css("padding-bottom", this.paddingListElement);
             clone.remove();
-            
+
             // this.manifestLoadStatusIndicator = new $.ManifestLoadStatusIndicator({
             //   manifests: this.parent.manifests,
             //   appendTo: this.element.find('.select-results')
@@ -83,27 +83,34 @@
               _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"});
+          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) {
@@ -122,7 +129,7 @@
           clone.remove();
           _this.eventEmitter.publish("manifestPanelWidthChanged", _this.resultsWidth);
         },
-        
+
         onPanelVisible: function(_, stateValue) {
           var _this = this;
           if (stateValue) { _this.show(); return; }
@@ -131,9 +138,9 @@
 
         onManifestReceived: function(event, newManifest) {
           var _this = this;
-          _this.manifestListItems.push(new $.ManifestListItem({ 
-            manifest: newManifest, 
-            resultsWidth: _this.resultsWidth, 
+          _this.manifestListItems.push(new $.ManifestListItem({
+            manifest: newManifest,
+            resultsWidth: _this.resultsWidth,
             state: _this.state,
             eventEmitter: _this.eventEmitter,
             appendTo: _this.manifestListElement }));

diff --git a/js/src/viewer/workspacePanel.js b/js/src/viewer/workspacePanel.js
@@ -30,7 +30,7 @@
       this.element = jQuery(this.template(templateData)).appendTo(this.appendTo);
       var backgroundImage = _this.state.getStateProperty('buildPath') + _this.state.getStateProperty('imagesPath') + 'debut_dark.png';
       this.element.css('background-image','url('+backgroundImage+')').css('background-repeat','repeat');
-      
+
       this.bindEvents();
       this.listenForActions();
     },
@@ -54,7 +54,7 @@
         var gridString = jQuery(this).data('gridstring');
         _this.hover(gridString);
       });
-      
+
       _this.element.find('.select-grid').on('mouseout', function() {
         _this.reset();
       });
@@ -81,7 +81,7 @@
       _this.element.find('.grid-instructions').hide();
       _this.element.find('.grid-text').text(gridString).show();
     },
-    
+
     reset: function() {
       var _this = this;
       _this.element.find('.grid-item').removeClass('hovered');
@@ -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) {