Changelog for #2175

added navigatorElement, fix bug id-overwrite on element

changelog.txt

@@ -4,7 +4,7 @@ OPENSEADRAGON CHANGELOG
 3.2.0: (in progress)
 
 * Improved the constraints that keep the image in the viewer, specifically when zoomed out a lot (#2160 @joedf)
-* You can now provide an element for the navigator (as an alternative to an ID); currently only works when you create the navigator yourself (#2166 @cameronbaney @joedf)
+* You can now provide an element for the navigator (as an alternative to an ID) (#1303 @cameronbaney, #2166 #2175 @joedf)
 
 3.1.0:
 

src/navigator.js

@@ -62,14 +62,14 @@ $.Navigator = function( options ){
         if ( options.element ) {
             if ( options.id ){
                 $.console.warn("Given option.id for Navigator was ignored since option.element was provided and is being used instead.");
-            } else {
+            }
+
             // Don't overwrite the element's id if it has one already
             if ( options.element.id ) {
                 options.id = options.element.id;
             } else {
                 options.id = 'navigator-' + $.now();
             }
-            }
 
             this.element = options.element;
         } else {

src/openseadragon.js

@@ -410,6 +410,11 @@
   * @property {Boolean} [showNavigator=false]
   *     Set to true to make the navigator minimap appear.
   *
+  * @property {Element} [navigatorElement=null]
+  *     The element to hold the navigator minimap.
+  *     If an element is specified, the Id option (see navigatorId) is ignored.
+  *     If no element nor ID is specified, a div element will be generated accordingly.
+  *
   * @property {String} [navigatorId=navigator-GENERATED DATE]
   *     The ID of a div to hold the navigator minimap.
   *     If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, navigator[Top|Left|Height|Width] and navigatorAutoFade options will be ignored.
@@ -1265,6 +1270,7 @@ function OpenSeadragon( options ){
 
             //VIEWPORT NAVIGATOR SETTINGS
             showNavigator:              false,
+            navigatorElement:           null,
             navigatorId:                null,
             navigatorPosition:          null,
             navigatorSizeRatio:         0.2,

src/viewer.js

@@ -431,6 +431,7 @@ $.Viewer = function( options ) {
     //Instantiate a navigator if configured
     if ( this.showNavigator){
         this.navigator = new $.Navigator({
+            element:           this.navigatorElement,
             id:                this.navigatorId,
             position:          this.navigatorPosition,
             sizeRatio:         this.navigatorSizeRatio,