Merge pull request #2000 from HerCerM/get-viewer-attached-to-an-element

Provide a static method in OpenSeadragon to get an existing viewer

.eslintrc.hound.json

@@ -278,8 +278,9 @@
         ]
     },
     "globals": {
-        "OpenSeadragon": true,
-        "define": false,
-        "module": false
+        "OpenSeadragon": "writable",
+        "define": "readonly",
+        "module": "readonly",
+        "Map": "readonly"
     }
 }

.eslintrc.json

@@ -17,9 +17,10 @@
         }
     },
     "globals": {
-        "OpenSeadragon": true,
-        "define": false,
-        "module": false
+        "OpenSeadragon": "writable",
+        "define": "readonly",
+        "module": "readonly",
+        "Map": "readonly"
     },
     "rules": {
         "no-unused-vars": [

src/openseadragon.js

@@ -1403,6 +1403,26 @@ function OpenSeadragon( options ){
             CHROMEEDGE: 7
         },
 
+        /**
+         * Keep track of which {@link Viewer}s have been created.
+         * - Key: {@link Element} to which a Viewer is attached.
+         * - Value: {@link Viewer} of the element defined by the key.
+         * @private
+         * @static
+         * @type {Object}
+         */
+        _viewers: new Map(),
+
+       /**
+         * Returns the {@link Viewer} attached to a given DOM element. If there is
+         * no viewer attached to the provided element, undefined is returned.
+         * @function
+         * @param {String|Element} element Accepts an id or element.
+         * @returns {Viewer} The viewer attached to the given element, or undefined.
+         */
+        getViewer: function(element) {
+            return $._viewers.get(this.getElement(element));
+        },
 
         /**
          * Returns a DOM Element for the given id or element.

src/viewer.js

@@ -481,6 +481,8 @@ $.Viewer = function( options ) {
         this.drawer.setImageSmoothingEnabled(this.imageSmoothingEnabled);
     }
 
+    // Register the viewer
+    $._viewers.set(this.element, this);
 };
 
 $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, /** @lends OpenSeadragon.Viewer.prototype */{
@@ -824,6 +826,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         this.canvas = null;
         this.container = null;
 
+        // Unregister the viewer
+        $._viewers.delete(this.element);
+
         // clear our reference to the main element - they will need to pass it in again, creating a new viewer
         this.element = null;
     },

test/modules/viewerretrieval.js

@@ -0,0 +1,93 @@
+/* global QUnit, $, testLog */
+
+(function() {
+    var viewer1;
+    var viewer2;
+
+    QUnit.module('ViewerRetrieval', {
+        beforeEach: function () {
+            $('<div id="example1"></div><div id="example2"></div>')
+                .appendTo("#qunit-fixture");
+
+            testLog.reset();
+
+            viewer1 = OpenSeadragon({
+                id: 'example1',
+                prefixUrl: 'build/openseadragon/images/',
+                springStiffness: 100 // Faster animation = faster tests
+            });
+
+            viewer2 = OpenSeadragon({
+                id: 'example2',
+                prefixUrl: 'build/openseadragon/images/',
+                springStiffness: 100
+            });
+        },
+
+        afterEach: function () {
+            if (viewer1 && viewer1.destroy) {
+                viewer1.destroy();
+            }
+            if (viewer2 && viewer2.destroy) {
+                viewer2.destroy();
+            }
+            viewer1 = viewer2 = null;
+        }
+    });
+
+    QUnit.test('Get Viewers by Id', function(assert) {
+        var retrievedViewer1 = OpenSeadragon.getViewer('example1');
+        assert.ok(retrievedViewer1, 'Attached viewer retrieved');
+        assert.equal(retrievedViewer1, viewer1, 'Viewers are same instance');
+
+        var retrievedViewer2 = OpenSeadragon.getViewer('example2');
+        assert.ok(retrievedViewer2, 'Attached viewer retrieved');
+        assert.equal(retrievedViewer2, viewer2, 'Viewers are same instance');
+
+        // Internal state
+        assert.equal(OpenSeadragon._viewers.size, 2, 'Correct amount of viewers');
+    });
+
+    QUnit.test('Get Viewers by Element', function(assert) {
+        var retrievedViewer1 = OpenSeadragon.getViewer(
+            document.getElementById('example1'));
+        assert.ok(retrievedViewer1, 'Attached viewer retrieved');
+        assert.equal(retrievedViewer1, viewer1, 'Viewers are same instance');
+
+        var retrievedViewer2 = OpenSeadragon.getViewer(
+            document.getElementById('example2'));
+        assert.ok(retrievedViewer2, 'Attached viewer retrieved');
+        assert.equal(retrievedViewer2, viewer2, 'Viewers are same instance');
+
+        // Internal state
+        assert.equal(OpenSeadragon._viewers.size, 2, 'Correct amount of viewers');
+    });
+
+    QUnit.test('Undefined on Get Non-Existent Viewer by Id', function(assert) {
+        var notFoundViewer = OpenSeadragon.getViewer('no-viewer');
+        assert.equal(notFoundViewer, undefined, "Not found viewer is undefined");
+    });
+
+    QUnit.test('Undefined on Get Non-Existent Viewer by Element', function(assert) {
+        var element = document.createElement('div');
+        element.id = 'no-viewer';
+        document.body.appendChild(element);
+
+        var notFoundViewer = OpenSeadragon.getViewer(element);
+        assert.equal(notFoundViewer, undefined, "Not found viewer is undefined");
+    });
+
+    QUnit.test('Cleanup Viewers Registration', function(assert) {
+        viewer1.destroy();
+        viewer2.destroy();
+        viewer1 = viewer2 = null;
+
+        var retrievedViewer1 = OpenSeadragon.getViewer('example1');
+        var retrievedViewer2 = OpenSeadragon.getViewer('example2');
+        assert.equal(retrievedViewer1, undefined, 'Viewer was destroyed');
+        assert.equal(retrievedViewer2, undefined, 'Viewer was destroyed');
+
+        // Internal state
+        assert.equal(OpenSeadragon._viewers.size, 0, 'No viewers are registered');
+    });
+})();

test/test.html

@@ -22,6 +22,7 @@
     <!-- Polyfill must be inserted first because it is testing functions
          reassignments which could be done by other test. -->
     <script src="/test/modules/polyfills.js"></script>
+    <script src="/test/modules/viewerretrieval.js"></script>
     <script src="/test/modules/basic.js"></script>
     <script src="/test/modules/strings.js"></script>
     <script src="/test/modules/formats.js"></script>