diff --git a/src/control.js b/src/control.js index 3188f54a..6117ea52 100644 --- a/src/control.js +++ b/src/control.js @@ -53,21 +53,34 @@ $.ControlAnchor = { * to interact with the zoomable interface. Any control can be anchored to any * element. * @class - * @param {Element} element - the contol element to be anchored in the container. - * @param {OpenSeadragon.ControlAnchor} anchor - the location to anchor at. + * @param {Element} element - the control element to be anchored in the container. + * @param {Object } options - All required and optional settings for configuring a control element. + * @param {OpenSeadragon.ControlAnchor} [options.anchor=OpenSeadragon.ControlAnchor.NONE] - the position of the control + * relative to the container. + * @param {Boolean} [options.attachToViewer=true] - Whether the control should be added directly to the viewer, or + * directly to the container + * @param {Boolean} [options.autoFade=true] - Whether the control should have the autofade behavior * @param {Element} container - the element to control will be anchored too. - * - * @property {Element} element - the element providing the user interface with + * + * @property {Element} element - the element providing the user interface with * some type of control. Eg a zoom-in button * @property {OpenSeadragon.ControlAnchor} anchor - the position of the control * relative to the container. - * @property {Element} container - the element within with the control is + * @property {Boolean} autoFade - Whether the control should have the autofade behavior + * @property {Element} container - the element within with the control is * positioned. - * @property {Element} wrapper - a nuetral element surrounding the control + * @property {Element} wrapper - a neutral element surrounding the control * element. */ $.Control = function ( element, options, container ) { var parent = element.parentNode; + if (typeof options === 'number') + { + $.console.error("Passing an anchor directly into the OpenSeadragon.Control constructor is deprecated; " + + "please use an options object instead. " + + "Support for this deprecated variant is scheduled for removal in December 2013"); + options = {anchor: options}; + } options.attachToViewer = (typeof options.attachToViewer === 'undefined') ? true : options.attachToViewer; this.autoFade = (typeof options.autoFade === 'undefined') ? true : options.autoFade; this.element = element; diff --git a/src/navigator.js b/src/navigator.js index c09566f8..833b916e 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -138,6 +138,7 @@ $.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(){ @@ -147,16 +148,6 @@ $.Navigator = function( options ){ } }).setTracking( true ); - this.displayRegion.innerTracker = new $.MouseTracker({ - element: this.displayRegion, - clickTimeThreshold: this.clickTimeThreshold, - clickDistThreshold: this.clickDistThreshold, - - dragHandler: $.delegate( this, onCanvasDrag ), - releaseHandler: $.delegate( this, onCanvasRelease ), - scrollHandler: $.delegate( this, onCanvasScroll ) - }).setTracking( true ); // default state - /*this.displayRegion.outerTracker = new $.MouseTracker({ element: this.container, clickTimeThreshold: this.clickTimeThreshold, diff --git a/src/openseadragon.js b/src/openseadragon.js index ee5e0dac..8e3b41be 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -208,6 +208,13 @@ * @param {Boolean} [options.showNavigationControl=true] * Set to false to prevent the appearance of the default navigation controls. * + * @param {Boolean} [options.showNavigator=false] + * Set to true to make the navigator minimap appear. + * + * @param {Boolean} [options.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 + * * @param {Number} [options.controlsFadeDelay=2000] * The number of milliseconds to wait once the user has stopped interacting * with the interface before begining to fade the controls. Assumes @@ -523,7 +530,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY //VIEWPORT NAVIGATOR SETTINGS - showNavigator: true, //promoted to default in 0.9.64 + showNavigator: false, navigatorId: null, navigatorHeight: null, navigatorWidth: null, diff --git a/src/viewer.js b/src/viewer.js index 84588565..624431e4 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -236,6 +236,7 @@ $.Viewer = function( options ) { style.position = "absolute"; style.top = "0px"; style.left = "0px"; + style.resize = "none"; }( this.keyboardCommandArea.style )); this.container.insertBefore( this.canvas, this.container.firstChild ); diff --git a/test/demo/basic.html b/test/demo/basic.html index 80a48d0d..b9a02aef 100644 --- a/test/demo/basic.html +++ b/test/demo/basic.html @@ -23,7 +23,8 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - tileSources: "/test/data/testpattern.dzi" + tileSources: "../data/testpattern.dzi", + showNavigator:true }); diff --git a/test/demo/navigatorcustomlocationdemo.html b/test/demo/navigatorcustomlocationdemo.html deleted file mode 100644 index a8de7297..00000000 --- a/test/demo/navigatorcustomlocationdemo.html +++ /dev/null @@ -1,48 +0,0 @@ - - - OpenSeadragon Navigator in a custom location Demo - - - - - -
- Simple demo page to show how to put the navigator in a custom location -
-
- - - - - diff --git a/test/demo/navigatorjquerydemo.html b/test/demo/navigatorjquerydemo.html deleted file mode 100644 index d37a68b3..00000000 --- a/test/demo/navigatorjquerydemo.html +++ /dev/null @@ -1,55 +0,0 @@ - - - OpenSeadragon Navigator in a JQuery UI Dialog Demo - - - - - - - - -
- Simple demo page to show how to put the navigator in a moveable JQuery UI dialog. -
-
- - - - - diff --git a/test/navigator.js b/test/navigator.js index e876950a..bb4c06e3 100644 --- a/test/navigator.js +++ b/test/navigator.js @@ -10,12 +10,19 @@ QUnit.config.autostart = false; contentStartFromLeft, contentStartFromTop, displayRegionWidth, - displayRegionHeight; + displayRegionHeight, + topNavigatorClickAdjustment; module("navigator", { setup:function () { Util.resetDom(); resetTestVariables(); + $(document).scrollTop(0); + $(document).scrollLeft(0); + }, + teardown:function () { + Util.resetDom(); + resetTestVariables(); } }); @@ -36,6 +43,7 @@ QUnit.config.autostart = false; contentStartFromTop = null; displayRegionWidth = null; displayRegionHeight = null; + topNavigatorClickAdjustment = 0; }; var assessNavigatorLocation = function (expectedX, expectedY) { @@ -150,6 +158,7 @@ QUnit.config.autostart = false; }(); var simulateNavigatorClick = function (viewer, locationX, locationY) { + //Assumes that the page has not been scrolled from the top or left var $canvas = $(viewer.element).find('.openseadragon-canvas'), offset = $canvas.offset(), event = { @@ -215,11 +224,11 @@ QUnit.config.autostart = false; yPos; if (theContentCorner === "TOPLEFT") { xPos = contentStartFromLeft; - yPos = contentStartFromTop; + yPos = contentStartFromTop + topNavigatorClickAdjustment; } else if (theContentCorner === "TOPRIGHT") { xPos = contentStartFromLeft + displayRegionWidth; - yPos = contentStartFromTop; + yPos = contentStartFromTop+ topNavigatorClickAdjustment; } else if (theContentCorner === "BOTTOMRIGHT") { xPos = contentStartFromLeft + displayRegionWidth; @@ -271,11 +280,16 @@ QUnit.config.autostart = false; assessmentOperation:assessViewerInCenter, assessmentMessage:"After drag on navigator from top left" } ], - autoHideWaitTime = 7500; + autoFadeWaitTime = 100; seadragonProperties.visibilityRatio = 1; viewer = OpenSeadragon(seadragonProperties); + if ($.isNumeric(testProperties.topNavigatorClickAdjustment)) + { + topNavigatorClickAdjustment = testProperties.topNavigatorClickAdjustment; + } + var assessNavigatorOperationAndTakeNextStep = function (step) { return function () { var nextStep = step + 1; @@ -291,12 +305,18 @@ QUnit.config.autostart = false; }; }; - var assessAfterDragOnViewer = function () { - assessDisplayRegion("After pan"); + var assessAfterSnapback = function () { + assessDisplayRegion("After snapback"); navigatorOperationScenarios[0].interactionOperation(); waitForViewer(assessNavigatorOperationAndTakeNextStep(0)); }; + var assessAfterDragOnViewer = function () { + assessDisplayRegion("After pan"); + viewer.viewport.applyConstraints(); + waitForViewer(assessAfterSnapback); + }; + var assessAfterZoomOnViewer = function () { var target = new OpenSeadragon.Point(0.4, 0.4); assessDisplayRegion("After image zoom"); @@ -313,12 +333,12 @@ QUnit.config.autostart = false; waitForViewer(assessAfterZoomOnViewer); }; - var assessAutohideTriggered = function () { - ok($(testProperties.navigatorLocator).parent().css("opacity") == 0, "Expecting navigator to be autohide when in the default location"); + var assessAutoFadeTriggered = function () { + ok($(testProperties.navigatorLocator).parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location"); waitForViewer(captureInitialStateThenAct); }; - var assessAutohideDisabled = function () { + var assessAutoFadeDisabled = function () { ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location"); waitForViewer(captureInitialStateThenAct); }; @@ -334,12 +354,12 @@ QUnit.config.autostart = false; clientX:1, clientY:1 }; - var body = $("body").simulate('mouseover', event); - if (testProperties.expectedAutoHide) { - setTimeout(assessAutohideTriggered,autoHideWaitTime); + mainViewerElement.simulate('blur', event); + if (testProperties.expectedAutoFade) { + setTimeout(assessAutoFadeTriggered,autoFadeWaitTime); } else { - setTimeout(assessAutohideDisabled,autoHideWaitTime); + setTimeout(assessAutoFadeDisabled,autoFadeWaitTime); } } }; @@ -351,13 +371,13 @@ QUnit.config.autostart = false; id:'tallexample', prefixUrl:'/build/openseadragon/images/', tileSources:'/test/data/wide.dzi', - showNavigator:true + showNavigator:true, + animationTime:0 }, { displayRegionLocator:'.navigator .displayregion', navigatorLocator:'.navigator', - testAutohide: false, - expectedAutoHide: false, + testAutoFade: false, determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) { var mainViewerElement = $("#" + seadragonProperties.id), navigatorElement = $(testProperties.navigatorLocator); @@ -373,13 +393,13 @@ QUnit.config.autostart = false; navigatorId:'exampleNavigator', prefixUrl:'/build/openseadragon/images/', tileSources:'/test/data/wide.dzi', - showNavigator:true + showNavigator:true, + animationTime:0 }, { displayRegionLocator:'#exampleNavigator .displayregion', navigatorLocator:'#exampleNavigator', - testAutohide: false, - expectedAutoHide: true, + testAutoFade: false, determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) { var mainViewerElement = $("#" + seadragonProperties.id), navigatorViewerElement = $("#" + seadragonProperties.navigatorId); @@ -396,13 +416,19 @@ QUnit.config.autostart = false; navigatorId:'exampleNavigator', prefixUrl:'/build/openseadragon/images/', tileSources:'/test/data/tall.dzi', - showNavigator:true + showNavigator:true, + animationTime:0, + controlsFadeDelay:0, + controlsFadeLength:1 }, { displayRegionLocator:'#exampleNavigator .displayregion', navigatorLocator:'#exampleNavigator', - testAutohide: true, - expectedAutoHide: false, + testAutoFade: true, + expectedAutoFade: false, + //On Firefox at some screen size/resolution/magnification combinations, there is an issue with the + //simulated click. This property is a work around for that problem + topNavigatorClickAdjustment: 15, determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) { var jqueryDialog = $(testProperties.navigatorLocator); assessNavigatorLocation(jqueryDialog.offset().left, @@ -416,13 +442,16 @@ QUnit.config.autostart = false; id:'wideexample', prefixUrl:'/build/openseadragon/images/', tileSources:'/test/data/tall.dzi', - showNavigator:true + showNavigator:true, + animationTime:0, + controlsFadeDelay:0, + controlsFadeLength:1 }, { displayRegionLocator:'.navigator .displayregion', navigatorLocator:'.navigator', - testAutohide: true, - expectedAutoHide: true, + testAutoFade: true, + expectedAutoFade: true, determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) { var mainViewerElement = $("#" + seadragonProperties.id), navigatorElement = $(testProperties.navigatorLocator);