From 16ee82d43be3f890590614cc3dfc403457bf9349 Mon Sep 17 00:00:00 2001 From: Antoine Vandecreme Date: Mon, 7 Apr 2014 14:11:33 -0400 Subject: [PATCH 1/2] Add showZoomControl, showHomeControl and showFullPageControl options to be able to hide specific controls. See #210 Add missing doc for buttons. Set the rotate buttons to viewer.rotate(Left/Right)Button for coherence with other buttons. Update tests. --- src/openseadragon.js | 82 +++++++-- src/viewer.js | 160 +++++++++--------- test/controls.js | 383 +++++++++++++++++++++++++++++++++++++++++++ test/rotate.js | 77 --------- test/test.html | 2 +- 5 files changed, 536 insertions(+), 168 deletions(-) create mode 100644 test/controls.js delete mode 100644 test/rotate.js diff --git a/src/openseadragon.js b/src/openseadragon.js index 2ce0a042..b3dc44b2 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -289,12 +289,6 @@ * @property {Number} [zoomPerSecond=1.0] * The number of seconds to animate a single zoom event over. * - * @property {Boolean} [showNavigationControl=true] - * Set to false to prevent the appearance of the default navigation controls. - * - * @property {OpenSeadragon.ControlAnchor} [navigationControlAnchor=TOP_LEFT] - * Placement of the default navigation controls. - * * @property {Boolean} [showNavigator=false] * Set to true to make the navigator minimap appear. * @@ -359,10 +353,26 @@ * interactions include draging the image in a plane, and zooming in toward * and away from the image. * - * @property {Boolean} [navPrevNextWrap=false] - * If the 'previous' button will wrap to the last image when viewing the first - * image and if the 'next' button will wrap to the first image when viewing - * the last image. + * @property {Boolean} [showNavigationControl=true] + * Set to false to prevent the appearance of the default navigation controls. + * Note that if set to false, the customs buttons setted by the options + * zoomInButton, zoomOutButton etc, are rendered inactive. + * + * @property {OpenSeadragon.ControlAnchor} [navigationControlAnchor=TOP_LEFT] + * Placement of the default navigation controls. + * To set the placement of the sequence controls, see the + * sequenceControlAnchor option. + * + * @property {Boolean} [showZoomControl=true] + * If true then + and - buttons to zoom in and out are displayed. + * + * @property {Boolean} [showHomeControl=true] + * If true then the 'Go home' button is displayed to go back to the original + * zoom and pan. + * + * @property {Boolean} [showFullPageControl=true] + * If true then the 'Toggle full page' button is displayed to switch + * between full page and normal mode. * * @property {Boolean} [showRotationControl=false] * If true then the rotate left/right controls will be displayed as part of the @@ -376,6 +386,35 @@ * @property {OpenSeadragon.ControlAnchor} [sequenceControlAnchor=TOP_LEFT] * Placement of the default sequence controls. * + * @property {Boolean} [navPrevNextWrap=false] + * If the 'previous' button will wrap to the last image when viewing the first + * image and if the 'next' button will wrap to the first image when viewing + * the last image. + * + * @property {String} zoomInButton + * Set the id of the custom 'Zoom in' button to use. + * + * @property {String} zoomOutButton + * Set the id of the custom 'Zoom out' button to use. + * + * @property {String} homeButton + * Set the id of the custom 'Go home' button to use. + * + * @property {String} fullPageButton + * Set the id of the custom 'Toggle full page' button to use. + * + * @property {String} rotateLeftButton + * Set the id of the custom 'Rotate left' button to use. + * + * @property {String} rotateRightButton + * Set the id of the custom 'Rotate right' button to use. + * + * @property {String} previousButton + * Set the id of the custom 'Previous page' button to use. + * + * @property {String} nextButton + * Set the id of the custom 'Next page' button to use. + * * @property {Number} [initialPage=0] * If the viewer has been configured with a sequence of tile sources, display this page initially. * @@ -445,6 +484,18 @@ * @property {String} fullpage.HOVER * @property {String} fullpage.DOWN * + * @property {Object} rotateleft - Images for the rotate left button. + * @property {String} rotateleft.REST + * @property {String} rotateleft.GROUP + * @property {String} rotateleft.HOVER + * @property {String} rotateleft.DOWN + * + * @property {Object} rotateright - Images for the rotate right button. + * @property {String} rotateright.REST + * @property {String} rotateright.GROUP + * @property {String} rotateright.HOVER + * @property {String} rotateright.DOWN + * * @property {Object} previous - Images for the previous button. * @property {String} previous.REST * @property {String} previous.GROUP @@ -762,8 +813,13 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ showSequenceControl: true, //SEQUENCE sequenceControlAnchor: null, //SEQUENCE preserveViewport: false, //SEQUENCE - showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE - navigationControlAnchor: null, //ZOOM/HOME/FULL + navPrevNextWrap: false, //SEQUENCE + showNavigationControl: true, //ZOOM/HOME/FULL/ROTATION + navigationControlAnchor: null, //ZOOM/HOME/FULL/ROTATION + showZoomControl: true, //ZOOM + showHomeControl: true, //HOME + showFullPageControl: true, //FULL + showRotationControl: false, //ROTATION controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY @@ -862,8 +918,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ DOWN: 'next_pressed.png' } }, - navPrevNextWrap: false, - showRotationControl: false, //DEVELOPER SETTINGS debugMode: false, diff --git a/src/viewer.js b/src/viewer.js index 24820a48..11ede59b 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1363,80 +1363,88 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, useGroup = true ; - if( this.showNavigationControl ){ + if ( this.showNavigationControl ) { - if( this.zoomInButton || this.zoomOutButton || this.homeButton || this.fullPageButton ){ + if( this.zoomInButton || this.zoomOutButton || + this.homeButton || this.fullPageButton || + this.rotateLeftButton || this.rotateRightButton ) { //if we are binding to custom buttons then layout and //grouping is the responsibility of the page author useGroup = false; } - buttons.push( this.zoomInButton = new $.Button({ - element: this.zoomInButton ? $.getElement( this.zoomInButton ) : null, - clickTimeThreshold: this.clickTimeThreshold, - clickDistThreshold: this.clickDistThreshold, - tooltip: $.getString( "Tooltips.ZoomIn" ), - srcRest: resolveUrl( this.prefixUrl, navImages.zoomIn.REST ), - srcGroup: resolveUrl( this.prefixUrl, navImages.zoomIn.GROUP ), - srcHover: resolveUrl( this.prefixUrl, navImages.zoomIn.HOVER ), - srcDown: resolveUrl( this.prefixUrl, navImages.zoomIn.DOWN ), - onPress: beginZoomingInHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomInHandler, - onEnter: beginZoomingInHandler, - onExit: endZoomingHandler, - onFocus: onFocusHandler, - onBlur: onBlurHandler - })); + if ( this.showZoomControl ) { + buttons.push( this.zoomInButton = new $.Button({ + element: this.zoomInButton ? $.getElement( this.zoomInButton ) : null, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + tooltip: $.getString( "Tooltips.ZoomIn" ), + srcRest: resolveUrl( this.prefixUrl, navImages.zoomIn.REST ), + srcGroup: resolveUrl( this.prefixUrl, navImages.zoomIn.GROUP ), + srcHover: resolveUrl( this.prefixUrl, navImages.zoomIn.HOVER ), + srcDown: resolveUrl( this.prefixUrl, navImages.zoomIn.DOWN ), + onPress: beginZoomingInHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomInHandler, + onEnter: beginZoomingInHandler, + onExit: endZoomingHandler, + onFocus: onFocusHandler, + onBlur: onBlurHandler + })); - buttons.push( this.zoomOutButton = new $.Button({ - element: this.zoomOutButton ? $.getElement( this.zoomOutButton ) : null, - clickTimeThreshold: this.clickTimeThreshold, - clickDistThreshold: this.clickDistThreshold, - tooltip: $.getString( "Tooltips.ZoomOut" ), - srcRest: resolveUrl( this.prefixUrl, navImages.zoomOut.REST ), - srcGroup: resolveUrl( this.prefixUrl, navImages.zoomOut.GROUP ), - srcHover: resolveUrl( this.prefixUrl, navImages.zoomOut.HOVER ), - srcDown: resolveUrl( this.prefixUrl, navImages.zoomOut.DOWN ), - onPress: beginZoomingOutHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomOutHandler, - onEnter: beginZoomingOutHandler, - onExit: endZoomingHandler, - onFocus: onFocusHandler, - onBlur: onBlurHandler - })); + buttons.push( this.zoomOutButton = new $.Button({ + element: this.zoomOutButton ? $.getElement( this.zoomOutButton ) : null, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + tooltip: $.getString( "Tooltips.ZoomOut" ), + srcRest: resolveUrl( this.prefixUrl, navImages.zoomOut.REST ), + srcGroup: resolveUrl( this.prefixUrl, navImages.zoomOut.GROUP ), + srcHover: resolveUrl( this.prefixUrl, navImages.zoomOut.HOVER ), + srcDown: resolveUrl( this.prefixUrl, navImages.zoomOut.DOWN ), + onPress: beginZoomingOutHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomOutHandler, + onEnter: beginZoomingOutHandler, + onExit: endZoomingHandler, + onFocus: onFocusHandler, + onBlur: onBlurHandler + })); + } - buttons.push( this.homeButton = new $.Button({ - element: this.homeButton ? $.getElement( this.homeButton ) : null, - clickTimeThreshold: this.clickTimeThreshold, - clickDistThreshold: this.clickDistThreshold, - tooltip: $.getString( "Tooltips.Home" ), - srcRest: resolveUrl( this.prefixUrl, navImages.home.REST ), - srcGroup: resolveUrl( this.prefixUrl, navImages.home.GROUP ), - srcHover: resolveUrl( this.prefixUrl, navImages.home.HOVER ), - srcDown: resolveUrl( this.prefixUrl, navImages.home.DOWN ), - onRelease: onHomeHandler, - onFocus: onFocusHandler, - onBlur: onBlurHandler - })); + if ( this.showHomeControl ) { + buttons.push( this.homeButton = new $.Button({ + element: this.homeButton ? $.getElement( this.homeButton ) : null, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + tooltip: $.getString( "Tooltips.Home" ), + srcRest: resolveUrl( this.prefixUrl, navImages.home.REST ), + srcGroup: resolveUrl( this.prefixUrl, navImages.home.GROUP ), + srcHover: resolveUrl( this.prefixUrl, navImages.home.HOVER ), + srcDown: resolveUrl( this.prefixUrl, navImages.home.DOWN ), + onRelease: onHomeHandler, + onFocus: onFocusHandler, + onBlur: onBlurHandler + })); + } - buttons.push( this.fullPageButton = new $.Button({ - element: this.fullPageButton ? $.getElement( this.fullPageButton ) : null, - clickTimeThreshold: this.clickTimeThreshold, - clickDistThreshold: this.clickDistThreshold, - tooltip: $.getString( "Tooltips.FullPage" ), - srcRest: resolveUrl( this.prefixUrl, navImages.fullpage.REST ), - srcGroup: resolveUrl( this.prefixUrl, navImages.fullpage.GROUP ), - srcHover: resolveUrl( this.prefixUrl, navImages.fullpage.HOVER ), - srcDown: resolveUrl( this.prefixUrl, navImages.fullpage.DOWN ), - onRelease: onFullScreenHandler, - onFocus: onFocusHandler, - onBlur: onBlurHandler - })); + if ( this.showFullPageControl ) { + buttons.push( this.fullPageButton = new $.Button({ + element: this.fullPageButton ? $.getElement( this.fullPageButton ) : null, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + tooltip: $.getString( "Tooltips.FullPage" ), + srcRest: resolveUrl( this.prefixUrl, navImages.fullpage.REST ), + srcGroup: resolveUrl( this.prefixUrl, navImages.fullpage.GROUP ), + srcHover: resolveUrl( this.prefixUrl, navImages.fullpage.HOVER ), + srcDown: resolveUrl( this.prefixUrl, navImages.fullpage.DOWN ), + onRelease: onFullScreenHandler, + onFocus: onFocusHandler, + onBlur: onBlurHandler + })); + } - if (this.showRotationControl) { - buttons.push( this.rotateLeft = new $.Button({ + if ( this.showRotationControl ) { + buttons.push( this.rotateLeftButton = new $.Button({ element: this.rotateLeftButton ? $.getElement( this.rotateLeftButton ) : null, clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, @@ -1450,7 +1458,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, onBlur: onBlurHandler })); - buttons.push( this.rotateRight = new $.Button({ + buttons.push( this.rotateRightButton = new $.Button({ element: this.rotateRightButton ? $.getElement( this.rotateRightButton ) : null, clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, @@ -1466,7 +1474,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, } - if( useGroup ){ + if ( useGroup ) { this.buttons = new $.ButtonGroup({ buttons: buttons, clickTimeThreshold: this.clickTimeThreshold, @@ -1481,7 +1489,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, this.navControl, {anchor: $.ControlAnchor.TOP_LEFT} ); - }else{ + } else { this.addControl( this.navControl, {anchor: this.navigationControlAnchor || $.ControlAnchor.TOP_LEFT} @@ -1498,9 +1506,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @function * @return {Number} */ - currentPage: function () { + currentPage: function() { return THIS[ this.hash ].sequence; - }, + }, /** * @function @@ -1708,24 +1716,24 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @private * @param {Number} Sequence Value */ - _updateSequenceButtons: function (page) { + _updateSequenceButtons: function( page ) { - if( this.nextButton ){ - if( ( this.tileSources.length - 1 ) === page ){ + if ( this.nextButton ) { + if( ( this.tileSources.length - 1 ) === page ) { //Disable next button - if(!this.navPrevNextWrap){ + if ( !this.navPrevNextWrap ) { this.nextButton.disable(); } } else { this.nextButton.enable(); } } - if( this.previousButton ){ - if( page > 0 ){ + if ( this.previousButton ) { + if ( page > 0 ) { //Enable previous button this.previousButton.enable(); } else { - if(!this.navPrevNextWrap){ + if ( !this.navPrevNextWrap ) { this.previousButton.disable(); } } diff --git a/test/controls.js b/test/controls.js new file mode 100644 index 00000000..a2d7d998 --- /dev/null +++ b/test/controls.js @@ -0,0 +1,383 @@ +/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */ + +(function () { + var viewer; + + module('Controls', { + setup: function () { + var example = $('
').appendTo("#qunit-fixture"); + + testLog.reset(); + + }, + teardown: function () { + if (viewer && viewer.close) { + viewer.close(); + } + + viewer = null; + } + }); + + asyncTest('ZoomControlOff', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(!viewer.showZoomControl, 'showZoomControl should be off'); + ok(!viewer.zoomInButton, "zoomIn button should be null"); + ok(!viewer.zoomOutButton, "zoomOut button should be null"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showZoomControl: false + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('ZoomControlOn', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(viewer.showZoomControl, 'showZoomControl should be on'); + ok(!!viewer.zoomInButton, "zoomIn button should not be null"); + ok(!!viewer.zoomOutButton, "zoomOut button should not be null"); + notEqual(viewer.buttons.buttons.indexOf(viewer.zoomInButton), -1, + "The zoomIn button should be present"); + notEqual(viewer.buttons.buttons.indexOf(viewer.zoomOutButton), -1, + "The zoomOut button should be present"); + + var oldZoom = viewer.viewport.getZoom(); + viewer.zoomInButton.onClick(); + var newZoom = viewer.viewport.getZoom(); + ok(oldZoom < newZoom, "OSD should have zoomed in."); + oldZoom = newZoom; + viewer.zoomOutButton.onClick(); + newZoom = viewer.viewport.getZoom(); + ok(oldZoom > newZoom, "OSD should have zoomed out."); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showZoomControl: true + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('HomeControlOff', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(!viewer.showHomeControl, 'showHomeControl should be off'); + ok(!viewer.homeButton, "Home button should be null"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showHomeControl: false + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('HomeControlOn', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(viewer.showHomeControl, 'showHomeControl should be on'); + ok(!!viewer.homeButton, "Home button should not be null"); + notEqual(viewer.buttons.buttons.indexOf(viewer.homeButton), -1, + "The home button should be present"); + + viewer.viewport.zoomBy(1.1); + var bounds = viewer.viewport.getBounds(); + var homeBounds = viewer.viewport.getHomeBounds(); + ok(bounds.x !== homeBounds.x || + bounds.y !== homeBounds.y || + bounds.width !== homeBounds.width || + bounds.height !== homeBounds.height, + "OSD should not be at home."); + viewer.homeButton.onRelease(); + bounds = viewer.viewport.getBounds(); + ok(bounds.x === homeBounds.x && + bounds.y === homeBounds.y && + bounds.width === homeBounds.width && + bounds.height === homeBounds.height, "OSD should have get home."); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showHomeControl: true + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('FullPageControlOff', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(!viewer.showFullPageControl, 'showFullPageControl should be off'); + ok(!viewer.fullPageButton, "FullPage button should be null"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showFullPageControl: false + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('FullPageControlOn', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(viewer.showHomeControl, 'showFullPageControl should be on'); + ok(!!viewer.fullPageButton, "FullPage button should not be null"); + notEqual(viewer.buttons.buttons.indexOf(viewer.fullPageButton), -1, + "The full page button should be present"); + + ok(!viewer.isFullPage(), "OSD should not be in full page."); + viewer.fullPageButton.onRelease(); + ok(viewer.isFullPage(), "OSD should be in full page."); + viewer.fullPageButton.onRelease(); + ok(!viewer.isFullPage(), "OSD should not be in full page."); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showHomeControl: true + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('RotateControlOff', function () { + + var openHandler = function (event) { + viewer.removeHandler('open', openHandler); + ok(true, 'Open event was sent'); + ok(viewer.drawer, 'Drawer exists'); + ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true'); + ok(!viewer.showRotationControl, 'showRotationControl should be off'); + ok(!viewer.rotateLeftButton, "rotateLeft button should be null"); + ok(!viewer.rotateRightButton, "rotateRight button should be null"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showRotationControl: false + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('RotateControlOn', function () { + + var openHandler = function (event) { + viewer.removeHandler('open', openHandler); + ok(true, 'Open event was sent'); + ok(viewer.drawer, 'Drawer exists'); + ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true'); + ok(viewer.showRotationControl, 'showRotationControl should be true'); + notEqual(viewer.buttons.buttons.indexOf(viewer.rotateLeftButton), -1, + "rotateLeft should be found"); + notEqual(viewer.buttons.buttons.indexOf(viewer.rotateRightButton), -1, + "rotateRight should be found"); + + // Now simulate the left/right button clicks. + // TODO: re-factor simulateViewerClickWithDrag so it'll accept any element, and use that. + equal(viewer.viewport.degrees, 0, "Image should start at 0 degrees rotation"); + viewer.rotateLeftButton.onRelease(); + equal(viewer.viewport.degrees, 270, "Image should be 270 degrees rotation (left)"); + viewer.rotateRightButton.onRelease(); + equal(viewer.viewport.degrees, 0, "Image should be 270 degrees rotation (right)"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + springStiffness: 100, // Faster animation = faster tests + showRotationControl: true + }); + viewer.addHandler('open', openHandler); + viewer.open('/test/data/testpattern.dzi'); + }); + + asyncTest('SequenceControlOff', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(!viewer.showSequenceControl, 'showSequenceControl should be off'); + ok(!viewer.previousButton, "Previous button should be null"); + ok(!viewer.nextButton, "Next button should be null"); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + tileSources: [ + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi' + ], + springStiffness: 100, // Faster animation = faster tests + showSequenceControl: false + }); + viewer.addHandler('open', openHandler); + }); + + asyncTest('SequenceControlOnPrevNextWrapOff', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(viewer.showSequenceControl, 'showSequenceControl should be on'); + ok(!!viewer.previousButton, "Previous button should not be null"); + ok(!!viewer.nextButton, "Next button should not be null"); + notEqual(viewer.paging.buttons.indexOf(viewer.previousButton), -1, + "The previous button should be present"); + notEqual(viewer.paging.buttons.indexOf(viewer.nextButton), -1, + "The next button should be present"); + + equal(viewer.currentPage(), 0, "OSD should open on first page."); + ok(viewer.previousButton.element.disabled, + "Previous should be disabled on first page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on first page."); + + viewer.nextButton.onRelease(); + equal(viewer.currentPage(), 1, "OSD should be on second page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on second page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on second page."); + + viewer.nextButton.onRelease(); + equal(viewer.currentPage(), 2, "OSD should be on third page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on third page."); + ok(viewer.nextButton.element.disabled, + "Next should be disabled on third page."); + + viewer.previousButton.onRelease(); + equal(viewer.currentPage(), 1, "OSD should be on second page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on second page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on second page."); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + tileSources: [ + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi' + ], + springStiffness: 100, // Faster animation = faster tests + showSequenceControl: true, + navPrevNextWrap: false + }); + viewer.addHandler('open', openHandler); + }); + + asyncTest('SequenceControlOnPrevNextWrapOn', function () { + + var openHandler = function () { + viewer.removeHandler('open', openHandler); + ok(viewer.showSequenceControl, 'showSequenceControl should be on'); + ok(!!viewer.previousButton, "Previous button should not be null"); + ok(!!viewer.nextButton, "Next button should not be null"); + notEqual(viewer.paging.buttons.indexOf(viewer.previousButton), -1, + "The previous button should be present"); + notEqual(viewer.paging.buttons.indexOf(viewer.nextButton), -1, + "The next button should be present"); + + equal(viewer.currentPage(), 0, "OSD should open on first page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on first page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on first page."); + + viewer.previousButton.onRelease(); + equal(viewer.currentPage(), 2, "OSD should be on third page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on third page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on third page."); + + viewer.nextButton.onRelease(); + equal(viewer.currentPage(), 0, "OSD should be on first page."); + ok(!viewer.previousButton.element.disabled, + "Previous should be enabled on first page."); + ok(!viewer.nextButton.element.disabled, + "Next should be enabled on first page."); + + viewer.close(); + start(); + }; + + viewer = OpenSeadragon({ + id: 'controlsTests', + prefixUrl: '/build/openseadragon/images/', + tileSources: [ + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi', + '/test/data/testpattern.dzi' + ], + springStiffness: 100, // Faster animation = faster tests + showSequenceControl: true, + navPrevNextWrap: true + }); + viewer.addHandler('open', openHandler); + }); + +})(); diff --git a/test/rotate.js b/test/rotate.js deleted file mode 100644 index 9128d7fa..00000000 --- a/test/rotate.js +++ /dev/null @@ -1,77 +0,0 @@ -/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */ - -(function () { - var viewer; - - module('Basic', { - setup: function () { - var example = $('
').appendTo("#qunit-fixture"); - - testLog.reset(); - - }, - teardown: function () { - if (viewer && viewer.close) { - viewer.close(); - } - - viewer = null; - } - }); - - asyncTest('RotateControlOff', function () { - - var openHandler = function (event) { - viewer.removeHandler('open', openHandler); - ok(true, 'Open event was sent'); - ok(viewer.drawer, 'Drawer exists'); - ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true'); - ok(!viewer.showRotationControl, 'showRotationControl should be off'); - ok(!viewer.rotateLeft, "rotateLeft button should be null"); - ok(!viewer.rotateRight, "rotateRight button should be null"); - start(); - }; - - viewer = OpenSeadragon({ - id: 'rotateTests', - prefixUrl: '/build/openseadragon/images/', - springStiffness: 100, // Faster animation = faster tests - showRotationControl: false - }); - viewer.addHandler('open', openHandler); - viewer.open('/test/data/testpattern.dzi'); - }); - - asyncTest('RotateControlOn', function () { - - var openHandler = function (event) { - viewer.removeHandler('open', openHandler); - ok(true, 'Open event was sent'); - ok(viewer.drawer, 'Drawer exists'); - ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true'); - ok(viewer.showRotationControl, 'showRotationControl should be true'); - ok(-1 != viewer.buttons.buttons.indexOf(viewer.rotateLeft), "rotateLeft should be found"); - ok(-1 != viewer.buttons.buttons.indexOf(viewer.rotateRight), "rotateRight should be found"); - - // Now simulate the left/right button clicks. - // TODO: re-factor simulateViewerClickWithDrag so it'll accept any element, and use that. - ok(viewer.viewport.degrees === 0, "Image should start at 0 degrees rotation"); - viewer.rotateLeft.onRelease(); - ok(viewer.viewport.degrees === 270, "Image should be 270 degrees rotation (left)"); - viewer.rotateRight.onRelease(); - ok(viewer.viewport.degrees === 0, "Image should be 270 degrees rotation (right)"); - - start(); - }; - - viewer = OpenSeadragon({ - id: 'rotateTests', - prefixUrl: '/build/openseadragon/images/', - springStiffness: 100, // Faster animation = faster tests - showRotationControl: true - }); - viewer.addHandler('open', openHandler); - viewer.open('/test/data/testpattern.dzi'); - }); - -})(); diff --git a/test/test.html b/test/test.html index 94602d88..21802fa1 100644 --- a/test/test.html +++ b/test/test.html @@ -29,6 +29,6 @@ - + From e27df5327fed2a9a22508747724f22d01b1cc0d1 Mon Sep 17 00:00:00 2001 From: Antoine Vandecreme Date: Wed, 9 Apr 2014 10:18:51 -0400 Subject: [PATCH 2/2] Improve documentation. --- src/openseadragon.js | 50 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 41 insertions(+), 9 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index b3dc44b2..45bf030f 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -354,8 +354,8 @@ * and away from the image. * * @property {Boolean} [showNavigationControl=true] - * Set to false to prevent the appearance of the default navigation controls. - * Note that if set to false, the customs buttons setted by the options + * Set to false to prevent the appearance of the default navigation controls.
+ * Note that if set to false, the customs buttons set by the options * zoomInButton, zoomOutButton etc, are rendered inactive. * * @property {OpenSeadragon.ControlAnchor} [navigationControlAnchor=TOP_LEFT] @@ -364,20 +364,28 @@ * sequenceControlAnchor option. * * @property {Boolean} [showZoomControl=true] - * If true then + and - buttons to zoom in and out are displayed. + * If true then + and - buttons to zoom in and out are displayed.
+ * Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding + * this setting when set to false. * * @property {Boolean} [showHomeControl=true] * If true then the 'Go home' button is displayed to go back to the original - * zoom and pan. + * zoom and pan.
+ * Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding + * this setting when set to false. * * @property {Boolean} [showFullPageControl=true] * If true then the 'Toggle full page' button is displayed to switch - * between full page and normal mode. + * between full page and normal mode.
+ * Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding + * this setting when set to false. * * @property {Boolean} [showRotationControl=false] * If true then the rotate left/right controls will be displayed as part of the * standard controls. This is also subject to the browser support for rotate - * (e.g. viewer.drawer.canRotate()). + * (e.g. viewer.drawer.canRotate()).
+ * Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding + * this setting when set to false. * * @property {Boolean} [showSequenceControl=true] * If the viewer has been configured with a sequence of tile sources, then @@ -387,33 +395,57 @@ * Placement of the default sequence controls. * * @property {Boolean} [navPrevNextWrap=false] - * If the 'previous' button will wrap to the last image when viewing the first - * image and if the 'next' button will wrap to the first image when viewing - * the last image. + * If true then the 'previous' button will wrap to the last image when + * viewing the first image and the 'next' button will wrap to the first + * image when viewing the last image. * * @property {String} zoomInButton * Set the id of the custom 'Zoom in' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} zoomOutButton * Set the id of the custom 'Zoom out' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} homeButton * Set the id of the custom 'Go home' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} fullPageButton * Set the id of the custom 'Toggle full page' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} rotateLeftButton * Set the id of the custom 'Rotate left' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} rotateRightButton * Set the id of the custom 'Rotate right' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} previousButton * Set the id of the custom 'Previous page' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {String} nextButton * Set the id of the custom 'Next page' button to use. + * This is usefull to have a custom button anywhere in the web page.
+ * To only change the button images, consider using + * {@link OpenSeadragon.Options.navImages} * * @property {Number} [initialPage=0] * If the viewer has been configured with a sequence of tile sources, display this page initially.