From 14acb5d5810a8b484e266856fa593bd9128430ef Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 13 Dec 2013 11:55:36 -0800 Subject: [PATCH] ABSOLUTE Control bug fix Wrapped ABSOLUTE positioned controls in a div so fade opacity would work correctly. Added 'navigator-scroll' event addition to changelog. --- changelog.txt | 1 + src/control.js | 47 ++++++++++++++++++++++++---------------------- src/controldock.js | 1 - src/navigator.js | 24 +++++++++++------------ 4 files changed, 37 insertions(+), 36 deletions(-) diff --git a/changelog.txt b/changelog.txt index 95ebec39..ffa4e708 100644 --- a/changelog.txt +++ b/changelog.txt @@ -7,6 +7,7 @@ OPENSEADRAGON CHANGELOG * Added ControlAnchor options for default controls (#304) * Enabled basic cross-domain tile loading without tainting canvas (works in Chrome and Firefox) (#308) * Added a ControlAnchor.ABSOLUTE enumeration. Enables absolute positioning of control elements in the viewer (#310) +* Added a 'navigator-scroll' event to Navigator. Fired when mousewheel/pinch events occur in the navigator (#310) * Added a navigatorMaintainSizeRatio option. If set to true, the navigator minimap resizes when the viewer element is resized (#310) * Added 'ABSOLUTE' as a navigatorPosition option, along with corresponding navigatorTop, navigatorLeft options. Allows the navigator minimap to be placed anywhere in the viewer (#310) * Enhanced the navigatorTop, navigatorLeft, navigatorHeight, and navigatorWidth options to allow a number for pixel units or a string for other element units (%, em, etc.) (#310) diff --git a/src/control.js b/src/control.js index 3c7efe0c..c6010399 100644 --- a/src/control.js +++ b/src/control.js @@ -112,16 +112,30 @@ $.Control = function ( element, options, container ) { * @member {Element} wrapper * @memberof OpenSeadragon.Control# */ - if ( this.anchor != $.ControlAnchor.ABSOLUTE ) { + if ( this.anchor == $.ControlAnchor.ABSOLUTE ) { + this.wrapper = $.makeNeutralElement( "div" ); + this.wrapper.style.position = "absolute"; + this.wrapper.style.top = typeof ( options.top ) == "number" ? ( options.top + 'px' ) : options.top; + this.wrapper.style.left = typeof ( options.left ) == "number" ? (options.left + 'px' ) : options.left; + this.wrapper.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height; + this.wrapper.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width; + this.wrapper.style.margin = "0px"; + this.wrapper.style.padding = "0px"; + + this.element.style.position = "relative"; + this.element.style.top = "0px"; + this.element.style.left = "0px"; + this.element.style.height = "100%"; + this.element.style.width = "100%"; + } else { this.wrapper = $.makeNeutralElement( "span" ); this.wrapper.style.display = "inline-block"; - this.wrapper.appendChild( this.element ); - if ( this.anchor == $.ControlAnchor.NONE ) { // IE6 fix this.wrapper.style.width = this.wrapper.style.height = "100%"; } } + this.wrapper.appendChild( this.element ); if (options.attachToViewer ) { if ( this.anchor == $.ControlAnchor.TOP_RIGHT || @@ -130,13 +144,11 @@ $.Control = function ( element, options, container ) { this.wrapper, this.container.firstChild ); - } else if ( this.anchor == $.ControlAnchor.ABSOLUTE ) { - this.container.appendChild( this.element ); } else { this.container.appendChild( this.wrapper ); } } else { - parent.appendChild( this.anchor == $.ControlAnchor.ABSOLUTE ? this.element : this.wrapper ); + parent.appendChild( this.wrapper ); } }; @@ -147,10 +159,8 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{ * @function */ destroy: function() { - if ( this.anchor != $.ControlAnchor.ABSOLUTE ) { - this.wrapper.removeChild( this.element ); - } - this.container.removeChild( this.anchor == $.ControlAnchor.ABSOLUTE ? this.element : this.wrapper ); + this.wrapper.removeChild( this.element ); + this.container.removeChild( this.wrapper ); }, /** @@ -159,8 +169,7 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{ * @return {Boolean} true if currenly visible, false otherwise. */ isVisible: function() { - var controlElement = this.anchor == $.ControlAnchor.ABSOLUTE ? this.element : this.wrapper; - return controlElement.style.display != "none"; + return this.wrapper.style.display != "none"; }, /** @@ -169,15 +178,9 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{ * @param {Boolean} visible - true to make visible, false to hide. */ setVisible: function( visible ) { - if ( this.anchor == $.ControlAnchor.ABSOLUTE ) { - this.element.style.display = visible ? - "block" : - "none"; - } else { - this.wrapper.style.display = visible ? - "inline-block" : - "none"; - } + this.wrapper.style.display = visible ? + ( this.anchor == $.ControlAnchor.ABSOLUTE ? 'block' : 'inline-block' ) : + "none"; }, /** @@ -186,7 +189,7 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{ * @param {Number} opactiy - a value between 1 and 0 inclusively. */ setOpacity: function( opacity ) { - if ( this.anchor == $.ControlAnchor.ABSOLUTE || ( this.element[ $.SIGNAL ] && $.Browser.vendor == $.BROWSERS.IE ) ) { + if ( this.element[ $.SIGNAL ] && $.Browser.vendor == $.BROWSERS.IE ) { $.setElementOpacity( this.element, opacity, true ); } else { $.setElementOpacity( this.wrapper, opacity, true ); diff --git a/src/controldock.js b/src/controldock.js index 34a29967..183890c7 100644 --- a/src/controldock.js +++ b/src/controldock.js @@ -128,7 +128,6 @@ break; case $.ControlAnchor.ABSOLUTE: div = this.container; - element.style.position = "absolute"; element.style.margin = "0px"; element.style.padding = "0px"; break; diff --git a/src/navigator.js b/src/navigator.js index 2ce878e8..bfd51980 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -179,19 +179,17 @@ $.Navigator = function( options ){ options.controlOptions ); - if ( options.controlOptions.anchor === $.ControlAnchor.ABSOLUTE ) { - this.element.style.top = typeof ( options.top ) == "number" ? ( options.top + 'px' ) : options.top; - this.element.style.left = typeof ( options.left ) == "number" ? (options.left + 'px' ) : options.left; - } - if ( options.width && options.height ) { - this.element.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height; - this.element.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width; - } else { - viewerSize = $.getElementSize( viewer.element ); - this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; - this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; - if ( options.maintainSizeRatio ) { - this.oldViewerSize = viewerSize; + if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE ) { + if ( options.width && options.height ) { + this.element.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height; + this.element.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width; + } else { + viewerSize = $.getElementSize( viewer.element ); + this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; + this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; + if ( options.maintainSizeRatio ) { + this.oldViewerSize = viewerSize; + } } }