mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ian Gilman 2019-07-26 11:34:33 -07:00
parent 9506d6e539
commit 3fa1068275
2 changed files with 57 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/navigator.js
View File

@ -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 ) {
this.element.style.height = typeof (options.height) == "number" ? (options.height + 'px') : options.height;
this.element.style.width = typeof (options.width) == "number" ? (options.width + 'px') : options.width;
} 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;
}
if (options.width && options.height) {
this.setWidth(options.width);
this.setHeight(options.height);
} else if ( this._resizeWithViewer ) {
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) {

27
test/modules/navigator.js
View File

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