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

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

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.wrapper.removeChild( this.element );
+        this.container.removeChild( this.wrapper );
-        }
-        this.container.removeChild( this.anchor == $.ControlAnchor.ABSOLUTE ? this.element : 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 this.wrapper.style.display != "none";
-        return controlElement.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.wrapper.style.display = visible ?
-            this.element.style.display = visible ?
+            ( this.anchor == $.ControlAnchor.ABSOLUTE ? 'block' : 'inline-block' ) :
-                "block" :
+            "none";
-                "none";
-        } else {
-            this.wrapper.style.display = visible ?
-                "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 );

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;

src/navigator.js

@@ -179,19 +179,17 @@ $.Navigator = function( options ){
         options.controlOptions
     );
 
-    if ( options.controlOptions.anchor === $.ControlAnchor.ABSOLUTE ) {
+    if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE ) {
-        this.element.style.top = typeof ( options.top )  == "number" ? ( options.top + 'px' ) : options.top;
+        if ( options.width && options.height ) {
-        this.element.style.left  = typeof ( options.left )  == "number" ?  (options.left + 'px' ) : options.left;
+            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;
-    if ( options.width && options.height ) {
+        } else {
-        this.element.style.height = typeof ( options.height )  == "number" ? ( options.height + 'px' ) : options.height;
+            viewerSize = $.getElementSize( viewer.element );
-        this.element.style.width  = typeof ( options.width )  == "number" ? ( options.width + 'px' ) : options.width;
+            this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
-    } else {
+            this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
-        viewerSize = $.getElementSize( viewer.element );
+            if ( options.maintainSizeRatio ) {
-        this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
+                this.oldViewerSize = viewerSize;
-        this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
+            }
-        if ( options.maintainSizeRatio ) {
-            this.oldViewerSize = viewerSize;
         }
     }