New options for fixing/adding features

src/openseadragon.js

@@ -645,17 +645,66 @@
   *     If sequenceMode is true, then display a scrolling strip of image thumbnails for
   *     navigating through the images.
   *
+  * @property {Element} [referenceStripElement=null]
+  *     The element to hold the reference strip.
+  *     If an element is specified, the Id option (see referenceStripId) is ignored.
+  *     If no element nor ID is specified, a div element will be generated accordingly.
+  *
   * @property {Element} [referenceStripId=null]
+  *     The ID of a div to hold the reference strip.
+  *     If an ID is specified, the referenceStripPosition, referenceStripSizeRatio, referenceStripMaintainSizeRatio, referenceStrip[Top|Left|Height|Width], referenceStripAutoHide and referenceStripAutoFade options will be ignored.
+  *     If an ID is not specified, a div element will be generated and placed on top of the main image.
   *
   * @property {String} [referenceStripScroll='horizontal']
+  *     The orientation of the reference strip. Valid values are 'horizontal' and 'vertical'
   *
   * @property {String} [referenceStripPosition='BOTTOM_LEFT']
+  *     Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
+  *     If 'ABSOLUTE' is specified, then referenceStrip[Top|Left|Height|Width] determines the size and position of the reference strip in the viewer, and referenceStripSizeRatio and referenceStripMaintainSizeRatio are ignored.<br>
+  *     For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the referenceStripSizeRatio or referenceStrip[Height|Width] values determine the size of the reference strip.
   *
   * @property {Number} [referenceStripSizeRatio=0.2]
+  *     Ratio of reference strip size to viewer size. Ignored if referenceStrip[Height|Width] are specified.
   *
-  * @property {Number} [referenceStripHeight=null]
+  * @property {Boolean} [referenceStripMaintainSizeRatio=false]
+  *     If true, the reference strip is resized (using referenceStripSizeRatio) when the viewer size changes.
   *
-  * @property {Number} [referenceStripWidth=null]
+  * @property {Number|String} [referenceStripTop=null]
+  *     Specifies the location of the reference strip (see referenceStripPosition).
+  *
+  * @property {Number|String} [referenceStripLeft=null]
+  *     Specifies the location of the reference strip (see referenceStripPosition).
+  *
+  * @property {Number|String} [referenceStripHeight=null]
+  *     Specifies the size of the reference strip (see referenceStripPosition).
+  *     If specified, referenceStripSizeRatio is ignored.
+  *
+  * @property {Number|String} [referenceStripWidth=null]
+  *     Specifies the size of the reference strip (see referenceStripPosition).
+  *     If specified, referenceStripSizeRatio is ignored.
+  *
+  * @property {Boolean} [referenceStripAutoResize=true]
+  *     When true and reference strip is embedded in its Viewer,the reference strip will automatically resize when its Viewer size changes.
+  *
+  * @property {Boolean} [referenceStripAutoHide=true]
+  *     If the user stops interacting with the reference strip, hide the reference strip.
+  *
+  * @property {Number} [referenceStripAutoHideFactor=0.5]
+  *     Amount of the reference strip to auto hide when referenceStripAutoHide is true.
+  *     Valid values are 0.0 to 1.0, where 1.0 hides the entire strip, 0.5 hides half the strip, etc.
+  *
+  * @property {Boolean} [referenceStripAutoFade=true]
+  *     If the user stops interacting with the viewport, fade the reference strip.
+  *     Setting to false will make the reference strip always visible.
+  *
+  * @property {String} [referenceStripBackground='#000']
+  *     Specifies the background color of the reference strip
+  *
+  * @property {Number} [referenceStripOpacity=0.8]
+  *     Specifies the opacity of the reference strip.
+  *
+  * @property {String} [referenceStripBorderColor='#555']
+  *     Specifies the border color of the reference strip
   *
   * @property {Boolean} [collectionMode=false]
   *     Set to true to have the viewer arrange your TiledImages in a grid or line.
@@ -1347,13 +1396,24 @@ function OpenSeadragon( options ){
             subPixelRoundingForTransparency:   null,
 
             //REFERENCE STRIP SETTINGS
-            showReferenceStrip:          false,
+            showReferenceStrip:              false,
-            referenceStripId:            null,
+            referenceStripElement:           null,
-            referenceStripScroll:       'horizontal',
+            referenceStripId:                null,
-            referenceStripPosition:      'BOTTOM_LEFT',
+            referenceStripScroll:            'horizontal',
-            referenceStripSizeRatio:     0.2,
+            referenceStripPosition:          'BOTTOM_LEFT',
-            referenceStripHeight:        null,
+            referenceStripSizeRatio:         0.2,
-            referenceStripWidth:         null,
+            referenceStripMaintainSizeRatio: false,
+            referenceStripTop:               null,
+            referenceStripLeft:              null,
+            referenceStripHeight:            null,
+            referenceStripWidth:             null,
+            referenceStripAutoResize:        true,
+            referenceStripAutoHide:          true,
+            referenceStripAutoHideFactor:    0.5,
+            referenceStripAutoFade:          true,
+            referenceStripBackground:        '#000',
+            referenceStripOpacity:           0.8,
+            referenceStripBorderColor:       '#555',
 
             //COLLECTION VISUALIZATION SETTINGS
             collectionRows:         3, //or columns depending on layout

src/referencestrip.js

@@ -63,15 +63,47 @@ const THIS = {};
  */
 $.ReferenceStrip = function ( options ) {
     // //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS)
-    // showReferenceStrip:          false,
+    // showReferenceStrip:           false,
-    // referenceStripId:            null,
+    // referenceStripElement:        null,
-    // referenceStripScroll:        'horizontal',
+    // referenceStripId:             null,
-    // referenceStripPosition:      'BOTTOM_LEFT',
+    // referenceStripScroll:         'horizontal',
-    // referenceStripSizeRatio:     0.2,
+    // referenceStripPosition:       'BOTTOM_LEFT',
-    // referenceStripHeight:        null,
+    // referenceStripSizeRatio:      0.2,
-    // referenceStripWidth:         null,
+    // referenceStripMaintainSizeRatio: false,
+    // referenceStripTop:            null,
+    // referenceStripLeft:           null,
+    // referenceStripHeight:         null,
+    // referenceStripWidth:          null,
+    // referenceStripAutoResize:     true,
+    // referenceStripAutoHide:       true,
+    // referenceStripAutoHideFactor: 0.5,
+    // referenceStripAutoFade:       true,
+    // referenceStripBackground:     '#000',
+    // referenceStripOpacity:        0.8,
+    // referenceStripBorderColor:    '#555',
 
     // this.referenceStrip = new $.ReferenceStrip({
+    //     viewer:            this,
+    //     element:           this.referenceStripElement,
+    //     id:                this.referenceStripId,
+    //     scroll:            this.referenceStripScroll,
+    //     position:          this.referenceStripPosition,
+    //     sizeRatio:         this.referenceStripSizeRatio,
+    //     maintainSizeRatio: this.referenceStripMaintainSizeRatio,
+    //     top:               this.referenceStripTop,
+    //     left:              this.referenceStripLeft,
+    //     width:             this.referenceStripWidth,
+    //     height:            this.referenceStripHeight,
+    //     autoResize:        this.referenceStripAutoResize,
+    //     autoHide:          this.referenceStripAutoHide,
+    //     autoHideFactor:    this.referenceStripAutoHideFactor,
+    //     autoFade:          this.referenceStripAutoFade,
+    //     background:        this.referenceStripBackground,
+    //     opacity:           this.referenceStripOpacity,
+    //     borderColor:       this.referenceStripBorderColor,
+    //     //TODO
+    //     //crossOriginPolicy: this.crossOriginPolicy,
+
     //     viewer:      this,
     //     id:          this.referenceStripId,
     //     scroll:      this.referenceStripScroll,
@@ -96,9 +128,27 @@ $.ReferenceStrip = function ( options ) {
     options = $.extend(
         true,
         {
-            sizeRatio:  $.DEFAULT_SETTINGS.referenceStripSizeRatio,
+            // // Viewer passes these commented options always...
-            position:   $.DEFAULT_SETTINGS.referenceStripPosition,
+            // // We only need these if ReferenceStrip constructor is made usable outside of Viewer
-            scroll:     $.DEFAULT_SETTINGS.referenceStripScroll,
+            // element:             $.DEFAULT_SETTINGS.referenceStripElement,
+            // id:                  $.DEFAULT_SETTINGS.referenceStripId,
+            // scroll:              $.DEFAULT_SETTINGS.referenceStripScroll,
+            // position:            $.DEFAULT_SETTINGS.referenceStripPosition,
+            // sizeRatio:           $.DEFAULT_SETTINGS.referenceStripSizeRatio,
+            // maintainSizeRatio:   $.DEFAULT_SETTINGS.referenceStripMaintainSizeRatio,
+            // top:                 $.DEFAULT_SETTINGS.referenceStripTop,
+            // left:                $.DEFAULT_SETTINGS.referenceStripLeft,
+            // width:               $.DEFAULT_SETTINGS.referenceStripWidth,
+            // height:              $.DEFAULT_SETTINGS.referenceStripHeight,
+            // autoResize:          $.DEFAULT_SETTINGS.referenceStripAutoResize,
+            // autoHide:            $.DEFAULT_SETTINGS.referenceStripAutoHide,
+            // autoHideFactor:      $.DEFAULT_SETTINGS.referenceStripAutoHideFactor,
+            // autoFade:            $.DEFAULT_SETTINGS.referenceStripAutoFade,
+            // background:          $.DEFAULT_SETTINGS.referenceStripBackground,
+            // opacity:             $.DEFAULT_SETTINGS.referenceStripOpacity,
+            // borderColor:         $.DEFAULT_SETTINGS.referenceStripBorderColor,
+            clickTimeThreshold:  $.DEFAULT_SETTINGS.clickTimeThreshold,
+            clickDistThreshold:  $.DEFAULT_SETTINGS.clickDistThreshold,
         },
         options
     );
@@ -110,8 +160,6 @@ $.ReferenceStrip = function ( options ) {
         animating:      false
     };
 
-    this.minPixelRatio = this.viewer.minPixelRatio;
-
     this.stripElement.tabIndex = 0;
 
     const style = this.stripElement.style;
@@ -130,17 +178,17 @@ $.ReferenceStrip = function ( options ) {
     $.setElementOpacity( this.stripElement, 0.8 );
 
     this.stripTracker = new $.MouseTracker( {
-        userData:       'ReferenceStrip.stripTracker',
+        userData:           'ReferenceStrip.stripTracker',
-        element:        this.stripElement,
+        element:            this.stripElement,
-        clickTimeThreshold: viewer.clickTimeThreshold || $.DEFAULT_SETTINGS.clickTimeThreshold,
+        clickTimeThreshold: this.clickTimeThreshold,
-        clickDistThreshold: viewer.clickDistThreshold || $.DEFAULT_SETTINGS.clickDistThreshold,
+        clickDistThreshold: this.clickDistThreshold,
-        clickHandler:   $.delegate( this, onStripClick ),
+        clickHandler:       $.delegate( this, onStripClick ),
-        dragHandler:    $.delegate( this, onStripDrag ),
+        dragHandler:        $.delegate( this, onStripDrag ),
-        scrollHandler:  $.delegate( this, onStripScroll ),
+        scrollHandler:      $.delegate( this, onStripScroll ),
-        enterHandler:   $.delegate( this, onStripEnter ),
+        enterHandler:       $.delegate( this, onStripEnter ),
-        leaveHandler:   $.delegate( this, onStripLeave ),
+        leaveHandler:       $.delegate( this, onStripLeave ),
-        keyDownHandler: $.delegate( this, onStripKeyDown ),
+        keyDownHandler:     $.delegate( this, onStripKeyDown ),
-        keyHandler:     $.delegate( this, onStripKeyPress ),
+        keyHandler:         $.delegate( this, onStripKeyPress ),
         preProcessEventHandler: function (eventInfo) {
             if (eventInfo.eventType === 'wheel') {
                 eventInfo.preventDefault = true;
@@ -231,6 +279,52 @@ $.ReferenceStrip = function ( options ) {
 /** @lends OpenSeadragon.ReferenceStrip.prototype */
 $.ReferenceStrip.prototype = {
 
+    //TODO reference strip auto resize
+
+    // /**
+    //  * Used to notify the reference strip when its size has changed.
+    //  * Especially useful when {@link OpenSeadragon.Options}.referenceStripAutoResize is set to false and the reference strip is resizable.
+    //  * @function
+    //  */
+    // updateSize: function () {
+    //     if ( this.viewport ) {
+    //         var containerSize = new $.Point(
+    //                 (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
+    //                 (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
+    //             );
+
+    //         if ( !containerSize.equals( this.oldContainerSize ) ) {
+    //             this.viewport.resize( containerSize, true );
+    //             this.viewport.goHome(true);
+    //             this.oldContainerSize = containerSize;
+    //             this.drawer.clear();
+    //             this.world.draw();
+    //         }
+    //     }
+    // },
+
+    // /**
+    //  * Explicitly sets the width of the reference strip, in web coordinates. Disables automatic resizing.
+    //  * @param {Number|String} width - the new width, either a number of pixels or a CSS string, such as "100%"
+    //  */
+    // setWidth: function(width) {
+    //     this.width = width;
+    //     this.element.style.width = typeof (width) === "number" ? (width + 'px') : width;
+    //     this._resizeWithViewer = false;
+    //     this.updateSize();
+    // },
+
+    // /**
+    //  * Explicitly sets the height of the reference strip, in web coordinates. Disables automatic resizing.
+    //  * @param {Number|String} height - the new height, either a number of pixels or a CSS string, such as "100%"
+    //  */
+    // setHeight: function(height) {
+    //     this.height = height;
+    //     this.element.style.height = typeof (height) === "number" ? (height + 'px') : height;
+    //     this._resizeWithViewer = false;
+    //     this.updateSize();
+    // },
+
     /**
      * @function
      */
@@ -287,6 +381,35 @@ $.ReferenceStrip.prototype = {
             // $.console.log( 'image reference strip update' );
             return true;
         }
+
+        //TODO reference strip auto resize
+
+        // var viewerSize,
+        //     newWidth,
+        //     newHeight;
+
+        // viewerSize = $.getElementSize( this.viewer.element );
+        // if ( this._resizeWithViewer && viewerSize.x && viewerSize.y && !viewerSize.equals( this.oldViewerSize ) ) {
+        //     this.oldViewerSize = viewerSize;
+
+        //     if ( this.maintainSizeRatio || !this.elementArea) {
+        //         newWidth  = viewerSize.x * this.sizeRatio;
+        //         newHeight = viewerSize.y * this.sizeRatio;
+        //     } else {
+        //         newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
+        //         newHeight = this.elementArea / newWidth;
+        //     }
+
+        //     this.element.style.width  = Math.round( newWidth ) + 'px';
+        //     this.element.style.height = Math.round( newHeight ) + 'px';
+
+        //     if (!this.elementArea) {
+        //         this.elementArea = newWidth * newHeight;
+        //     }
+
+        //     this.updateSize();
+        // }
+
         return false;
     },
 
@@ -459,17 +582,13 @@ function loadPanels( strip, viewerSize, scroll ) {
                 id:                     panelElement.id,
                 tileSources:            [miniTileSource],
                 element:                panelElement,
-                navigatorSizeRatio:     strip.sizeRatio,
-                showNavigator:          false,
                 mouseNavEnabled:        false,
                 showNavigationControl:  false,
-                showSequenceControl:    false,
                 immediateRender:        true,
                 blendTime:              0,
                 animationTime:          0,
                 loadTilesWithAjax:      strip.viewer.loadTilesWithAjax,
                 ajaxHeaders:            strip.viewer.ajaxHeaders,
-                useCanvas:              strip.viewer.useCanvas || $.DEFAULT_SETTINGS.useCanvas
             } );
             // Allow pointer events to pass through miniViewer's canvas/container
             //   elements so implicit pointer capture works on touch devices
@@ -564,7 +683,7 @@ function onStripKeyDown( event ) {
                 event.preventDefault = true;
                 break;
             default:
-                //console.log( 'navigator keycode %s', event.keyCode );
+                //console.log( 'reference strip keycode %s', event.keyCode );
                 event.preventDefault = false;
                 break;
         }
@@ -612,7 +731,7 @@ function onStripKeyPress( event ) {
                 event.preventDefault = true;
                 break;
             default:
-                //console.log( 'navigator keycode %s', event.keyCode );
+                //console.log( 'reference strip keycode %s', event.keyCode );
                 event.preventDefault = false;
                 break;
         }

src/viewer.js

@@ -1244,6 +1244,11 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             this.navigator.update( this.viewport );
         }
 
+        //TODO reference strip auto resize
+        // if ( this.referenceStrip ) {
+        //     this.referenceStrip.update();
+        // }
+
         /**
          * Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
          *
@@ -1334,6 +1339,18 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                         _this.navigator.update( _this.viewport );
                     });
                 }
+                //TODO reference strip auto resize
+                // if ( (_this.navigator && _this.viewport) || _this.referenceStrip ) {
+                //     //09/08/2018 - Fabroh : Fix issue #1504 : Ensure to get the navigator updated on fullscreen out with custom location with a timeout
+                //     setTimeout(function(){
+                //         if ( _this.navigator && _this.viewport ) {
+                //             _this.navigator.update( _this.viewport );
+                //         }
+                //         if ( _this.referenceStrip ) {
+                //             _this.referenceStrip.update();
+                //         }
+                //     });
+                // }
                 /**
                  * Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
                  *
@@ -2395,13 +2412,26 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
             if (this.tileSources.length && this.tileSources.length > 1) {
                 this.referenceStrip = new $.ReferenceStrip({
-                    viewer:      this,
+                    viewer:            this,
-                    id:          this.referenceStripId,
+                    element:           this.referenceStripElement,
-                    scroll:      this.referenceStripScroll,
+                    id:                this.referenceStripId,
-                    position:    this.referenceStripPosition,
+                    scroll:            this.referenceStripScroll,
-                    sizeRatio:   this.referenceStripSizeRatio,
+                    position:          this.referenceStripPosition,
-                    height:      this.referenceStripHeight,
+                    sizeRatio:         this.referenceStripSizeRatio,
-                    width:       this.referenceStripWidth
+                    maintainSizeRatio: this.referenceStripMaintainSizeRatio,
+                    top:               this.referenceStripTop,
+                    left:              this.referenceStripLeft,
+                    width:             this.referenceStripWidth,
+                    height:            this.referenceStripHeight,
+                    autoResize:        this.referenceStripAutoResize,
+                    autoHide:          this.referenceStripAutoHide,
+                    autoHideFactor:    this.referenceStripAutoHideFactor,
+                    autoFade:          this.referenceStripAutoFade,
+                    background:        this.referenceStripBackground,
+                    opacity:           this.referenceStripOpacity,
+                    borderColor:       this.referenceStripBorderColor,
+                    //TODO
+                    //crossOriginPolicy: this.crossOriginPolicy,
                 });
 
                 this.referenceStrip.setFocus( this._sequenceIndex );
@@ -3718,8 +3748,9 @@ function updateOnce( viewer ) {
         viewer.raiseEvent('viewport-change');
     }
 
-    if( viewer.referenceStrip ){
+    //TODO reference strip auto resize
-        animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
+    if ( viewer.referenceStrip ) {
+        animated = viewer.referenceStrip.update() || animated;
     }
 
     var currentAnimating = THIS[ viewer.hash ].animating;