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

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

Hide file tree

Showing 4 changed files with 82 additions and 57 deletions.
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/bookView.js b/js/src/widgets/bookView.js
@@ -77,14 +77,14 @@
     },
 
     template: Handlebars.compile([
-                                 '<div class="book-view">',
-                                 '</div>'
+      '<div class="book-view">',
+      '</div>'
     ].join('')),
 
     listenForActions: function() {
       var _this = this,
-      firstCanvasId = _this.imagesList[0]['@id'],
-      lastCanvasId = _this.imagesList[_this.imagesList.length-1]['@id'];
+          firstCanvasId = _this.imagesList[0]['@id'],
+          lastCanvasId = _this.imagesList[_this.imagesList.length-1]['@id'];
 
       _this.eventEmitter.subscribe('bottomPanelSet.' + _this.windowId, function(event, visible) {
         var dodgers = _this.element.find('.mirador-osd-toggle-bottom-panel, .mirador-pan-zoom-controls');
@@ -119,7 +119,7 @@
       });
     },
 
-bindEvents: function() {
+    bindEvents: function() {
       var _this = this;
 
       this.element.find('.mirador-osd-next').on('click', function() {
@@ -159,7 +159,7 @@ bindEvents: function() {
         var osd = _this.osd;
         if ( osd.viewport ) {
           osd.viewport.zoomBy(
-            osd.zoomPerClick / 1.0
+              osd.zoomPerClick / 1.0
           );
           osd.viewport.applyConstraints();
         }
@@ -168,7 +168,7 @@ bindEvents: function() {
         var osd = _this.osd;
         if ( osd.viewport ) {
           osd.viewport.zoomBy(
-            1.0 / osd.zoomPerClick
+              1.0 / osd.zoomPerClick
           );
           osd.viewport.applyConstraints();
         }
@@ -193,19 +193,19 @@ bindEvents: function() {
       var _this = this;
       this.osdOptions.osdBounds = this.osd.viewport.getBounds(true);
       _this.eventEmitter.publish("imageBoundsUpdated", {
-        id: _this.windowId, 
-          osdBounds: {
-            x: _this.osdOptions.osdBounds.x, 
-            y: _this.osdOptions.osdBounds.y, 
-            width: _this.osdOptions.osdBounds.width, 
-            height: _this.osdOptions.osdBounds.height
-          }
+        id: _this.windowId,
+        osdBounds: {
+          x: _this.osdOptions.osdBounds.x,
+          y: _this.osdOptions.osdBounds.y,
+          width: _this.osdOptions.osdBounds.width,
+          height: _this.osdOptions.osdBounds.height
+        }
       });
     },
 
     toggle: function(stateValue) {
-      if (stateValue) { 
-        this.show(); 
+      if (stateValue) {
+        this.show();
       } else {
         this.hide();
       }
@@ -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) {
@@ -241,8 +247,8 @@ bindEvents: function() {
       this.currentImg = this.imagesList[this.currentImgIndex];
       var newList = this.getStitchList();
       var is_same = this.stitchList.length == newList.length && this.stitchList.every(function(element, index) {
-        return element === newList[index]; 
-      });
+            return element === newList[index];
+          });
       if (!is_same) {
         this.stitchList = newList;
         this.osdOptions = {
@@ -256,19 +262,19 @@ bindEvents: function() {
 
     createOpenSeadragonInstance: function() {
       var uniqueID = $.genUUID(),
-      osdId = 'mirador-osd-' + uniqueID,
-      osdToolBarId = osdId + '-toolbar',
-      elemOsd,
-      tileSources = [],
-      _this = this,
-      toolbarID = 'osd-toolbar-' + uniqueID,
-      dfd = jQuery.Deferred();
+          osdId = 'mirador-osd-' + uniqueID,
+          osdToolBarId = osdId + '-toolbar',
+          elemOsd,
+          tileSources = [],
+          _this = this,
+          toolbarID = 'osd-toolbar-' + uniqueID,
+          dfd = jQuery.Deferred();
 
       this.element.find('.' + this.osdCls).remove();
 
       jQuery.each(this.stitchList, function(index, image) {
         var imageUrl = $.Iiif.getImageUrl(image),
-        infoJsonUrl = imageUrl + '/info.json';
+            infoJsonUrl = imageUrl + '/info.json';
 
         jQuery.getJSON(infoJsonUrl).done(function (data, status, jqXHR) {
           tileSources.splice(index, 0, data);
@@ -280,10 +286,10 @@ bindEvents: function() {
         var aspectRatio = tileSources[0].height / tileSources[0].width;
 
         elemOsd =
-          jQuery('<div/>')
-        .addClass(_this.osdCls)
-        .attr('id', osdId)
-        .appendTo(_this.element);
+            jQuery('<div/>')
+                .addClass(_this.osdCls)
+                .attr('id', osdId)
+                .appendTo(_this.element);
 
         _this.osd = $.OpenSeadragon({
           'id':           elemOsd.attr('id'),
@@ -292,8 +298,8 @@ bindEvents: function() {
 
         if (_this.state.getStateProperty('autoHideControls')) {
           var timeoutID = null,
-          fadeDuration = _this.state.getStateProperty('fadeDuration'),
-          timeoutDuration = _this.state.getStateProperty('timeoutDuration');
+              fadeDuration = _this.state.getStateProperty('fadeDuration'),
+              timeoutDuration = _this.state.getStateProperty('timeoutDuration');
           var hideHUD = function() {
             _this.element.find(".hud-control").stop(true, true).addClass('hidden', fadeDuration);
           };
@@ -388,11 +394,11 @@ bindEvents: function() {
       // Default to 'paged' and 'left-to-right'
       // Set index(es) for any other images to stitch with selected image
       var stitchList = [],
-      leftIndex = [],
-      rightIndex = [],
-      topIndex = [],
-      bottomIndex = [],
-      _this = this;
+          leftIndex = [],
+          rightIndex = [],
+          topIndex = [],
+          bottomIndex = [],
+          _this = this;
 
       this.focusImages = [];
 
@@ -409,20 +415,20 @@ bindEvents: function() {
           switch (this.viewingDirection) {
             case "left-to-right":
               leftIndex[0] = this.currentImgIndex-1;
-            stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
-            break;
+              stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
+              break;
             case "right-to-left":
               rightIndex[0] = this.currentImgIndex-1;
-            stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
-            break;
+              stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
+              break;
             case "top-to-bottom":
               topIndex[0] = this.currentImgIndex-1;
-            stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
-            break;
+              stitchList = [this.imagesList[this.currentImgIndex-1], this.currentImg];
+              break;
             case "bottom-to-top":
               bottomIndex[0] = this.currentImgIndex-1;
-            stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
-            break;
+              stitchList = [this.currentImg, this.imagesList[this.currentImgIndex-1]];
+              break;
             default:
               break;
           }
@@ -431,20 +437,20 @@ bindEvents: function() {
           switch (this.viewingDirection) {
             case "left-to-right":
               rightIndex[0] = this.currentImgIndex+1;
-            stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
-            break;
+              stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
+              break;
             case "right-to-left":
               leftIndex[0] = this.currentImgIndex+1;
-            stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
-            break;
+              stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
+              break;
             case "top-to-bottom":
               bottomIndex[0] = this.currentImgIndex+1;
-            stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
-            break;
+              stitchList = [this.currentImg, this.imagesList[this.currentImgIndex+1]];
+              break;
             case "bottom-to-top":
               topIndex[0] = this.currentImgIndex+1;
-            stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
-            break;
+              stitchList = [this.imagesList[this.currentImgIndex+1], this.currentImg];
+              break;
             default:
               break;
           }

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