mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-21 20:56:09 +03:00
ABSOLUTE Control bug fix
Wrapped ABSOLUTE positioned controls in a div so fade opacity would work correctly. Added 'navigator-scroll' event addition to changelog.
This commit is contained in:
Mark Salsbery
parent
71fb3a5e33
commit
14acb5d581
@ -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)
|
||||
|
||||
@ -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 );
|
||||
|
||||
@ -128,7 +128,6 @@
|
||||
break;
|
||||
case $.ControlAnchor.ABSOLUTE:
|
||||
div = this.container;
|
||||
element.style.position = "absolute";
|
||||
element.style.margin = "0px";
|
||||
element.style.padding = "0px";
|
||||
break;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user