Merge pull request #376 from avandecreme/hide-controls

Add showZoomControl, showHomeControl and showFullPageControl options to ...

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,15 +353,39 @@
   *     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.<br>
+  *     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]
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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()).<br>
+  *     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
@@ -376,6 +394,59 @@
   * @property {OpenSeadragon.ControlAnchor} [sequenceControlAnchor=TOP_LEFT]
   *     Placement of the default sequence controls.
   *
+  * @property {Boolean} [navPrevNextWrap=false]
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.<br>
+  *     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.
   *
@@ -445,6 +516,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 +845,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 +950,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                     DOWN:   'next_pressed.png'
                 }
             },
-            navPrevNextWrap:        false,
-            showRotationControl:    false,
 
             //DEVELOPER SETTINGS
             debugMode:              false,

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

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 = $('<div id="controlsTests"></div>').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);
+    });
+
+})();

test/rotate.js

@@ -1,77 +0,0 @@
-/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
-
-(function () {
-    var viewer;
-
-    module('Basic', {
-        setup: function () {
-            var example = $('<div id="rotateTests"></div>').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');
-    });
-
-})();

test/test.html

@@ -29,6 +29,6 @@
     <script src="/test/units.js"></script>
     <script src="/test/layers.js"></script>
     <script src="/test/overlays.js"></script>
-    <script src="/test/rotate.js"></script>
+    <script src="/test/controls.js"></script>
 </body>
 </html>