mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

ABSOLUTE Control bug fix

Browse Source 
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 2013-12-13 11:55:36 -08:00
parent 71fb3a5e33
commit 14acb5d581
4 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.txt
View File

@ -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)

47
src/control.js
View File

@ -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 );

1
src/controldock.js
View File

@ -128,7 +128,6 @@
break;
case $.ControlAnchor.ABSOLUTE:
div = this.container;
element.style.position = "absolute";
element.style.margin = "0px";
element.style.padding = "0px";
break;

24
src/navigator.js
View File

@ -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;
}
}
}