Merge pull request #474 from nein09/issue-127

Add option for home button to fill viewer (issue 127)

src/openseadragon.js

@@ -221,6 +221,10 @@
   *
   * @property {Number} [maxZoomLevel=null]
   *
+  * @property {Boolean} [homeFillsViewer=false]
+  *     Make the 'home' button fill the viewer and clip the image, instead
+  *     of fitting the image to the viewer and letterboxing.
+  *
   * @property {Boolean} [panHorizontal=true]
   *     Allow horizontal pan.
   *
@@ -912,6 +916,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             defaultZoomLevel:       0,
             minZoomLevel:           null,
             maxZoomLevel:           null,
+            homeFillsViewer:        false,
 
             //UI RESPONSIVENESS AND FEEL
             clickTimeThreshold:     300,

src/viewer.js

@@ -1937,7 +1937,8 @@ function openTileSource( viewer, source ) {
             degrees:                 _this.degrees //,
             //TODO: figure out how to support these in a way that makes sense
             //minZoomLevel:           this.minZoomLevel,
-            //maxZoomLevel:           this.maxZoomLevel
+            //maxZoomLevel:           this.maxZoomLevel,
+            //homeFillsViewer:        this.homeFillsViewer
         });
     } else {
         if( source ){
@@ -1958,7 +1959,8 @@ function openTileSource( viewer, source ) {
             maxZoomLevel:       _this.maxZoomLevel,
             viewer:             _this,
             degrees:            _this.degrees,
-            navigatorRotate:    _this.navigatorRotate
+            navigatorRotate:    _this.navigatorRotate,
+            homeFillsViewer:    _this.homeFillsViewer
         });
     }
 

src/viewport.js

@@ -84,7 +84,8 @@ $.Viewport = function( options ) {
         defaultZoomLevel:   $.DEFAULT_SETTINGS.defaultZoomLevel,
         minZoomLevel:       $.DEFAULT_SETTINGS.minZoomLevel,
         maxZoomLevel:       $.DEFAULT_SETTINGS.maxZoomLevel,
-        degrees:            $.DEFAULT_SETTINGS.degrees
+        degrees:            $.DEFAULT_SETTINGS.degrees,
+        homeFillsViewer:    $.DEFAULT_SETTINGS.homeFillsViewer
 
     }, options );
 
@@ -148,15 +149,21 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @function
      */
     getHomeZoom: function() {
-        var aspectFactor =
-            this.contentAspectX / this.getAspectRatio();
-
         if( this.defaultZoomLevel ){
             return this.defaultZoomLevel;
         } else {
-            return ( aspectFactor >= 1 ) ?
+            var aspectFactor =
-                1 :
+                this.contentAspectX / this.getAspectRatio();
-                aspectFactor;
+
+            if( this.homeFillsViewer ){ // fill the viewer and clip the image
+                return ( aspectFactor >= 1) ?
+                    aspectFactor :
+                    1;
+            } else {
+                return ( aspectFactor >= 1 ) ?
+                    1 :
+                    aspectFactor;
+            }
         }
     },
 
@@ -319,7 +326,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             return this.zoomSpring.target.value;
         }
     },
-    
+
     /**
      * @function
      * @private
@@ -342,7 +349,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
                 bounds.width,
                 bounds.height
             );
-    
+
         horizontalThreshold = this.visibilityRatio * newBounds.width;
         verticalThreshold   = this.visibilityRatio * newBounds.height;
 
@@ -387,7 +394,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
                 newBounds.y = this.contentAspectY/2 - newBounds.height/2;
             }
         }
-        
+
         if( this.viewer ){
             /**
              * Raised when the viewport constraints are applied (see {@link OpenSeadragon.Viewport#applyConstraints}).
@@ -403,10 +410,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
                 immediately: immediately
             });
         }
-        
+
         return newBounds;
     },
-    
+
     /**
      * @function
      * @return {OpenSeadragon.Viewport} Chainable.
@@ -420,7 +427,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             ),
             bounds,
             constrainedBounds;
-        
+
         if ( actualZoom != constrainedZoom ) {
             this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
         }
@@ -428,11 +435,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         bounds = this.getBounds();
 
         constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
-        
+
         if ( bounds.x !== constrainedBounds.x || bounds.y !== constrainedBounds.y || immediately ){
             this.fitBounds( constrainedBounds, immediately );
         }
-        
+
         return this;
     },
 
@@ -443,7 +450,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     ensureVisible: function( immediately ) {
         return this.applyConstraints( immediately );
     },
-    
+
     /**
      * @function
      * @private
@@ -455,7 +462,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         options = options || {};
         var immediately = options.immediately || false;
         var constraints = options.constraints || false;
-    
+
         var aspect = this.getAspectRatio(),
             center = bounds.getCenter(),
             newBounds = new $.Rect(
@@ -470,7 +477,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             referencePoint,
             newBoundsAspectRatio,
             newConstrainedZoom;
-        
+
         if ( newBounds.getAspectRatio() >= aspect ) {
             newBounds.height = bounds.width / aspect;
             newBounds.y      = center.y - newBounds.height / 2;
@@ -478,24 +485,24 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             newBounds.width = bounds.height * aspect;
             newBounds.x     = center.x - newBounds.width / 2;
         }
-        
+
         if ( constraints ) {
             newBoundsAspectRatio = newBounds.getAspectRatio();
         }
-        
+
         this.panTo( this.getCenter( true ), true );
         this.zoomTo( this.getZoom( true ), null, true );
-        
+
         oldBounds = this.getBounds();
         oldZoom   = this.getZoom();
         newZoom   = 1.0 / newBounds.width;
-        
+
         if ( constraints ) {
             newConstrainedZoom = Math.max(
                 Math.min(newZoom, this.getMaxZoom() ),
                 this.getMinZoom()
             );
-            
+
             if (newZoom !== newConstrainedZoom) {
                 newZoom = newConstrainedZoom;
                 newBounds.width = 1.0 / newZoom;
@@ -503,14 +510,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
                 newBounds.height = newBounds.width / newBoundsAspectRatio;
                 newBounds.y = center.y - newBounds.height / 2;
             }
-            
+
             newBounds = this._applyBoundaryConstraints( newBounds, immediately );
         }
-        
+
         if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
             return this.panTo( constraints ? newBounds.getCenter() : center, immediately );
         }
-        
+
         referencePoint = oldBounds.getTopLeft().times(
             this.containerSize.x / oldBounds.width
         ).minus(
@@ -521,10 +528,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             this.containerSize.x / oldBounds.width -
             this.containerSize.x / newBounds.width
         );
-        
+
         return this.zoomTo( newZoom, referencePoint, immediately );
     },
-    
+
     /**
      * @function
      * @param {OpenSeadragon.Rect} bounds
@@ -537,7 +544,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             constraints: false
         } );
     },
-    
+
     /**
      * @function
      * @param {OpenSeadragon.Rect} bounds
@@ -550,7 +557,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             constraints: true
         } );
     },
-    
+
     /**
      * @function
      * @param {Boolean} immediately
@@ -725,7 +732,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         degrees = ( degrees + 360 ) % 360;
         this.degrees = degrees;
         this.viewer.forceRedraw();
-        
+
         /**
          * Raised when rotation has been changed.
          *
@@ -1077,7 +1084,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return viewerCoordinates.plus(
                 OpenSeadragon.getElementPosition( this.viewer.element ));
     },
-    
+
     /**
      * Convert a viewport zoom to an image zoom.
      * Image zoom: ratio of the original image size to displayed image size.
@@ -1095,7 +1102,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         var viewportToImageZoomRatio = containerWidth / imageWidth;
         return viewportZoom * viewportToImageZoomRatio;
     },
-    
+
     /**
      * Convert an image zoom to a viewport zoom.
      * Image zoom: ratio of the original image size to displayed image size.