Merge branch 'master' into ratio

src/control.js

@@ -53,21 +53,34 @@ $.ControlAnchor = {
  * to interact with the zoomable interface. Any control can be anchored to any 
  * element.
  * @class
- * @param {Element} element - the contol element to be anchored in the container.
+ * @param {Element} element - the control element to be anchored in the container.
- * @param {OpenSeadragon.ControlAnchor} anchor - the location to anchor at.
+ * @param {Object } options - All required and optional settings for configuring a control element.
+ * @param {OpenSeadragon.ControlAnchor} [options.anchor=OpenSeadragon.ControlAnchor.NONE] - the position of the control
+ *  relative to the container.
+ * @param {Boolean} [options.attachToViewer=true] - Whether the control should be added directly to the viewer, or
+ *  directly to the container
+ * @param {Boolean} [options.autoFade=true] - Whether the control should have the autofade behavior
  * @param {Element} container - the element to control will be anchored too.
- * 
+ *
- * @property {Element} element - the element providing the user interface with 
+ * @property {Element} element - the element providing the user interface with
  *  some type of control. Eg a zoom-in button
  * @property {OpenSeadragon.ControlAnchor} anchor - the position of the control 
  *  relative to the container.
- * @property {Element} container - the element within with the control is 
+ * @property {Boolean} autoFade - Whether the control should have the autofade behavior
+ * @property {Element} container - the element within with the control is
  *  positioned.
- * @property {Element} wrapper - a nuetral element surrounding the control 
+ * @property {Element} wrapper - a neutral element surrounding the control
  *  element.
  */
 $.Control = function ( element, options, container ) {
     var parent = element.parentNode;
+    if (typeof options === 'number')
+    {
+        $.console.error("Passing an anchor directly into the OpenSeadragon.Control constructor is deprecated; " +
+                        "please use an options object instead.  " +
+                        "Support for this deprecated variant is scheduled for removal in December 2013");
+         options = {anchor: options};
+    }
     options.attachToViewer = (typeof options.attachToViewer === 'undefined') ? true : options.attachToViewer;
     this.autoFade = (typeof options.autoFade === 'undefined') ? true : options.autoFade;
     this.element    = element;

src/navigator.js

@@ -138,6 +138,7 @@ $.Navigator = function( options ){
 
     this.element.innerTracker = new $.MouseTracker({
         element:        this.element,
+        dragHandler:        $.delegate( this, onCanvasDrag ),
         clickHandler:       $.delegate( this, onCanvasClick ),
         releaseHandler:     $.delegate( this, onCanvasRelease ),
         scrollHandler:  function(){
@@ -147,16 +148,6 @@ $.Navigator = function( options ){
         }
     }).setTracking( true );
 
-    this.displayRegion.innerTracker = new $.MouseTracker({
-        element:            this.displayRegion, 
-        clickTimeThreshold: this.clickTimeThreshold, 
-        clickDistThreshold: this.clickDistThreshold,
-
-        dragHandler:        $.delegate( this, onCanvasDrag ),
-        releaseHandler:     $.delegate( this, onCanvasRelease ),
-        scrollHandler:      $.delegate( this, onCanvasScroll )
-    }).setTracking( true ); // default state
-
     /*this.displayRegion.outerTracker = new $.MouseTracker({
         element:            this.container, 
         clickTimeThreshold: this.clickTimeThreshold, 

src/openseadragon.js

@@ -208,6 +208,13 @@
   * @param {Boolean} [options.showNavigationControl=true]
   *     Set to false to prevent the appearance of the default navigation controls.
   *
+  * @param {Boolean} [options.showNavigator=false]
+  *     Set to true to make the navigator minimap appear.
+  *
+  * @param {Boolean} [options.navigatorId=navigator-GENERATED DATE]
+  *     Set the ID of a div to hold the navigator minimap.  If one is not specified,
+  *     one will be generated and placed on top of the main image
+  *
   * @param {Number} [options.controlsFadeDelay=2000]
   *     The number of milliseconds to wait once the user has stopped interacting
   *     with the interface before begining to fade the controls. Assumes
@@ -523,7 +530,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             mouseNavEnabled:        true,  //GENERAL MOUSE INTERACTIVITY
             
             //VIEWPORT NAVIGATOR SETTINGS
-            showNavigator:          true, //promoted to default in 0.9.64
+            showNavigator:          false,
             navigatorId:            null,
             navigatorHeight:        null,
             navigatorWidth:         null,

src/tile.js

@@ -110,9 +110,6 @@ $.Tile.prototype = {
      * @param {Element} container
      */
     drawHTML: function( container ) {
-
-        var containerSize = $.getElementSize( container );
-
         if ( !this.loaded || !this.image ) {
             $.console.warn(
                 "Attempting to draw tile %s when it's not yet loaded.",
@@ -121,29 +118,9 @@ $.Tile.prototype = {
             return;
         }
 
-        /* EXISTING IMPLEMENTATION
-        if ( !this.element ) {
-            this.element              = $.makeNeutralElement("img");
-            this.element.src          = this.url;
-
-            this.style                     = this.element.style;
-            this.style.position            = "absolute";
-            this.style.msInterpolationMode = "nearest-neighbor";
-        }
-
-        if ( this.element.parentNode != container ) {
-            container.appendChild( this.element );
-        }
-
-        this.style.top     = position.y + "px";
-        this.style.left    = position.x + "px";
-        this.style.height  = size.y + "px";
-        this.style.width   = size.x + "px";
-        */
-
         //EXPERIMENTAL - trying to figure out how to scale the container
         //               content during animation of the container size.
-        
+
         if ( !this.element ) {
             this.element              = $.makeNeutralElement("img");
             this.element.src          = this.url;
@@ -156,14 +133,12 @@ $.Tile.prototype = {
             container.appendChild( this.element );
         }
 
-        this.style.top     = 100 * ( this.position.y / containerSize.y ) + "%";
+        this.style.top     = this.position.y + "px";
-        this.style.left    = 100 * ( this.position.x / containerSize.x ) + "%";
+        this.style.left    = this.position.x + "px";
-        this.style.height  = 100 * ( this.size.y / containerSize.y ) + "%";
+        this.style.height  = this.size.y + "px";
-        this.style.width   = 100 * ( this.size.x / containerSize.x ) + "%";
+        this.style.width   = this.size.x + "px";
-        
+
         $.setElementOpacity( this.element, this.opacity );
-
-
     },
 
     /**

src/viewer.js

@@ -236,6 +236,7 @@ $.Viewer = function( options ) {
         style.position = "absolute";
         style.top      = "0px";
         style.left     = "0px";
+        style.resize   = "none";
     }(  this.keyboardCommandArea.style ));
 
     this.container.insertBefore( this.canvas, this.container.firstChild );

test/demo/basic.html

@@ -1,7 +1,8 @@
 <html>
 <head>
     <title>OpenSeadragon Basic Demo</title>
-    <script type="text/javascript" src='../../build/openseadragon/openseadragon.min.js'></script>
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
     <style type="text/css">
 
       .openseadragon1 {
@@ -22,7 +23,8 @@
             // debugMode: true,
             id: "contentDiv",
             prefixUrl: "../../build/openseadragon/images/",
-            tileSources: "/test/data/testpattern.dzi"
+            tileSources: "../data/testpattern.dzi",
+            showNavigator:true
         });
 
     </script>

test/demo/navigatorcustomlocationdemo.html

@@ -1,48 +0,0 @@
-<html>
-    <head>
-    <title>OpenSeadragon Navigator in a custom location Demo</title>
-    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
-
-    <style type="text/css">
-      .openseadragon1
-      {
-      width:      800px;
-      height:     600px;
-      border:     1px solid black;
-      color:      #333; /* text color for messages */
-      background-color: black;
-      }
-
-    </style>
-</head>
-<body>
-    <div>
-        Simple demo page to show how to put the navigator in a custom location
-    </div>
-    <div id="contentDiv" class="openseadragon1"></div>
-    <div id="navigatorDiv" class="findme"></div>
-
-    <script type="text/javascript">
-
-    var viewer = OpenSeadragon({
-        id:"contentDiv",
-        navigatorId: "navigatorDiv",
-        prefixUrl:"../../build/openseadragon/images/",
-        tileSources:{
-             Image:{
-                xmlns:"http://schemas.microsoft.com/deepzoom/2008",
-                Url:"../data/testpattern_files/",
-                Format:"jpg",
-                Overlap:"2",
-                TileSize:"256",
-                Size:{  
-                    Height:"1000",
-                    Width:"1000"
-                }
-            }
-        }
-    });
-
-        </script>
-    </body>
-</html>

test/demo/navigatorjquerydemo.html

@@ -1,55 +0,0 @@
-<html>
-    <head>
-    <title>OpenSeadragon Navigator in a JQuery UI Dialog Demo</title>
-    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
-        <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
-        <script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
-        <link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css"/>
-
-    <style type="text/css">
-      .openseadragon
-      {
-      width:      800px;
-      height:     600px;
-      border:     1px solid black;
-      color:      #333; /* text color for messages */
-      background-color: black;
-      }
-
-    </style>
-</head>
-<body>
-    <div>
-       Simple demo page to show how to put the navigator in a moveable JQuery UI dialog.
-    </div>
-    <div id="contentDiv" class="openseadragon"></div>
-        <div id="navigatorDialog">
-    <div id="navigatorDiv"></div>
-        </div>
-
-    <script type="text/javascript">
-
-    $('#navigatorDialog').dialog();
-
-    var viewer = OpenSeadragon({
-        id:"contentDiv",
-        navigatorId: "navigatorDiv",
-        prefixUrl:"../../build/openseadragon/images/",
-        tileSources:{
-             Image:{
-                xmlns:"http://schemas.microsoft.com/deepzoom/2008",
-                Url:"../data/testpattern_files/",
-                Format:"jpg",
-                Overlap:"2",
-                TileSize:"256",
-                Size:{  
-                    Height:"1000",
-                    Width:"1000"
-                }
-            }
-        }
-    });
-
-        </script>
-    </body>
-</html>

test/navigator.js

@@ -10,12 +10,19 @@ QUnit.config.autostart = false;
         contentStartFromLeft,
         contentStartFromTop,
         displayRegionWidth,
-        displayRegionHeight;
+        displayRegionHeight,
+        topNavigatorClickAdjustment;
 
     module("navigator", {
         setup:function () {
             Util.resetDom();
             resetTestVariables();
+            $(document).scrollTop(0);
+            $(document).scrollLeft(0);
+        },
+        teardown:function () {
+            Util.resetDom();
+            resetTestVariables();
         }
     });
 
@@ -36,6 +43,7 @@ QUnit.config.autostart = false;
         contentStartFromTop = null;
         displayRegionWidth = null;
         displayRegionHeight = null;
+        topNavigatorClickAdjustment = 0;
     };
 
     var assessNavigatorLocation = function (expectedX, expectedY) {
@@ -150,6 +158,7 @@ QUnit.config.autostart = false;
     }();
 
     var simulateNavigatorClick = function (viewer, locationX, locationY) {
+        //Assumes that the page has not been scrolled from the top or left
         var $canvas = $(viewer.element).find('.openseadragon-canvas'),
             offset = $canvas.offset(),
             event = {
@@ -215,11 +224,11 @@ QUnit.config.autostart = false;
                 yPos;
             if (theContentCorner === "TOPLEFT") {
                 xPos = contentStartFromLeft;
-                yPos = contentStartFromTop;
+                yPos = contentStartFromTop + topNavigatorClickAdjustment;
             }
             else if (theContentCorner === "TOPRIGHT") {
                 xPos = contentStartFromLeft + displayRegionWidth;
-                yPos = contentStartFromTop;
+                yPos = contentStartFromTop+ topNavigatorClickAdjustment;
             }
             else if (theContentCorner === "BOTTOMRIGHT") {
                 xPos = contentStartFromLeft + displayRegionWidth;
@@ -271,11 +280,16 @@ QUnit.config.autostart = false;
               assessmentOperation:assessViewerInCenter,
                 assessmentMessage:"After drag on navigator from top left"  }
         ],
-            autoHideWaitTime = 7500;
+            autoFadeWaitTime = 100;
 
         seadragonProperties.visibilityRatio = 1;
         viewer = OpenSeadragon(seadragonProperties);
 
+        if ($.isNumeric(testProperties.topNavigatorClickAdjustment))
+        {
+            topNavigatorClickAdjustment = testProperties.topNavigatorClickAdjustment;
+        }
+
         var assessNavigatorOperationAndTakeNextStep = function (step) {
             return function () {
                 var nextStep = step + 1;
@@ -291,12 +305,18 @@ QUnit.config.autostart = false;
             };
         };
 
-        var assessAfterDragOnViewer = function () {
+        var assessAfterSnapback = function () {
-            assessDisplayRegion("After pan");
+            assessDisplayRegion("After snapback");
             navigatorOperationScenarios[0].interactionOperation();
             waitForViewer(assessNavigatorOperationAndTakeNextStep(0));
         };
 
+        var assessAfterDragOnViewer = function () {
+            assessDisplayRegion("After pan");
+            viewer.viewport.applyConstraints();
+            waitForViewer(assessAfterSnapback);
+        };
+
         var assessAfterZoomOnViewer = function () {
             var target = new OpenSeadragon.Point(0.4, 0.4);
             assessDisplayRegion("After image zoom");
@@ -313,12 +333,12 @@ QUnit.config.autostart = false;
             waitForViewer(assessAfterZoomOnViewer);
         };
 
-        var assessAutohideTriggered = function () {
+        var assessAutoFadeTriggered = function () {
-            ok($(testProperties.navigatorLocator).parent().css("opacity") == 0, "Expecting navigator to be autohide when in the default location");
+            ok($(testProperties.navigatorLocator).parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
             waitForViewer(captureInitialStateThenAct);
         };
 
-        var assessAutohideDisabled = function () {
+        var assessAutoFadeDisabled = function () {
             ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
             waitForViewer(captureInitialStateThenAct);
         };
@@ -334,12 +354,12 @@ QUnit.config.autostart = false;
                      clientX:1,
                      clientY:1
                  };
-                 var body = $("body").simulate('mouseover', event);
+                mainViewerElement.simulate('blur', event);
-                if (testProperties.expectedAutoHide) {
+                if (testProperties.expectedAutoFade) {
-                    setTimeout(assessAutohideTriggered,autoHideWaitTime);
+                    setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
                 }
                 else {
-                    setTimeout(assessAutohideDisabled,autoHideWaitTime);
+                    setTimeout(assessAutoFadeDisabled,autoFadeWaitTime);
                 }
             }
         };
@@ -351,13 +371,13 @@ QUnit.config.autostart = false;
                 id:'tallexample',
                 prefixUrl:'/build/openseadragon/images/',
                 tileSources:'/test/data/wide.dzi',
-                showNavigator:true
+                showNavigator:true,
+                animationTime:0
             },
             {
                 displayRegionLocator:'.navigator .displayregion',
                 navigatorLocator:'.navigator',
-                testAutohide: false,
+                testAutoFade: false,
-                expectedAutoHide: false,
                 determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
                     var mainViewerElement = $("#" + seadragonProperties.id),
                         navigatorElement = $(testProperties.navigatorLocator);
@@ -373,13 +393,13 @@ QUnit.config.autostart = false;
                 navigatorId:'exampleNavigator',
                 prefixUrl:'/build/openseadragon/images/',
                 tileSources:'/test/data/wide.dzi',
-                showNavigator:true
+                showNavigator:true,
+                animationTime:0
             },
             {
                 displayRegionLocator:'#exampleNavigator .displayregion',
                 navigatorLocator:'#exampleNavigator',
-                testAutohide: false,
+                testAutoFade: false,
-                expectedAutoHide: true,
                 determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
                     var mainViewerElement = $("#" + seadragonProperties.id),
                         navigatorViewerElement = $("#" + seadragonProperties.navigatorId);
@@ -396,13 +416,19 @@ QUnit.config.autostart = false;
                 navigatorId:'exampleNavigator',
                 prefixUrl:'/build/openseadragon/images/',
                 tileSources:'/test/data/tall.dzi',
-                showNavigator:true
+                showNavigator:true,
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
             },
             {
                 displayRegionLocator:'#exampleNavigator .displayregion',
                 navigatorLocator:'#exampleNavigator',
-                testAutohide: true,
+                testAutoFade: true,
-                expectedAutoHide: false,
+                expectedAutoFade: false,
+                //On Firefox at some screen size/resolution/magnification combinations, there is an issue with the
+                //simulated click.  This property is a work around for that problem
+                topNavigatorClickAdjustment: 15,
                 determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
                     var jqueryDialog = $(testProperties.navigatorLocator);
                     assessNavigatorLocation(jqueryDialog.offset().left,
@@ -416,13 +442,16 @@ QUnit.config.autostart = false;
                 id:'wideexample',
                 prefixUrl:'/build/openseadragon/images/',
                 tileSources:'/test/data/tall.dzi',
-                showNavigator:true
+                showNavigator:true,
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
             },
             {
                 displayRegionLocator:'.navigator .displayregion',
                 navigatorLocator:'.navigator',
-                testAutohide: true,
+                testAutoFade: true,
-                expectedAutoHide: true,
+                expectedAutoFade: true,
                 determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
                     var mainViewerElement = $("#" + seadragonProperties.id),
                         navigatorElement = $(testProperties.navigatorLocator);