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

Merge pull request #121 from houseofyin/issue37-navigator

Browse Source 
Issue37 navigator / Issue101 navigator follow-up / Issue102 navigator default
This commit is contained in:
iangilman 2013-06-13 09:39:27 -07:00
commit f412d07237
8 changed files with 85 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/control.js
View File

@ -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;

11
src/navigator.js
View File

@ -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,

9
src/openseadragon.js
View File

@ -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,

1
src/viewer.js
View File

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

3
test/demo/basic.html
View File

@ -23,7 +23,8 @@
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "/test/data/testpattern.dzi"
tileSources: "../data/testpattern.dzi",
showNavigator:true
});
</script>

48
test/demo/navigatorcustomlocationdemo.html
View File

@ -1,48 +0,0 @@
<html>
<head>
<title>OpenSeadragon Navigator in a custom location Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<style type="text/css">
.openseadragon1
{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
</style>
</head>
<body>
<div>
Simple demo page to show how to put the navigator in a custom location
</div>
<div id="contentDiv" class="openseadragon1"></div>
<div id="navigatorDiv" class="findme"></div>
<script type="text/javascript">
var viewer = OpenSeadragon({
id:"contentDiv",
navigatorId: "navigatorDiv",
prefixUrl:"../../build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"../data/testpattern_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"1000",
Width:"1000"
}
}
}
});
</script>
</body>
</html>

55
test/demo/navigatorjquerydemo.html
View File

@ -1,55 +0,0 @@
<html>
<head>
<title>OpenSeadragon Navigator in a JQuery UI Dialog Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
<link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css"/>
<style type="text/css">
.openseadragon
{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
</style>
</head>
<body>
<div>
Simple demo page to show how to put the navigator in a moveable JQuery UI dialog.
</div>
<div id="contentDiv" class="openseadragon"></div>
<div id="navigatorDialog">
<div id="navigatorDiv"></div>
</div>
<script type="text/javascript">
$('#navigatorDialog').dialog();
var viewer = OpenSeadragon({
id:"contentDiv",
navigatorId: "navigatorDiv",
prefixUrl:"../../build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"../data/testpattern_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"1000",
Width:"1000"
}
}
}
});
</script>
</body>
</html>

79
test/navigator.js
View File

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