diff --git a/src/openseadragon.js b/src/openseadragon.js
index 49ed0fa9..ba0eb340 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,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.
+ * 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.
+ * 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.
+ * 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.
+ * 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
@@ -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.
+ * 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.
*
@@ -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,
diff --git a/src/viewer.js b/src/viewer.js
index 2d885562..a77cd46f 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 = $('