Default/options/member variable cleanup

Clean up before fixing/adding features

src/openseadragon.js

@@ -645,18 +645,18 @@
   *     If sequenceMode is true, then display a scrolling strip of image thumbnails for
   *     navigating through the images.
   *
-  * @property {String} [referenceStripScroll='horizontal']
-  *
   * @property {Element} [referenceStripId=null]
   *
-  * @property {Number} [referenceStripHeight=null]
+  * @property {String} [referenceStripScroll='horizontal']
-  *
-  * @property {Number} [referenceStripWidth=null]
   *
   * @property {String} [referenceStripPosition='BOTTOM_LEFT']
   *
   * @property {Number} [referenceStripSizeRatio=0.2]
   *
+  * @property {Number} [referenceStripHeight=null]
+  *
+  * @property {Number} [referenceStripWidth=null]
+  *
   * @property {Boolean} [collectionMode=false]
   *     Set to true to have the viewer arrange your TiledImages in a grid or line.
   *
@@ -1348,12 +1348,12 @@ function OpenSeadragon( options ){
 
             //REFERENCE STRIP SETTINGS
             showReferenceStrip:          false,
-            referenceStripScroll:       'horizontal',
             referenceStripId:            null,
-            referenceStripHeight:        null,
+            referenceStripScroll:       'horizontal',
-            referenceStripWidth:         null,
             referenceStripPosition:      'BOTTOM_LEFT',
             referenceStripSizeRatio:     0.2,
+            referenceStripHeight:        null,
+            referenceStripWidth:         null,
 
             //COLLECTION VISUALIZATION SETTINGS
             collectionRows:         3, //or columns depending on layout

src/referencestrip.js

@@ -35,7 +35,7 @@
 (function ( $ ) {
 
 // dictionary from id to private properties
-var THIS = {};
+const THIS = {};
 
 /**
  *  The CollectionDrawer is a reimplementation if the Drawer API that
@@ -64,62 +64,57 @@ var THIS = {};
 $.ReferenceStrip = function ( options ) {
     // //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS)
     // showReferenceStrip:          false,
-    // referenceStripScroll:        'horizontal',
     // referenceStripId:            null,
-    // referenceStripHeight:        null,
+    // referenceStripScroll:        'horizontal',
-    // referenceStripWidth:         null,
     // referenceStripPosition:      'BOTTOM_LEFT',
     // referenceStripSizeRatio:     0.2,
+    // referenceStripHeight:        null,
+    // referenceStripWidth:         null,
 
     // this.referenceStrip = new $.ReferenceStrip({
+    //     viewer:      this,
     //     id:          this.referenceStripId,
+    //     scroll:      this.referenceStripScroll,
     //     position:    this.referenceStripPosition,
     //     sizeRatio:   this.referenceStripSizeRatio,
-    //     scroll:      this.referenceStripScroll,
     //     height:      this.referenceStripHeight,
-    //     width:       this.referenceStripWidth,
+    //     width:       this.referenceStripWidth
-    //     tileSources: this.tileSources,
-    //     prefixUrl:   this.prefixUrl,
-    //     useCanvas:   this.useCanvas,
-    //     viewer:      this
     // });
 
-    var _this       = this,
+    const viewer      = options.viewer,
-        viewer      = options.viewer,
+          viewerSize  = $.getElementSize( viewer.element );
-        viewerSize  = $.getElementSize( viewer.element ),
-        element,
-        style,
-        i;
 
     //We may need to create a new element and id if they did not
     //provide the id for the existing element
     if ( !options.id ) {
-        options.id              = 'referencestrip-' + $.now();
+        options.id                   = 'referencestrip-' + $.now();
-        this.element            = $.makeNeutralElement( "div" );
+        this.stripElement            = $.makeNeutralElement( "div" );
-        this.element.id         = options.id;
+        this.stripElement.id         = options.id;
-        this.element.className  = 'referencestrip';
+        this.stripElement.className  = 'referencestrip';
     }
 
-    options = $.extend( true, {
+    options = $.extend(
-        sizeRatio:  $.DEFAULT_SETTINGS.referenceStripSizeRatio,
+        true,
-        position:   $.DEFAULT_SETTINGS.referenceStripPosition,
+        {
-        scroll:     $.DEFAULT_SETTINGS.referenceStripScroll,
+            sizeRatio:  $.DEFAULT_SETTINGS.referenceStripSizeRatio,
-        clickTimeThreshold:  $.DEFAULT_SETTINGS.clickTimeThreshold
+            position:   $.DEFAULT_SETTINGS.referenceStripPosition,
-    }, options, {
+            scroll:     $.DEFAULT_SETTINGS.referenceStripScroll,
-        element:                this.element
+        },
-    } );
+        options
+    );
 
     $.extend( this, options );
+
     //Private state properties
     THIS[this.id] = {
-        animating:           false
+        animating:      false
     };
 
     this.minPixelRatio = this.viewer.minPixelRatio;
 
-    this.element.tabIndex = 0;
+    this.stripElement.tabIndex = 0;
 
-    style = this.element.style;
+    const style = this.stripElement.style;
     style.marginTop     = '0px';
     style.marginRight   = '0px';
     style.marginBottom  = '0px';
@@ -130,21 +125,22 @@ $.ReferenceStrip = function ( options ) {
     style.background    = '#000';
     style.position      = 'relative';
 
-    $.setElementTouchActionNone( this.element );
+    $.setElementTouchActionNone( this.stripElement );
 
-    $.setElementOpacity( this.element, 0.8 );
+    $.setElementOpacity( this.stripElement, 0.8 );
 
-    this.viewer = viewer;
+    this.stripTracker = new $.MouseTracker( {
-    this.tracker = new $.MouseTracker( {
+        userData:       'ReferenceStrip.stripTracker',
-        userData:       'ReferenceStrip.tracker',
+        element:        this.stripElement,
-        element:        this.element,
+        clickTimeThreshold: viewer.clickTimeThreshold || $.DEFAULT_SETTINGS.clickTimeThreshold,
+        clickDistThreshold: viewer.clickDistThreshold || $.DEFAULT_SETTINGS.clickDistThreshold,
         clickHandler:   $.delegate( this, onStripClick ),
         dragHandler:    $.delegate( this, onStripDrag ),
         scrollHandler:  $.delegate( this, onStripScroll ),
         enterHandler:   $.delegate( this, onStripEnter ),
         leaveHandler:   $.delegate( this, onStripLeave ),
-        keyDownHandler: $.delegate( this, onKeyDown ),
+        keyDownHandler: $.delegate( this, onStripKeyDown ),
-        keyHandler:     $.delegate( this, onKeyPress ),
+        keyHandler:     $.delegate( this, onStripKeyPress ),
         preProcessEventHandler: function (eventInfo) {
             if (eventInfo.eventType === 'wheel') {
                 eventInfo.preventDefault = true;
@@ -159,10 +155,10 @@ $.ReferenceStrip = function ( options ) {
         this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
         this.panelHeight = ( viewerSize.y * this.sizeRatio );
 
-        this.element.style.width  = options.width + 'px';
+        this.stripElement.style.width  = options.width + 'px';
-        this.element.style.height = options.height + 'px';
+        this.stripElement.style.height = options.height + 'px';
         viewer.addControl(
-            this.element,
+            this.stripElement,
             { anchor: $.ControlAnchor.BOTTOM_LEFT }
         );
     } else {
@@ -170,30 +166,30 @@ $.ReferenceStrip = function ( options ) {
             this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
             this.panelHeight = ( viewerSize.y * this.sizeRatio );
 
-            this.element.style.width = (
+            this.stripElement.style.width = (
                 this.panelWidth *
                 viewer.tileSources.length
             ) + 'px';
 
-            this.element.style.height = this.panelHeight + 'px';
+            this.stripElement.style.height = this.panelHeight + 'px';
 
             viewer.addControl(
-                this.element,
+                this.stripElement,
                 { anchor: $.ControlAnchor.BOTTOM_LEFT }
             );
         } else {
             this.panelWidth = ( viewerSize.x * this.sizeRatio );
             this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12;
 
-            this.element.style.height = (
+            this.stripElement.style.height = (
                 this.panelHeight *
                 viewer.tileSources.length
             ) + 'px';
 
-            this.element.style.width = this.panelWidth + 'px';
+            this.stripElement.style.width = this.panelWidth + 'px';
 
             viewer.addControl(
-                this.element,
+                this.stripElement,
                 { anchor: $.ControlAnchor.TOP_LEFT }
             );
 
@@ -204,26 +200,27 @@ $.ReferenceStrip = function ( options ) {
     this.miniViewers = {};
 
     /*jshint loopfunc:true*/
-    for ( i = 0; i < viewer.tileSources.length; i++ ) {
+    for ( let i = 0; i < viewer.tileSources.length; i++ ) {
 
-        element = $.makeNeutralElement( 'div' );
+        const panelElement = $.makeNeutralElement( 'div' );
-        element.id = this.element.id + "-" + i;
 
-        element.style.width         = _this.panelWidth + 'px';
+        panelElement.id = this.stripElement.id + "-" + i;
-        element.style.height        = _this.panelHeight + 'px';
-        element.style.display       = 'inline';
-        element.style['float']      = 'left'; //Webkit
-        element.style.cssFloat      = 'left'; //Firefox
-        element.style.styleFloat    = 'left'; //IE
-        element.style.padding       = '2px';
-        $.setElementTouchActionNone( element );
-        $.setElementPointerEventsNone( element );
 
-        this.element.appendChild( element );
+        panelElement.style.width         = this.panelWidth + 'px';
+        panelElement.style.height        = this.panelHeight + 'px';
+        panelElement.style.display       = 'inline';
+        panelElement.style['float']      = 'left'; //Webkit
+        panelElement.style.cssFloat      = 'left'; //Firefox
+        panelElement.style.styleFloat    = 'left'; //IE
+        panelElement.style.padding       = '2px';
+        $.setElementTouchActionNone( panelElement );
+        $.setElementPointerEventsNone( panelElement );
 
-        element.activePanel = false;
+        this.stripElement.appendChild( panelElement );
 
-        this.panels.push( element );
+        panelElement.activePanel = false;
+
+        this.panels.push( panelElement );
 
     }
     loadPanels( this, this.scroll === 'vertical' ? viewerSize.y : viewerSize.x, 0 );
@@ -238,48 +235,47 @@ $.ReferenceStrip.prototype = {
      * @function
      */
     setFocus: function ( page ) {
-        var element      = this.element.querySelector('#' + this.element.id + '-' + page ),
+        const panelElement = this.stripElement.querySelector('#' + this.stripElement.id + '-' + page ),
-            viewerSize   = $.getElementSize( this.viewer.canvas ),
+              viewerSize   = $.getElementSize( this.viewer.canvas ),
-            scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
+              scrollWidth  = Number( this.stripElement.style.width.replace( 'px', '' ) ),
-            scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
+              scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
-            offsetLeft   = -Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+              offsetLeft   = -Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
-            offsetTop    = -Number( this.element.style.marginTop.replace( 'px', '' ) ),
+              offsetTop    = -Number( this.stripElement.style.marginTop.replace( 'px', '' ) );
-            offset;
 
-        if ( this.currentSelected !== element ) {
+        if ( this.currentSelected !== panelElement ) {
             if ( this.currentSelected ) {
                 this.currentSelected.style.background = '#000';
             }
-            this.currentSelected = element;
+            this.currentSelected = panelElement;
             this.currentSelected.style.background = '#999';
 
             if ( 'horizontal' === this.scroll ) {
                 //right left
-                offset = ( Number( page ) ) * ( this.panelWidth + 3 );
+                let offset = ( Number( page ) ) * ( this.panelWidth + 3 );
                 if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) {
                     offset = Math.min( offset, ( scrollWidth - viewerSize.x ) );
-                    this.element.style.marginLeft = -offset + 'px';
+                    this.stripElement.style.marginLeft = -offset + 'px';
                     loadPanels( this, viewerSize.x, -offset );
                 } else if ( offset < offsetLeft ) {
                     offset = Math.max( 0, offset - viewerSize.x / 2 );
-                    this.element.style.marginLeft = -offset + 'px';
+                    this.stripElement.style.marginLeft = -offset + 'px';
                     loadPanels( this, viewerSize.x, -offset );
                 }
             } else {
-                offset = ( Number( page ) ) * ( this.panelHeight + 3 );
+                let offset = ( Number( page ) ) * ( this.panelHeight + 3 );
                 if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
                     offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
-                    this.element.style.marginTop = -offset + 'px';
+                    this.stripElement.style.marginTop = -offset + 'px';
                     loadPanels( this, viewerSize.y, -offset );
                 } else if ( offset < offsetTop ) {
                     offset = Math.max( 0, offset - viewerSize.y / 2 );
-                    this.element.style.marginTop = -offset + 'px';
+                    this.stripElement.style.marginTop = -offset + 'px';
                     loadPanels( this, viewerSize.y, -offset );
                 }
             }
 
             this.currentPage = page;
-            onStripEnter.call( this, { eventSource: this.tracker } );
+            onStripEnter.call( this, { eventSource: this.stripTracker } );
         }
     },
 
@@ -296,15 +292,15 @@ $.ReferenceStrip.prototype = {
 
     destroy: function() {
         if (this.miniViewers) {
-          for (var key in this.miniViewers) {
+          for (const key in this.miniViewers) {
             this.miniViewers[key].destroy();
           }
         }
 
-        this.tracker.destroy();
+        this.stripTracker.destroy();
 
-        if (this.element) {
+        if (this.stripElement) {
-            this.viewer.removeControl( this.element );
+            this.viewer.removeControl( this.stripElement );
         }
     }
 
@@ -318,7 +314,7 @@ $.ReferenceStrip.prototype = {
  */
 function onStripClick( event ) {
     if ( event.quick ) {
-        var page;
+        let page;
 
         if ( 'horizontal' === this.scroll ) {
             // // +4px fix to solve problem with precision on thumbnail selection if there is a lot of them
@@ -333,7 +329,7 @@ function onStripClick( event ) {
         this.viewer.goToPage( page );
     }
 
-    this.element.focus();
+    this.stripElement.focus();
 }
 
 
@@ -344,25 +340,24 @@ function onStripClick( event ) {
  */
 function onStripDrag( event ) {
 
-    this.dragging = true;
+    if ( this.stripElement ) {
-    if ( this.element ) {
+        const offsetLeft   = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
-        var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+              offsetTop    = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
-        offsetTop    = Number( this.element.style.marginTop.replace( 'px', '' ) ),
+              scrollWidth  = Number( this.stripElement.style.width.replace( 'px', '' ) ),
-        scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
+              scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
-        scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
+              viewerSize   = $.getElementSize( this.viewer.canvas );
-        viewerSize   = $.getElementSize( this.viewer.canvas );
 
         if ( 'horizontal' === this.scroll ) {
             if ( -event.delta.x > 0 ) {
                 //forward
                 if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
-                    this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
+                    this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
                     loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
                 }
             } else if ( -event.delta.x < 0 ) {
                 //reverse
                 if ( offsetLeft < 0 ) {
-                    this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
+                    this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px';
                     loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
                 }
             }
@@ -370,13 +365,13 @@ function onStripDrag( event ) {
             if ( -event.delta.y > 0 ) {
                 //forward
                 if ( offsetTop > -( scrollHeight - viewerSize.y ) ) {
-                    this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
+                    this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
                     loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
                 }
             } else if ( -event.delta.y < 0 ) {
                 //reverse
                 if ( offsetTop < 0 ) {
-                    this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
+                    this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px';
                     loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
                 }
             }
@@ -393,39 +388,39 @@ function onStripDrag( event ) {
  * @function
  */
 function onStripScroll( event ) {
-    if ( this.element ) {
+    if ( this.stripElement ) {
-        var offsetLeft   = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+        const offsetLeft   = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
-        offsetTop    = Number( this.element.style.marginTop.replace( 'px', '' ) ),
+              offsetTop    = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
-        scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
+              scrollWidth  = Number( this.stripElement.style.width.replace( 'px', '' ) ),
-        scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
+              scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
-        viewerSize   = $.getElementSize( this.viewer.canvas );
+              viewerSize   = $.getElementSize( this.viewer.canvas );
 
         if ( 'horizontal' === this.scroll ) {
             if ( event.scroll > 0 ) {
                 //forward
                 if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
-                    this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px';
+                    this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) );
+                    loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) );
                 }
             } else if ( event.scroll < 0 ) {
                 //reverse
                 if ( offsetLeft < 0 ) {
-                    this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px';
+                    this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) );
+                    loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) );
                 }
             }
         } else {
             if ( event.scroll < 0 ) {
                 //scroll up
                 if ( offsetTop > viewerSize.y - scrollHeight ) {
-                    this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px';
+                    this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) );
+                    loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) );
                 }
             } else if ( event.scroll > 0 ) {
                 //scroll dowm
                 if ( offsetTop < 0 ) {
-                    this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px';
+                    this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) );
+                    loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) );
                 }
             }
         }
@@ -436,27 +431,22 @@ function onStripScroll( event ) {
 
 
 function loadPanels( strip, viewerSize, scroll ) {
-    var panelSize,
+    let panelSize;
-        activePanelsStart,
-        activePanelsEnd,
-        miniViewer,
-        i,
-        element;
     if ( 'horizontal' === strip.scroll ) {
         panelSize = strip.panelWidth;
     } else {
         panelSize = strip.panelHeight;
     }
-    activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
+    const activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
-    activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
+    let activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
     activePanelsStart = activePanelsEnd - activePanelsStart;
     activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
 
-    for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
+    for ( let i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
-        element = strip.panels[i];
+        const panelElement = strip.panels[i];
-        if ( !element.activePanel ) {
+        if ( !panelElement.activePanel ) {
-            var miniTileSource;
+            const originalTileSource = strip.viewer.tileSources[i];
-            var originalTileSource = strip.viewer.tileSources[i];
+            let miniTileSource;
             if (originalTileSource.referenceStripThumbnailUrl) {
                 miniTileSource = {
                     type: 'image',
@@ -465,10 +455,10 @@ function loadPanels( strip, viewerSize, scroll ) {
             } else {
                 miniTileSource = originalTileSource;
             }
-            miniViewer = new $.Viewer( {
+            const miniViewer = new $.Viewer( {
-                id:                     element.id,
+                id:                     panelElement.id,
                 tileSources:            [miniTileSource],
-                element:                element,
+                element:                panelElement,
                 navigatorSizeRatio:     strip.sizeRatio,
                 showNavigator:          false,
                 mouseNavEnabled:        false,
@@ -479,7 +469,7 @@ function loadPanels( strip, viewerSize, scroll ) {
                 animationTime:          0,
                 loadTilesWithAjax:      strip.viewer.loadTilesWithAjax,
                 ajaxHeaders:            strip.viewer.ajaxHeaders,
-                useCanvas:              strip.useCanvas
+                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
@@ -490,9 +480,9 @@ function loadPanels( strip, viewerSize, scroll ) {
             miniViewer.innerTracker.setTracking( false );
             miniViewer.outerTracker.setTracking( false );
 
-            strip.miniViewers[element.id] = miniViewer;
+            strip.miniViewers[panelElement.id] = miniViewer;
 
-            element.activePanel = true;
+            panelElement.activePanel = true;
         }
     }
 }
@@ -504,7 +494,7 @@ function loadPanels( strip, viewerSize, scroll ) {
  * @function
  */
 function onStripEnter( event ) {
-    var element = event.eventSource.element;
+    const element = event.eventSource.element;
 
     //$.setElementOpacity(element, 0.8);
 
@@ -531,7 +521,7 @@ function onStripEnter( event ) {
  * @function
  */
 function onStripLeave( event ) {
-    var element = event.eventSource.element;
+    const element = event.eventSource.element;
 
     if ( 'horizontal' === this.scroll ) {
 
@@ -552,25 +542,25 @@ function onStripLeave( event ) {
  * @inner
  * @function
  */
-function onKeyDown( event ) {
+function onStripKeyDown( event ) {
     //console.log( event.keyCode );
 
     if ( !event.ctrl && !event.alt && !event.meta ) {
         switch ( event.keyCode ) {
             case 38: //up arrow
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 40: //down arrow
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 37: //left arrow
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 39: //right arrow
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
                 event.preventDefault = true;
                 break;
             default:
@@ -589,36 +579,36 @@ function onKeyDown( event ) {
  * @inner
  * @function
  */
-function onKeyPress( event ) {
+function onStripKeyPress( event ) {
     //console.log( event.keyCode );
 
     if ( !event.ctrl && !event.alt && !event.meta ) {
         switch ( event.keyCode ) {
             case 61: //=|+
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 45: //-|_
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 48: //0|)
             case 119: //w
             case 87: //W
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 115: //s
             case 83: //S
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 97: //a
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } );
                 event.preventDefault = true;
                 break;
             case 100: //d
-                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } );
                 event.preventDefault = true;
                 break;
             default:

src/viewer.js

@@ -2395,16 +2395,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
             if (this.tileSources.length && this.tileSources.length > 1) {
                 this.referenceStrip = new $.ReferenceStrip({
+                    viewer:      this,
                     id:          this.referenceStripId,
+                    scroll:      this.referenceStripScroll,
                     position:    this.referenceStripPosition,
                     sizeRatio:   this.referenceStripSizeRatio,
-                    scroll:      this.referenceStripScroll,
                     height:      this.referenceStripHeight,
-                    width:       this.referenceStripWidth,
+                    width:       this.referenceStripWidth
-                    tileSources: this.tileSources,
-                    prefixUrl:   this.prefixUrl,
-                    useCanvas:   this.useCanvas,
-                    viewer:      this
                 });
 
                 this.referenceStrip.setFocus( this._sequenceIndex );