From daa387f4b7e25199e051277d38d8d41b45e0a8bd Mon Sep 17 00:00:00 2001
From: David McAlpine <dave@mcalpine.io>
Date: Mon, 15 Jul 2019 22:27:03 -0400
Subject: [PATCH] allow reference strip to work in a web component
---
src/referencestrip.js | 2 +-
test/modules/referencestrip.js | 26 ++++++++++++++++++++++++++
2 files changed, 27 insertions(+), 1 deletion(-)
diff --git a/src/referencestrip.js b/src/referencestrip.js
index 62be61f8..405f5559 100644
--- a/src/referencestrip.js
+++ b/src/referencestrip.js
@@ -236,7 +236,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
* @function
*/
setFocus: function ( page ) {
- var element = $.getElement( this.element.id + '-' + page ),
+ var element = this.element.querySelector('#' + this.element.id + '-' + page ),
viewerSize = $.getElementSize( this.viewer.canvas ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
diff --git a/test/modules/referencestrip.js b/test/modules/referencestrip.js
index 857c16fb..2b300632 100644
--- a/test/modules/referencestrip.js
+++ b/test/modules/referencestrip.js
@@ -44,4 +44,30 @@
done();
});
+ // ----------
+ QUnit.test('shadow dom', function(assert) {
+ var done = assert.async();
+
+ var shadowDiv = document.createElement('div');
+ shadowDiv.attachShadow({
+ mode: 'open'
+ });
+ shadowDiv.shadowRoot.innerHTML = `<div id="shadow-example"></div>`
+
+ createViewer({
+ element: shadowDiv.shadowRoot.querySelector('#shadow-example'),
+ sequenceMode: true,
+ showReferenceStrip: true,
+ tileSources: [
+ '/test/data/tall.dzi',
+ '/test/data/wide.dzi'
+ ]
+ });
+
+ $(shadowDiv).appendTo("#qunit-fixture");
+
+ assert.ok(viewer.referenceStrip, 'referenceStrip exists');
+ done();
+ })
+
})();