diff --git a/changelog.txt b/changelog.txt
index 9521628b..b7086bf9 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -6,6 +6,11 @@ OPENSEADRAGON CHANGELOG
* Fixed: Nav button highlight states aren't quite aligned on Firefox (#303)
* Added ControlAnchor options for default controls (#304)
* Enabled basic cross-domain tile loading without tainting canvas (works in Chrome and Firefox) (#308)
+* Added a ControlAnchor.ABSOLUTE enumeration. Enables absolute positioning of control elements in the viewer (#310)
+* Added a 'navigator-scroll' event to Navigator. Fired when mousewheel/pinch events occur in the navigator (#310)
+* Added a navigatorMaintainSizeRatio option. If set to true, the navigator minimap resizes when the viewer element is resized (#310)
+* Added 'ABSOLUTE' as a navigatorPosition option, along with corresponding navigatorTop, navigatorLeft options. Allows the navigator minimap to be placed anywhere in the viewer (#310)
+* Enhanced the navigatorTop, navigatorLeft, navigatorHeight, and navigatorWidth options to allow a number for pixel units or a string for other element units (%, em, etc.) (#310)
* Additional enhancements for IIIF support (#315)
1.0.0:
diff --git a/src/control.js b/src/control.js
index d35776b9..c6010399 100644
--- a/src/control.js
+++ b/src/control.js
@@ -46,13 +46,15 @@
* @property {Number} TOP_RIGHT
* @property {Number} BOTTOM_LEFT
* @property {Number} BOTTOM_RIGHT
+ * @property {Number} ABSOLUTE
*/
$.ControlAnchor = {
NONE: 0,
TOP_LEFT: 1,
TOP_RIGHT: 2,
BOTTOM_RIGHT: 3,
- BOTTOM_LEFT: 4
+ BOTTOM_LEFT: 4,
+ ABSOLUTE: 5
};
/**
@@ -110,14 +112,30 @@ $.Control = function ( element, options, container ) {
* @member {Element} wrapper
* @memberof OpenSeadragon.Control#
*/
- this.wrapper = $.makeNeutralElement( "span" );
- this.wrapper.style.display = "inline-block";
- this.wrapper.appendChild( this.element );
+ if ( this.anchor == $.ControlAnchor.ABSOLUTE ) {
+ this.wrapper = $.makeNeutralElement( "div" );
+ this.wrapper.style.position = "absolute";
+ this.wrapper.style.top = typeof ( options.top ) == "number" ? ( options.top + 'px' ) : options.top;
+ this.wrapper.style.left = typeof ( options.left ) == "number" ? (options.left + 'px' ) : options.left;
+ this.wrapper.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height;
+ this.wrapper.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width;
+ this.wrapper.style.margin = "0px";
+ this.wrapper.style.padding = "0px";
- if ( this.anchor == $.ControlAnchor.NONE ) {
- // IE6 fix
- this.wrapper.style.width = this.wrapper.style.height = "100%";
+ this.element.style.position = "relative";
+ this.element.style.top = "0px";
+ this.element.style.left = "0px";
+ this.element.style.height = "100%";
+ this.element.style.width = "100%";
+ } else {
+ this.wrapper = $.makeNeutralElement( "span" );
+ this.wrapper.style.display = "inline-block";
+ if ( this.anchor == $.ControlAnchor.NONE ) {
+ // IE6 fix
+ this.wrapper.style.width = this.wrapper.style.height = "100%";
+ }
}
+ this.wrapper.appendChild( this.element );
if (options.attachToViewer ) {
if ( this.anchor == $.ControlAnchor.TOP_RIGHT ||
@@ -161,7 +179,7 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{
*/
setVisible: function( visible ) {
this.wrapper.style.display = visible ?
- "inline-block" :
+ ( this.anchor == $.ControlAnchor.ABSOLUTE ? 'block' : 'inline-block' ) :
"none";
},
diff --git a/src/controldock.js b/src/controldock.js
index 685418d4..183890c7 100644
--- a/src/controldock.js
+++ b/src/controldock.js
@@ -126,6 +126,11 @@
element.style.paddingLeft = "0px";
element.style.paddingTop = "0px";
break;
+ case $.ControlAnchor.ABSOLUTE:
+ div = this.container;
+ element.style.margin = "0px";
+ element.style.padding = "0px";
+ break;
default:
case $.ControlAnchor.NONE:
div = this.container;
diff --git a/src/navigator.js b/src/navigator.js
index f06944f9..ffb7102f 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -50,7 +50,8 @@
$.Navigator = function( options ){
var viewer = options.viewer,
- viewerSize = $.getElementSize( viewer.element),
+ viewerSize,
+ navigatorSize,
unneededElement;
//We may need to create a new element and id if they did not
@@ -73,6 +74,12 @@ $.Navigator = function( options ){
options.controlOptions.anchor = $.ControlAnchor.TOP_RIGHT;
} else if( 'TOP_LEFT' == options.position ){
options.controlOptions.anchor = $.ControlAnchor.TOP_LEFT;
+ } else if( 'ABSOLUTE' == options.position ){
+ options.controlOptions.anchor = $.ControlAnchor.ABSOLUTE;
+ options.controlOptions.top = options.top;
+ options.controlOptions.left = options.left;
+ options.controlOptions.height = options.height;
+ options.controlOptions.width = options.width;
}
}
@@ -99,12 +106,12 @@ $.Navigator = function( options ){
showSequenceControl: false,
immediateRender: true,
blendTime: 0,
- animationTime: 0
+ animationTime: 0,
+ autoResize: options.autoResize
});
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
- this.viewerSizeInPoints = viewer.viewport.deltaPointsFromPixels(viewerSize);
this.borderWidth = 2;
//At some browser magnification levels the display regions lines up correctly, but at some there appears to
//be a one pixel gap.
@@ -112,14 +119,16 @@ $.Navigator = function( options ){
this.totalBorderWidths = new $.Point(this.borderWidth*2, this.borderWidth*2).minus(this.fudge);
- (function( style, borderWidth ){
- style.margin = '0px';
- style.border = borderWidth + 'px solid #555';
- style.padding = '0px';
- style.background = '#000';
- style.opacity = 0.8;
- style.overflow = 'hidden';
- }( this.element.style, this.borderWidth));
+ if ( options.controlOptions.anchor != $.ControlAnchor.NONE ) {
+ (function( style, borderWidth ){
+ style.margin = '0px';
+ style.border = borderWidth + 'px solid #555';
+ style.padding = '0px';
+ style.background = '#000';
+ style.opacity = 0.8;
+ style.overflow = 'hidden';
+ }( this.element.style, this.borderWidth));
+ }
this.displayRegion = $.makeNeutralElement( "div" );
this.displayRegion.id = this.element.id + '-displayregion';
@@ -152,15 +161,11 @@ $.Navigator = function( options ){
this.element.innerTracker = new $.MouseTracker({
- element: this.element,
- dragHandler: $.delegate( this, onCanvasDrag ),
- clickHandler: $.delegate( this, onCanvasClick ),
- releaseHandler: $.delegate( this, onCanvasRelease ),
- scrollHandler: function(){
- //dont scroll the page up and down if the user is scrolling
- //in the navigator
- return false;
- }
+ element: this.element,
+ dragHandler: $.delegate( this, onCanvasDrag ),
+ clickHandler: $.delegate( this, onCanvasClick ),
+ releaseHandler: $.delegate( this, onCanvasRelease ),
+ scrollHandler: $.delegate( this, onCanvasScroll )
}).setTracking( true );
/*this.displayRegion.outerTracker = new $.MouseTracker({
@@ -178,14 +183,22 @@ $.Navigator = function( options ){
options.controlOptions
);
- if( options.width && options.height ){
- this.element.style.width = options.width + 'px';
- this.element.style.height = options.height + 'px';
- } else {
- this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
- this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
+ if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE && options.controlOptions.anchor != $.ControlAnchor.NONE ) {
+ 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 = ( viewerSize.y * options.sizeRatio ) + 'px';
+ this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
+ this.oldViewerSize = viewerSize;
+ }
+ navigatorSize = $.getElementSize( this.element );
+ this.elementArea = navigatorSize.x * navigatorSize.y;
}
+ this.oldContainerSize = new $.Point( 0, 0 );
+
$.Viewer.apply( this, [ options ] );
this.element.getElementsByTagName('form')[0].appendChild( this.displayRegion );
@@ -199,18 +212,71 @@ $.Navigator = function( options ){
$.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
/**
+ * Used to notify the navigator when its size has changed.
+ * Especially useful when {@link OpenSeadragon.Options}.navigatorAutoResize is set to false and the navigator is resizable.
* @function
*/
- update: function( viewport ){
+ updateSize: function () {
+ if ( this.viewport ) {
+ var containerSize = new $.Point(
+ (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
+ (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
+ );
+ if ( !containerSize.equals( this.oldContainerSize ) ) {
+ var oldBounds = this.viewport.getBounds();
+ var oldCenter = this.viewport.getCenter();
+ this.viewport.resize( containerSize, true );
+ var imageHeight = 1 / this.source.aspectRatio;
+ var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
+ var newHeight = oldBounds.height <= imageHeight ?
+ oldBounds.height : imageHeight;
+ var newBounds = new $.Rect(
+ oldCenter.x - ( newWidth / 2.0 ),
+ oldCenter.y - ( newHeight / 2.0 ),
+ newWidth,
+ newHeight
+ );
+ this.viewport.fitBounds( newBounds, true );
+ this.oldContainerSize = containerSize;
+ this.drawer.update();
+ }
+ }
+ },
- var bounds,
+ /**
+ * Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
+ * @function
+ * @param {OpenSeadragon.Viewport} The viewport this navigator is tracking.
+ */
+ update: function( viewport ) {
+
+ var viewerSize,
+ newWidth,
+ newHeight,
+ bounds,
topleft,
bottomright;
- if( viewport && this.viewport ){
+ viewerSize = $.getElementSize( this.viewer.element );
+ if ( !viewerSize.equals( this.oldViewerSize ) ) {
+ this.oldViewerSize = viewerSize;
+ if ( this.maintainSizeRatio ) {
+ newWidth = viewerSize.x * this.sizeRatio;
+ newHeight = viewerSize.y * this.sizeRatio;
+ }
+ else {
+ newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
+ newHeight = this.elementArea / newWidth;
+ }
+ this.element.style.width = newWidth + 'px';
+ this.element.style.height = newHeight + 'px';
+ this.updateSize();
+ }
+
+ if( viewport && this.viewport ) {
bounds = viewport.getBounds( true );
- topleft = this.viewport.pixelFromPoint( bounds.getTopLeft());
- bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.totalBorderWidths);
+ topleft = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
+ bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false ).minus( this.totalBorderWidths );
//update style for navigator-box
(function(style) {
@@ -229,7 +295,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
},
- open: function( source ){
+ open: function( source ) {
+ this.updateSize();
var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
if( source.tileSize > containerSize.x ||
source.tileSize > containerSize.y ){
@@ -256,21 +323,7 @@ function onCanvasClick( event ) {
dimensions;
if (! this.drag) {
if ( this.viewer.viewport ) {
- viewerPosition = this.viewport.deltaPointsFromPixels( event.position );
- dimensions = this.viewer.viewport.getBounds().getSize();
- newBounds = new $.Rect(
- viewerPosition.x - dimensions.x/2,
- viewerPosition.y - dimensions.y/2,
- dimensions.x,
- dimensions.y
- );
- if (this.viewer.source.aspectRatio > this.viewer.viewport.getAspectRatio()) {
- newBounds.y = newBounds.y - ((this.viewerSizeInPoints.y - (1/this.viewer.source.aspectRatio)) /2 );
- }
- else {
- newBounds.x = newBounds.x - ((this.viewerSizeInPoints.x -1) /2 );
- }
- this.viewer.viewport.fitBounds(newBounds);
+ this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
this.viewer.viewport.applyConstraints();
}
}
@@ -320,16 +373,30 @@ function onCanvasRelease( event ) {
* @function
*/
function onCanvasScroll( event ) {
- var factor;
- if ( this.viewer.viewport ) {
- factor = Math.pow( this.zoomPerScroll, event.scroll );
- this.viewer.viewport.zoomBy(
- factor,
- this.viewport.getCenter()
- );
- this.viewer.viewport.applyConstraints();
- }
- //cancels event
+ /**
+ * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#navigator} element (mouse wheel, touch pinch, etc.).
+ *
+ * @event navigator-scroll
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+ * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+ * @property {Number} scroll - The scroll delta for the event.
+ * @property {Boolean} shift - True if the shift key was pressed during this event.
+ * @property {Object} originalEvent - The original DOM event.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent( 'navigator-scroll', {
+ tracker: event.eventSource,
+ position: event.position,
+ scroll: event.scroll,
+ shift: event.shift,
+ originalEvent: event.originalEvent
+ });
+
+ //dont scroll the page up and down if the user is scrolling
+ //in the navigator
return false;
}
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 40af70aa..9ee18112 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -271,20 +271,38 @@
* Set to true to make the navigator minimap appear.
*
* @property {Boolean} [navigatorId=navigator-GENERATED DATE]
- * Set the ID of a div to hold the navigator minimap. If one is not specified,
- * one will be generated and placed on top of the main image
+ * The ID of a div to hold the navigator minimap.
+ * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored.
+ * If an ID is not specified, a div element will be generated and placed on top of the main image.
*
- * @property {Number} [navigatorHeight=null]
- * TODO: Implement this. Currently not used.
- *
- * @property {Number} [navigatorWidth=null]
- * TODO: Implement this. Currently not used.
- *
- * @property {Number} [navigatorPosition=null]
- * TODO: Implement this. Currently not used.
+ * @property {String} [navigatorPosition='TOP_RIGHT']
+ * Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.
+ * If 'ABSOLUTE' is specified, then navigatorTop|Left|Height|Width determines the size and position of the navigator minimap in the viewer, and navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
+ * For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the navigatorSizeRatio or navigatorHeight|Width values determine the size of the navigator minimap.
*
* @property {Number} [navigatorSizeRatio=0.2]
- * Ratio of navigator size to viewer size.
+ * Ratio of navigator size to viewer size. Ignored if navigatorHeight|Width are specified.
+ *
+ * @property {Boolean} [navigatorMaintainSizeRatio=false]
+ * If true, the navigator minimap is resized (using navigatorSizeRatio) when the viewer size changes.
+ *
+ * @property {Number|String} [navigatorTop=null]
+ * Specifies the location of the navigator minimap (see navigatorPosition).
+ *
+ * @property {Number|String} [navigatorLeft=null]
+ * Specifies the location of the navigator minimap (see navigatorPosition).
+ *
+ * @property {Number|String} [navigatorHeight=null]
+ * Specifies the size of the navigator minimap (see navigatorPosition).
+ * If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
+ *
+ * @property {Number|String} [navigatorWidth=null]
+ * Specifies the size of the navigator minimap (see navigatorPosition).
+ * If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
+ *
+ * @property {Boolean} [navigatorAutoResize=true]
+ * Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
+ * Setting to false can also improve performance when the navigator is configured to a fixed size.
*
* @property {Number} [controlsFadeDelay=2000]
* The number of milliseconds to wait once the user has stopped interacting
@@ -713,12 +731,16 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY
//VIEWPORT NAVIGATOR SETTINGS
- showNavigator: false,
- navigatorId: null,
- navigatorHeight: null,
- navigatorWidth: null,
- navigatorPosition: null,
- navigatorSizeRatio: 0.2,
+ showNavigator: false,
+ navigatorId: null,
+ navigatorPosition: null,
+ navigatorSizeRatio: 0.2,
+ navigatorMaintainSizeRatio: false,
+ navigatorTop: null,
+ navigatorLeft: null,
+ navigatorHeight: null,
+ navigatorWidth: null,
+ navigatorAutoResize: true,
// INITIAL ROTATION
degrees: 0,
diff --git a/src/viewer.js b/src/viewer.js
index 8894a8a4..2139678e 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -910,6 +910,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
}
+ if ( this.navigator && this.viewport ) {
+ this.navigator.update( this.viewport );
+ }
+
/**
* Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
*
@@ -991,6 +995,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
_this.element.style.height = _this.fullPageStyleHeight;
}
}
+ if ( _this.navigator && _this.viewport ) {
+ _this.navigator.update( _this.viewport );
+ }
/**
* Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
*
@@ -1469,16 +1476,20 @@ function openTileSource( viewer, source ) {
_this.navigator.open( source );
} else {
_this.navigator = new $.Navigator({
- id: _this.navigatorId,
- position: _this.navigatorPosition,
- sizeRatio: _this.navigatorSizeRatio,
- height: _this.navigatorHeight,
- width: _this.navigatorWidth,
- tileSources: source,
- tileHost: _this.tileHost,
- prefixUrl: _this.prefixUrl,
- overlays: _this.overlays,
- viewer: _this
+ id: _this.navigatorId,
+ position: _this.navigatorPosition,
+ sizeRatio: _this.navigatorSizeRatio,
+ maintainSizeRatio: _this.navigatorMaintainSizeRatio,
+ top: _this.navigatorTop,
+ left: _this.navigatorLeft,
+ width: _this.navigatorWidth,
+ height: _this.navigatorHeight,
+ autoResize: _this.navigatorAutoResize,
+ tileSources: source,
+ tileHost: _this.tileHost,
+ prefixUrl: _this.prefixUrl,
+ overlays: _this.overlays,
+ viewer: _this
});
}
}
diff --git a/test/navigator.js b/test/navigator.js
index f63c8cd0..95631a91 100644
--- a/test/navigator.js
+++ b/test/navigator.js
@@ -3,12 +3,11 @@
QUnit.config.autostart = false;
(function () {
- var viewer,
+ var debug = false,
+ viewer,
displayRegion,
navigator,
- navigatorAspectRatio,
- leftScalingFactor,
- maxHeightFactor,
+ navigatorScaleFactor,
contentStartFromLeft,
contentStartFromTop,
displayRegionWidth,
@@ -42,9 +41,7 @@ QUnit.config.autostart = false;
}
displayRegion = null;
navigator = null;
- navigatorAspectRatio = null;
- leftScalingFactor = null;
- maxHeightFactor = null;
+ navigatorScaleFactor = null;
contentStartFromLeft = null;
contentStartFromTop = null;
displayRegionWidth = null;
@@ -55,8 +52,27 @@ QUnit.config.autostart = false;
var assessNavigatorLocation = function (expectedX, expectedY) {
var navigator = $(".navigator");
- Util.assessNumericValue(expectedX, navigator.offset().left, 4, ' Navigator x position');
- Util.assessNumericValue(expectedY, navigator.offset().top, 4, ' Navigator y position');
+ Util.assessNumericValue(expectedX, navigator.offset().left, 10, ' Navigator x Position');
+ Util.assessNumericValue(expectedY, navigator.offset().top, 10, ' Navigator y Position');
+ };
+
+ var assessNavigatorSize = function (expectedWidth, expectedHeight, msg) {
+ var navigator = $(".navigator");
+
+ Util.assessNumericValue(expectedWidth, navigator.width(), 2, ' Navigator Width ' + (msg ? msg : ''));
+ Util.assessNumericValue(expectedHeight, navigator.height(), 2, ' Navigator Height ' + (msg ? msg : ''));
+ };
+
+ var assessNavigatorAspectRatio = function (expectedAspectRatio, variance, msg) {
+ var navigator = $(".navigator");
+
+ Util.assessNumericValue(expectedAspectRatio, navigator.width() / navigator.height(), variance, ' Navigator Aspect Ratio ' + (msg ? msg : ''));
+ };
+
+ var assessNavigatorArea = function (expectedArea, msg) {
+ var navigator = $(".navigator");
+
+ Util.assessNumericValue(expectedArea, navigator.width() * navigator.height(), Math.max(navigator.width(), navigator.height()), ' Navigator Area ' + (msg ? msg : ''));
};
var navigatorRegionBoundsInPoints = function () {
@@ -65,46 +81,47 @@ QUnit.config.autostart = false;
expectedDisplayRegionHeight,
expectedDisplayRegionXLocation,
expectedDisplayRegionYLocation;
- if (navigator === null) {
- maxHeightFactor = 1;
- navigator = $(".navigator");
- navigatorAspectRatio = navigator.height() / navigator.width();
- leftScalingFactor = navigatorAspectRatio * viewer.source.aspectRatio;
- if (viewer.source.aspectRatio < 1) {
- if (viewer.source.aspectRatio < navigatorAspectRatio) {
- maxHeightFactor = viewer.source.aspectRatio * navigatorAspectRatio;
- }
- else {
- maxHeightFactor = viewer.source.aspectRatio;
- }
- contentStartFromLeft = ((1 / maxHeightFactor) - 1) / 2 * maxHeightFactor * navigator.width();
- contentStartFromTop = 0;
- }
- else {
- if (viewer.source.aspectRatio < navigatorAspectRatio) {
- contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
- }
- else {
- contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
- leftScalingFactor = 1;
- }
- }
- displayRegionWidth = navigator.width() - 2 * contentStartFromLeft;
- displayRegionHeight = navigator.height() - 2 * contentStartFromTop;
- }
- expectedDisplayRegionWidth = navigator.width() / viewer.viewport.getZoom() * maxHeightFactor;
- expectedDisplayRegionHeight = navigator.height() / viewer.viewport.getZoom() * maxHeightFactor;
- expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * maxHeightFactor * navigator.width() + contentStartFromLeft;
- expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * leftScalingFactor * navigator.width() + contentStartFromTop;
+ if (navigator === null) {
+ navigator = $(".navigator");
+ navigatorScaleFactor = Math.min(navigator.width() / viewer.viewport.contentSize.x, navigator.height() / viewer.viewport.contentSize.y);
+ displayRegionWidth = viewer.viewport.contentSize.x * navigatorScaleFactor;
+ displayRegionHeight = viewer.viewport.contentSize.y * navigatorScaleFactor;
+ contentStartFromLeft = (navigator.width() - displayRegionWidth) / 2;
+ contentStartFromTop = (navigator.height() - displayRegionHeight) / 2;
+ }
+ expectedDisplayRegionWidth = viewer.viewport.getBounds().width * displayRegionWidth;
+ expectedDisplayRegionHeight = viewer.viewport.getBounds().height * displayRegionHeight * viewer.source.aspectRatio;
+ expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * displayRegionWidth + contentStartFromLeft;
+ expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * displayRegionHeight * viewer.source.aspectRatio + contentStartFromTop;
regionBoundsInPoints = new OpenSeadragon.Rect(expectedDisplayRegionXLocation, expectedDisplayRegionYLocation, expectedDisplayRegionWidth, expectedDisplayRegionHeight);
+ if (debug) {
+ console.log('Image width: ' + viewer.viewport.contentSize.x + '\n' +
+ 'Image height: ' + viewer.viewport.contentSize.y + '\n' +
+ 'navigator.width(): ' + navigator.width() + '\n' +
+ 'navigator.height(): ' + navigator.height() + '\n' +
+ 'navigatorScaleFactor: ' + navigatorScaleFactor + '\n' +
+ 'contentStartFromLeft: ' + contentStartFromLeft + '\n' +
+ 'contentStartFromTop: ' + contentStartFromTop + '\n' +
+ 'displayRegionWidth: ' + displayRegionWidth + '\n' +
+ 'displayRegionHeight: ' + displayRegionHeight + '\n' +
+ 'expectedDisplayRegionXLocation: ' + expectedDisplayRegionXLocation + '\n' +
+ 'expectedDisplayRegionYLocation: ' + expectedDisplayRegionYLocation + '\n' +
+ 'expectedDisplayRegionWidth: ' + expectedDisplayRegionWidth + '\n' +
+ 'expectedDisplayRegionHeight: ' + expectedDisplayRegionHeight + '\n'
+ );
+ }
+
return regionBoundsInPoints;
};
var assessDisplayRegion = function (status) {
+ if (debug) {
+ console.log(status);
+ }
var expectedBounds = navigatorRegionBoundsInPoints();
Util.assessNumericValue(expectedBounds.width, displayRegion.width() + viewer.navigator.totalBorderWidths.x, 2, status + ' Width synchronization');
Util.assessNumericValue(expectedBounds.height, displayRegion.height() + viewer.navigator.totalBorderWidths.y, 2, status + ' Height synchronization');
@@ -259,34 +276,53 @@ QUnit.config.autostart = false;
simulateNavigatorDrag(viewer.navigator, delta.x * displayRegionWidth, delta.y * displayRegionHeight);
};
+ var resizeElement = function ($element, width, height) {
+ $element.width(width);
+ $element.height(height);
+ };
+
var assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) {
var navigatorOperationScenarios = [
- {interactionOperation:clickOnNavigator("TOPRIGHT"),
- assessmentOperation:assessViewerInCorner("TOPRIGHT"),
- assessmentMessage:"After click on navigator on top right" },
- {interactionOperation:dragNavigatorBackToCenter,
- assessmentOperation:assessViewerInCenter,
- assessmentMessage:"After drag on navigator from top right" },
- {interactionOperation:clickOnNavigator("BOTTOMLEFT"),
- assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
- assessmentMessage:"After click on navigator on bottom left" },
- {interactionOperation:dragNavigatorBackToCenter,
- assessmentOperation:assessViewerInCenter,
- assessmentMessage:"After drag on navigator from bottom left" },
- {interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
- assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
- assessmentMessage:"After click on navigator on bottom right" },
- {interactionOperation:dragNavigatorBackToCenter,
- assessmentOperation:assessViewerInCenter,
- assessmentMessage:"After drag on navigator from bottom right" },
- {interactionOperation:clickOnNavigator("TOPLEFT"),
- assessmentOperation:assessViewerInCorner("TOPLEFT"),
- assessmentMessage:"After click on navigator on top left" },
- {interactionOperation:dragNavigatorBackToCenter,
- assessmentOperation:assessViewerInCenter,
- assessmentMessage:"After drag on navigator from top left" }
- ],
- autoFadeWaitTime = 100;
+ {interactionOperation:clickOnNavigator("TOPRIGHT"),
+ assessmentOperation:assessViewerInCorner("TOPRIGHT"),
+ assessmentMessage:"After click on navigator on top right" },
+ {interactionOperation:dragNavigatorBackToCenter,
+ assessmentOperation:assessViewerInCenter,
+ assessmentMessage:"After drag on navigator from top right" },
+ {interactionOperation:clickOnNavigator("BOTTOMLEFT"),
+ assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
+ assessmentMessage:"After click on navigator on bottom left" },
+ {interactionOperation:dragNavigatorBackToCenter,
+ assessmentOperation:assessViewerInCenter,
+ assessmentMessage:"After drag on navigator from bottom left" },
+ {interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
+ assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
+ assessmentMessage:"After click on navigator on bottom right" },
+ {interactionOperation:dragNavigatorBackToCenter,
+ assessmentOperation:assessViewerInCenter,
+ assessmentMessage:"After drag on navigator from bottom right" },
+ {interactionOperation:clickOnNavigator("TOPLEFT"),
+ assessmentOperation:assessViewerInCorner("TOPLEFT"),
+ assessmentMessage:"After click on navigator on top left" },
+ {interactionOperation:dragNavigatorBackToCenter,
+ assessmentOperation:assessViewerInCenter,
+ assessmentMessage:"After drag on navigator from top left" }
+ ],
+ viewerResizeScenarios = [
+ {resizeFactorX:0.5, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (50%, 100%)"},
+ {resizeFactorX:1.0, resizeFactorY:0.5, assessmentMessage:"After Viewer Resize (100%, 50%)"},
+ {resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (100%, 100%)"}
+ ],
+ navigatorResizeScenarios = [
+ {resizeFactorX:0.75, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (75%, 100%)"},
+ {resizeFactorX:1.0, resizeFactorY:0.75, assessmentMessage:"After Navigator Resize (100%, 75%)"},
+ {resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (100%, 100%)"}
+ ],
+ autoFadeWaitTime = 100,
+ navigatorElement = null,
+ viewerElement = null,
+ viewerOriginalSize = null,
+ navigatorOriginalSize = null;
seadragonProperties.visibilityRatio = 1;
viewer = OpenSeadragon(seadragonProperties);
@@ -330,38 +366,112 @@ QUnit.config.autostart = false;
waitForViewer(assessAfterDragOnViewer);
};
+ var assessAfterResizeNavigator = function () {
+ viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
+ waitForViewer(assessAfterZoomOnViewer);
+ };
+
+ var assessNavigatorResizeAndTakeNextStep = function (step) {
+ return function () {
+ var nextStep = step + 1;
+ assessNavigatorSize(navigatorOriginalSize.x * navigatorResizeScenarios[step].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[step].resizeFactorY, navigatorResizeScenarios[step].assessmentMessage);
+ assessDisplayRegion(navigatorResizeScenarios[step].assessmentMessage);
+ if (step === viewerResizeScenarios.length - 1) {
+ assessAfterResizeNavigator();
+ }
+ else {
+ resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[nextStep].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[nextStep].resizeFactorY);
+ waitForViewer(assessNavigatorResizeAndTakeNextStep(nextStep));
+ }
+ };
+ };
+
+ var assessViewerResizeAndTakeNextStep = function (step) {
+ return function () {
+ var nextStep = step + 1;
+ if (seadragonProperties.navigatorId) {
+ // Navigator hosted in outside element...size shouldn't change
+ assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+ }
+ else {
+ // Navigator hosted in viewer
+ if (seadragonProperties.navigatorPosition && seadragonProperties.navigatorPosition == 'ABSOLUTE') {
+ // Navigator positioned 'ABSOLUTE'...size shouldn't change
+ assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+ }
+ else {
+ // Navigator positioned 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', or 'BOTTOM_RIGHT'
+ if (seadragonProperties.navigatorMaintainSizeRatio) {
+ // Navigator should maintain aspect ratio and size proportioned to viewer size
+ assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.0001, viewerResizeScenarios[step].assessmentMessage);
+ assessNavigatorSize(viewerElement.width() * seadragonProperties.navigatorSizeRatio, viewerElement.height() * seadragonProperties.navigatorSizeRatio, viewerResizeScenarios[step].assessmentMessage);
+ }
+ else {
+ // Navigator should maintain aspect ratio and area
+ // Variances are loosened up here, since 1 pixel rounding difference in resizing to maintain area
+ // can cause a relatively large difference in area and aspect ratio.
+ assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.1, viewerResizeScenarios[step].assessmentMessage);
+ assessNavigatorArea(navigatorOriginalSize.x * navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+ }
+ }
+ }
+
+ if (step === viewerResizeScenarios.length - 1) {
+ if (seadragonProperties.navigatorId) {
+ // Navigator hosted in outside element...run navigator resize tests
+ resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[0].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[0].resizeFactorY);
+ waitForViewer(assessNavigatorResizeAndTakeNextStep(0));
+ }
+ else {
+ // Navigator hosted in viewer...skip navigator resize tests
+ assessAfterResizeNavigator();
+ }
+ }
+ else {
+ resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[nextStep].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[nextStep].resizeFactorY);
+ waitForViewer(assessViewerResizeAndTakeNextStep(nextStep));
+ }
+ };
+ };
+
var captureInitialStateThenAct = function () {
assessDisplayRegion("After image load");
testProperties.determineExpectationsAndAssessNavigatorLocation(seadragonProperties, testProperties);
- viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
- waitForViewer(assessAfterZoomOnViewer);
+ viewerOriginalSize = new OpenSeadragon.Point(viewerElement.width(), viewerElement.height());
+ navigatorOriginalSize = new OpenSeadragon.Point(navigatorElement.width(), navigatorElement.height());
+
+ resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[0].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[0].resizeFactorY);
+ waitForViewer(assessViewerResizeAndTakeNextStep(0));
};
var assessAutoFadeTriggered = function () {
- ok($(testProperties.navigatorLocator).parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
+ ok(navigatorElement.parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
waitForViewer(captureInitialStateThenAct);
};
var assessAutoFadeDisabled = function () {
- ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
+ ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
waitForViewer(captureInitialStateThenAct);
};
var openHandler = function () {
viewer.removeHandler('open', openHandler);
+ navigatorElement = $(testProperties.navigatorLocator);
+ viewerElement = $("#" + seadragonProperties.id);
+ //TODO This should be testProperties.testAutoFade, but test hangs. Fix this!
if (!testProperties.testAutohide) {
waitForViewer(captureInitialStateThenAct);
}
else {
- ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be visible initially");
+ ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be visible initially");
var event = {
clientX:1,
clientY:1
};
- $("#" + seadragonProperties.id).simulate('blur', event);
+ viewerElement.simulate('blur', event);
if (testProperties.expectedAutoFade) {
setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
@@ -379,6 +489,8 @@ QUnit.config.autostart = false;
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/wide.dzi',
showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: false,
animationTime:0
},
{
@@ -390,11 +502,192 @@ QUnit.config.autostart = false;
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top);
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
- asyncTest('CustomNavigatorLocationWithWideImageWideViewer', function () {
+ asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
+ assessNavigatorViewerPlacement({
+ id:'wideexample',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/tall.dzi',
+ showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: false,
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+ mainViewerElement.offset().top);
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+ }
+ });
+ });
+
+ asyncTest('TopLeftNavigatorLocation', function () {
+ assessNavigatorViewerPlacement({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigationControl: false,
+ showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: false,
+ navigatorPosition: 'TOP_LEFT',
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left,
+ mainViewerElement.offset().top);
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+ }
+ });
+ });
+
+ asyncTest('TopRightNavigatorLocation', function () {
+ assessNavigatorViewerPlacement({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigationControl: false,
+ showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: true,
+ navigatorPosition: 'TOP_RIGHT',
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+ mainViewerElement.offset().top);
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+ }
+ });
+ });
+
+ asyncTest('BottomLeftNavigatorLocation', function () {
+ assessNavigatorViewerPlacement({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigationControl: false,
+ showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: false,
+ navigatorPosition: 'BOTTOM_LEFT',
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left,
+ mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+ }
+ });
+ });
+
+ asyncTest('BottomRightNavigatorLocation', function () {
+ assessNavigatorViewerPlacement({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigationControl: false,
+ showNavigator:true,
+ navigatorSizeRatio:0.2,
+ navigatorMaintainSizeRatio: false,
+ navigatorPosition: 'BOTTOM_RIGHT',
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+ mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
+ assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+ assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+ }
+ });
+ });
+
+ asyncTest('AbsoluteNavigatorLocation', function () {
+ assessNavigatorViewerPlacement({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigationControl: false,
+ showNavigator:true,
+ navigatorPosition: 'ABSOLUTE',
+ navigatorTop: 10,
+ navigatorLeft: 10,
+ navigatorHeight: 150,
+ navigatorWidth: 175,
+ animationTime:0,
+ controlsFadeDelay:0,
+ controlsFadeLength:1
+ },
+ {
+ displayRegionLocator:'.navigator .displayregion',
+ navigatorLocator:'.navigator',
+ testAutoFade: true,
+ expectedAutoFade: true,
+ determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+ var mainViewerElement = $("#" + seadragonProperties.id),
+ navigatorElement = $(testProperties.navigatorLocator);
+ assessNavigatorLocation(mainViewerElement.offset().left + seadragonProperties.navigatorLeft,
+ mainViewerElement.offset().top + seadragonProperties.navigatorTop);
+ assessNavigatorSize(seadragonProperties.navigatorWidth, seadragonProperties.navigatorHeight);
+ }
+ });
+ });
+
+ asyncTest('CustomNavigatorElementWithWideImageWideViewer', function () {
assessNavigatorViewerPlacement({
id:'wideexample',
navigatorId:'exampleNavigator',
@@ -416,8 +709,21 @@ QUnit.config.autostart = false;
});
});
- asyncTest('CustomDialogNavigatorLocationWithTallImageTallViewer', function () {
- $('#exampleNavigator').dialog();
+ asyncTest('CustomDialogNavigatorElementWithTallImageTallViewer', function () {
+ $('#exampleNavigator').dialog({ width: 150,
+ height:100,
+ open: function (event, ui) {
+ $('#exampleNavigator').width(150);
+ $('#exampleNavigator').height(100);
+ }
+ //TODO Use this in testing resizable navigator
+ //resize: function (event, ui) {
+ // //ui.size.width
+ // //ui.size.height
+ // //$('#exampleNavigator').dialog("option", "width", 200);
+ // //$('#exampleNavigator').dialog("option", "width", 200);
+ //}
+ });
assessNavigatorViewerPlacement({
id:'tallexample',
navigatorId:'exampleNavigator',
@@ -440,30 +746,7 @@ QUnit.config.autostart = false;
var jqueryDialog = $(testProperties.navigatorLocator);
assessNavigatorLocation(jqueryDialog.offset().left,
jqueryDialog.offset().top);
- }
- });
- });
-
- asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
- assessNavigatorViewerPlacement({
- id:'wideexample',
- prefixUrl:'/build/openseadragon/images/',
- tileSources:'/test/data/tall.dzi',
- showNavigator:true,
- animationTime:0,
- controlsFadeDelay:0,
- controlsFadeLength:1
- },
- {
- displayRegionLocator:'.navigator .displayregion',
- navigatorLocator:'.navigator',
- testAutoFade: true,
- expectedAutoFade: true,
- determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
- var mainViewerElement = $("#" + seadragonProperties.id),
- navigatorElement = $(testProperties.navigatorLocator);
- assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
- mainViewerElement.offset().top);
+ assessNavigatorSize(jqueryDialog.width(), jqueryDialog.height());
}
});
});
diff --git a/test/test.css b/test/test.css
index eb651b16..88dca730 100644
--- a/test/test.css
+++ b/test/test.css
@@ -3,6 +3,11 @@
width: 500px;
}
+#exampleNavigator {
+ height: 100px;
+ width: 150px;
+}
+
#wideexample {
height: 300px;
width: 700px;