Merge pull request #1686 from openseadragon/ig-navigator

Making it possible to manually set the width and height of the navigator

src/navigator.js

@@ -182,16 +182,14 @@ $.Navigator = function( options ){
     this._resizeWithViewer = options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE &&
         options.controlOptions.anchor != $.ControlAnchor.NONE;
 
-    if ( this._resizeWithViewer ) {
+    if (options.width && options.height) {
-        if ( options.width && options.height ) {
+        this.setWidth(options.width);
-            this.element.style.height = typeof (options.height) == "number" ? (options.height + 'px') : options.height;
+        this.setHeight(options.height);
-            this.element.style.width  = typeof (options.width) == "number" ? (options.width + 'px') : options.width;
+    } else if ( this._resizeWithViewer ) {
-        } else {
         viewerSize = $.getElementSize( viewer.element );
         this.element.style.height = Math.round( viewerSize.y * options.sizeRatio ) + 'px';
         this.element.style.width  = Math.round( viewerSize.x * options.sizeRatio ) + 'px';
         this.oldViewerSize = viewerSize;
-        }
         navigatorSize = $.getElementSize( this.element );
         this.elementArea = navigatorSize.x * navigatorSize.y;
     }
@@ -277,8 +275,29 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
             }
         }
     },
+
     /**
-      /* Flip navigator element
+     * Explicitly sets the width of the navigator, in web coordinates. Disables automatic resizing.
+     * @param {Number|String} width - the new width, either a number of pixels or a CSS string, such as "100%"
+     */
+    setWidth: function(width) {
+        this.width = width;
+        this.element.style.width = typeof (width) == "number" ? (width + 'px') : width;
+        this._resizeWithViewer = false;
+    },
+
+    /**
+     * Explicitly sets the height of the navigator, in web coordinates. Disables automatic resizing.
+     * @param {Number|String} height - the new height, either a number of pixels or a CSS string, such as "100%"
+     */
+    setHeight: function(height) {
+        this.height = height;
+        this.element.style.height = typeof (height) == "number" ? (height + 'px') : height;
+        this._resizeWithViewer = false;
+    },
+
+    /**
+      * Flip navigator element
       * @param {Boolean} state - Flip state to set.
       */
     setFlip: function(state) {

test/modules/navigator.js

@@ -1087,4 +1087,31 @@
         });
     });
 
+    QUnit.test('Explicit height/width', function(assert) {
+        var done = assert.async();
+        viewer = OpenSeadragon({
+            id:            'example',
+            prefixUrl:     '/build/openseadragon/images/',
+            tileSources:   '/test/data/tall.dzi',
+            springStiffness: 100, // Faster animation = faster tests
+            showNavigator:  true,
+            navigatorWidth: 200,
+            navigatorHeight: 300
+        });
+        viewer.addOnceHandler('open', function() {
+            var $navigator = $('.navigator');
+
+            // With the current configuration, the default values would be 100 x 100 if we hadn't set navigatorWidth and navigatorHeight.
+            assert.equal($navigator.width(), 200, "Navigator starts with the correct width.");
+            assert.equal($navigator.height(), 300, "Navigator starts with the correct height.");
+
+            viewer.navigator.setWidth(400);
+            viewer.navigator.setHeight(500);
+            assert.equal($navigator.width(), 400, "Navigator changes to the correct width.");
+            assert.equal($navigator.height(), 500, "Navigator changes to the correct height.");
+
+            done();
+        });
+    });
+
 })();