From 3b2bde2940cc120f51938e187cdc921f111aa475 Mon Sep 17 00:00:00 2001 From: houseofyin Date: Fri, 15 Mar 2013 10:59:47 -0400 Subject: [PATCH] Initial pass at making the navigator float --- src/control.js | 25 ++++++++++------ src/controldock.js | 6 ++-- src/navigator.js | 16 +++++++++-- src/openseadragon.js | 2 +- src/referencestrip.js | 6 ++-- src/viewer.js | 16 ++++++----- test/navigatordemo.html | 64 +++++++++++++++++++++++++++++++++++++++++ 7 files changed, 109 insertions(+), 26 deletions(-) create mode 100644 test/navigatordemo.html diff --git a/src/control.js b/src/control.js index cdb10cd1..ce1af74b 100644 --- a/src/control.js +++ b/src/control.js @@ -32,9 +32,12 @@ $.ControlAnchor = { * @property {Element} wrapper - a nuetral element surrounding the control * element. */ -$.Control = function ( element, anchor, container ) { +$.Control = function ( element, options, container ) { + var parent = element.parentNode; + options.attachToViewer = (typeof options.attachToViewer === 'undefined') ? true : options.attachToViewer; + this.autoFade = (typeof options.autoFade === 'undefined') ? true : options.autoFade; this.element = element; - this.anchor = anchor; + this.anchor = options.anchor; this.container = container; this.wrapper = $.makeNeutralElement( "span" ); this.wrapper.style.display = "inline-block"; @@ -45,14 +48,18 @@ $.Control = function ( element, anchor, container ) { this.wrapper.style.width = this.wrapper.style.height = "100%"; } - if ( this.anchor == $.ControlAnchor.TOP_RIGHT || - this.anchor == $.ControlAnchor.BOTTOM_RIGHT ) { - this.container.insertBefore( - this.wrapper, - this.container.firstChild - ); + if (options.attachToViewer ) { + if ( this.anchor == $.ControlAnchor.TOP_RIGHT || + this.anchor == $.ControlAnchor.BOTTOM_RIGHT ) { + this.container.insertBefore( + this.wrapper, + this.container.firstChild + ); + } else { + this.container.appendChild( this.wrapper ); + } } else { - this.container.appendChild( this.wrapper ); + parent.appendChild( this.wrapper ); } }; diff --git a/src/controldock.js b/src/controldock.js index 5360463b..6b3ddd9a 100644 --- a/src/controldock.js +++ b/src/controldock.js @@ -54,7 +54,7 @@ /** * @function */ - addControl: function ( element, anchor ) { + addControl: function ( element, controlOptions ) { element = $.getElement( element ); var div = null; @@ -62,7 +62,7 @@ return; // they're trying to add a duplicate control } - switch ( anchor ) { + switch ( controlOptions.anchor ) { case $.ControlAnchor.TOP_RIGHT: div = this.controls.topright; element.style.position = "relative"; @@ -96,7 +96,7 @@ } this.controls.push( - new $.Control( element, anchor, div ) + new $.Control( element, controlOptions, div ) ); element.style.display = "inline-block"; }, diff --git a/src/navigator.js b/src/navigator.js index 04d17a4d..cc0f1564 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -24,9 +24,19 @@ $.Navigator = function( options ){ if( !options.id ){ options.id = 'navigator-' + (+new Date()); this.element = $.makeNeutralElement( "div" ); - this.element.id = options.id; - this.element.className = 'navigator'; + options.controlOptions = {anchor: $.ControlAnchor.TOP_RIGHT, + attachToViewer: true, + autoFade: true}; } + else + { + this.element = document.getElementById( options.id ); + options.controlOptions = {anchor: $.ControlAnchor.NONE, + attachToViewer: false, + autoFade: false}; + } + this.element.id = options.id; + this.element.className += ' navigator'; options = $.extend( true, { sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio @@ -179,7 +189,7 @@ $.Navigator = function( options ){ viewer.addControl( this.element, - $.ControlAnchor.TOP_RIGHT + options.controlOptions ); if( options.width && options.height ){ diff --git a/src/openseadragon.js b/src/openseadragon.js index c70d7a7b..db05fe9d 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -503,7 +503,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ //VIEWPORT NAVIGATOR SETTINGS showNavigator: true, //promoted to default in 0.9.64 - navigatorElement: null, + navigatorId: null, navigatorHeight: null, navigatorWidth: null, navigatorPosition: null, diff --git a/src/referencestrip.js b/src/referencestrip.js index 20f8ff03..d7613f9d 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -97,7 +97,7 @@ $.ReferenceStrip = function( options ){ this.element.style.height = options.height + 'px'; viewer.addControl( this.element, - $.ControlAnchor.BOTTOM_LEFT + {anchor: $.ControlAnchor.BOTTOM_LEFT} ); } else { if( "horizontal" == options.scroll ){ @@ -114,7 +114,7 @@ $.ReferenceStrip = function( options ){ viewer.addControl( this.element, - $.ControlAnchor.BOTTOM_LEFT + {anchor: $.ControlAnchor.BOTTOM_LEFT} ); }else { this.element.style.height = ( @@ -130,7 +130,7 @@ $.ReferenceStrip = function( options ){ viewer.addControl( this.element, - $.ControlAnchor.TOP_LEFT + {anchor: $.ControlAnchor.TOP_LEFT} ); } diff --git a/src/viewer.js b/src/viewer.js index 16cd3210..439131f8 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -230,7 +230,7 @@ $.Viewer = function( options ) { for ( i = 0; i < this.customControls.length; i++ ) { this.addControl( this.customControls[ i ].id, - this.customControls[ i ].anchor + {anchor: this.customControls[ i ].anchor} ); } @@ -432,7 +432,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, //Instantiate a navigator if configured if ( this.showNavigator && ! this.navigator && !this.collectionMode ){ this.navigator = new $.Navigator({ - id: this.navigatorElement, + id: this.navigatorId, position: this.navigatorPosition, sizeRatio: this.navigatorSizeRatio, height: this.navigatorHeight, @@ -883,12 +883,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, if( this.toolbar ){ this.toolbar.addControl( this.pagingControl, - $.ControlAnchor.BOTTOM_RIGHT + {anchor: $.ControlAnchor.BOTTOM_RIGHT} ); }else{ this.addControl( this.pagingControl, - $.ControlAnchor.TOP_LEFT + {anchor: $.ControlAnchor.TOP_LEFT} ); } } @@ -1005,12 +1005,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, if( this.toolbar ){ this.toolbar.addControl( this.navControl, - $.ControlAnchor.TOP_LEFT + {anchor: $.ControlAnchor.TOP_LEFT} ); }else{ this.addControl( this.navControl, - $.ControlAnchor.TOP_LEFT + {anchor: $.ControlAnchor.TOP_LEFT} ); } } @@ -1135,7 +1135,9 @@ function updateControlsFade( viewer ) { opacity = Math.max( 0.0, opacity ); for ( i = viewer.controls.length - 1; i >= 0; i--) { - viewer.controls[ i ].setOpacity( opacity ); + if (viewer.controls[ i ].autoFade) { + viewer.controls[ i ].setOpacity( opacity ); + } } if ( opacity > 0 ) { diff --git a/test/navigatordemo.html b/test/navigatordemo.html new file mode 100644 index 00000000..03507cc3 --- /dev/null +++ b/test/navigatordemo.html @@ -0,0 +1,64 @@ + + + OpenSeadragon Expose Origina Event Demo + + + + + + + +
+
+ Simple demo page to verify that event handlers pass along the original source event +
+
+ +
+ + + +