Merge branch 'collections' into ian

changelog.txt

@@ -13,6 +13,8 @@ OPENSEADRAGON CHANGELOG
 * Fixed MouseTracker cross-browser issues with tracking pointers over and out of the tracked element (pull request #448, fix for #152, #404, #420, and #427)
 * Fixed incorrect flick direction after image is rotated (#452)
 * Debug mode now works with rotate images (#453)
+* Now supporting dzi xml with namespaces (#462)
+* You can now rotate the navigator along with the main viewer (#455)
 
 1.1.1:
 

src/dzitilesource.js

@@ -107,7 +107,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
         var ns;
         if ( data.Image ) {
             ns = data.Image.xmlns;
-        } else if ( data.documentElement && "Image" == data.documentElement.tagName ) {
+        } else if ( data.documentElement && "Image" == data.documentElement.localName ) {
             ns = data.documentElement.namespaceURI;
         }
 
@@ -221,7 +221,7 @@ function configureFromXML( tileSource, xmlDoc ){
     }
 
     var root           = xmlDoc.documentElement,
-        rootName       = root.tagName,
+        rootName       = root.localName,
         configuration  = null,
         displayRects   = [],
         dispRectNodes,

src/navigator.js

@@ -50,6 +50,7 @@
 $.Navigator = function( options ){
 
     var viewer      = options.viewer,
+        _this = this,
         viewerSize,
         navigatorSize,
         unneededElement;
@@ -161,6 +162,11 @@ $.Navigator = function( options ){
         style.cursor        = 'default';
     }( this.displayRegion.style, this.borderWidth ));
 
+    this.displayRegionContainer = $.makeNeutralElement("div");
+    this.displayRegionContainer.id = this.element.id + '-displayregioncontainer';
+    this.displayRegionContainer.className = "displayregioncontainer";
+    this.displayRegionContainer.style.width = "100%";
+    this.displayRegionContainer.style.height = "100%";
 
     this.element.innerTracker = new $.MouseTracker({
         element:         this.element,
@@ -203,12 +209,22 @@ $.Navigator = function( options ){
 
     $.Viewer.apply( this, [ options ] );
 
-    this.element.getElementsByTagName( 'div' )[0].appendChild( this.displayRegion );
+    this.displayRegionContainer.appendChild(this.displayRegion);
+    this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer);
     unneededElement = this.element.getElementsByTagName('textarea')[0];
     if (unneededElement) {
         unneededElement.parentNode.removeChild(unneededElement);
     }
 
+    if (options.navigatorRotate)
+    {
+        options.viewer.addHandler("rotate", function (args) {
+            _setTransformRotate(_this.displayRegionContainer, args.degrees);
+            _setTransformRotate(_this.displayRegion, -args.degrees);
+            _this.viewport.setRotation(args.degrees);
+        });
+
+    }
 };
 
 $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
@@ -225,7 +241,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
                     (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
                 );
             if ( !containerSize.equals( this.oldContainerSize ) ) {
-                var oldBounds = this.viewport.getBounds();
+                var oldBounds = this.viewport.getBounds().rotate(this.viewport.degrees);
                 var oldCenter = this.viewport.getCenter();
                 this.viewport.resize( containerSize, true );
                 var imageHeight = 1 / this.source.aspectRatio;
@@ -318,7 +334,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
-        this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
+        this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ).rotate( -this.viewer.viewport.degrees, this.viewer.viewport.getHomeBounds().getCenter() ) );
         this.viewer.viewport.applyConstraints();
     }
 }
@@ -390,5 +406,18 @@ function onCanvasScroll( event ) {
     return false;
 }
 
+/**
+    * @function
+    * @private
+    * @param {Object} element
+    * @param {Number} degrees
+    */
+function _setTransformRotate (element, degrees) {
+    element.style.webkitTransform = "rotate(" + degrees + "deg)";
+    element.style.mozTransform = "rotate(" + degrees + "deg)";
+    element.style.msTransform = "rotate(" + degrees + "deg)";
+    element.style.oTransform = "rotate(" + degrees + "deg)";
+    element.style.transform = "rotate(" + degrees + "deg)";
+}
 
 }( OpenSeadragon ));

src/openseadragon.js

@@ -375,6 +375,9 @@
   *     Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
   *     Setting to false can also improve performance when the navigator is configured to a fixed size.
   *
+  * @property {Boolean} [navigatorRotate=true]
+  *     If true, the navigator will be rotated together with the viewer.
+  *
   * @property {Number} [controlsFadeDelay=2000]
   *     The number of milliseconds to wait once the user has stopped interacting
   *     with the interface before begining to fade the controls. Assumes
@@ -952,6 +955,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             navigatorHeight:            null,
             navigatorWidth:             null,
             navigatorAutoResize:        true,
+            navigatorRotate:            true,
 
             // INITIAL ROTATION
             degrees:                0,

src/viewer.js

@@ -1898,7 +1898,8 @@ function openTileSource( viewer, source, options ) {
             minZoomLevel:       _this.minZoomLevel,
             maxZoomLevel:       _this.maxZoomLevel,
             viewer:             _this,
-            degrees:            _this.degrees
+            degrees:            _this.degrees,
+            navigatorRotate:    _this.navigatorRotate
         });
     }
 
@@ -1988,7 +1989,8 @@ function openTileSource( viewer, source, options ) {
                 tileSources:       source,
                 tileHost:          _this.tileHost,
                 prefixUrl:         _this.prefixUrl,
-                viewer:            _this
+                viewer:            _this,
+                navigatorRotate:   _this.navigatorRotate
             });
         }
     }

src/viewport.js

@@ -724,6 +724,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         this.degrees = degrees;
         this.viewer.forceRedraw();
 
+        /**
+         * Raised when rotation has been changed.
+         *
+         * @event update-viewport
+         * @memberof OpenSeadragon.Viewer
+         * @type {object}
+         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+         * @property {Number} degrees - The number of degrees the rotation was set to.
+         * @property {?Object} userData - Arbitrary subscriber-defined object.
+         */
+        if (this.viewer !== null)
+        {
+            this.viewer.raiseEvent('rotate', {"degrees": degrees});
+        }
         return this;
     },