63 |
68 |
69 |
70 |
71 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/openseadragon-html-overlay.js:
--------------------------------------------------------------------------------
1 | // OpenSeadragon HTML Overlay plugin 0.0.2
2 | // https://github.com/openseadragon/html-overlay
3 | //
4 | // Licensed under the BSD 3-Clause "New" or "Revised" License:
5 | //
6 | // Copyright (C) 2020 html-overlay contributors
7 | //
8 | // Redistribution and use in source and binary forms, with or without
9 | // modification, are permitted provided that the following conditions are met:
10 | //
11 | // - Redistributions of source code must retain the above copyright notice,
12 | // this list of conditions and the following disclaimer.
13 | //
14 | // - Redistributions in binary form must reproduce the above copyright notice,
15 | // this list of conditions and the following disclaimer in the documentation
16 | // and/or other materials provided with the distribution.
17 | //
18 | // - Neither the name of the copyright holder nor the names of its contributors
19 | // may be used to endorse or promote products derived from this software
20 | // without specific prior written permission.
21 | //
22 | // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
23 | // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
24 | // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
25 | // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
26 | // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
27 | // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
28 | // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
29 | // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
30 | // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
31 | // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
32 | // POSSIBILITY OF SUCH DAMAGE.
33 |
34 | (function () {
35 | var $ = window.OpenSeadragon;
36 |
37 | if (!$) {
38 | $ = require('openseadragon');
39 | if (!$) {
40 | throw new Error('OpenSeadragon is missing.');
41 | }
42 | }
43 |
44 | // ----------
45 | $.Viewer.prototype.htmlOverlay = function (options) {
46 | options = options || {};
47 |
48 | if (this._htmlOverlayInfo) {
49 | return this._htmlOverlayInfo;
50 | }
51 |
52 | this._htmlOverlayInfo = new Overlay(this);
53 | if (options.scale) {
54 | this._htmlOverlayInfo._scale = options.scale; // arbitrary scale for created overlay element
55 | } else {
56 | this._htmlOverlayInfo._scale = 1;
57 | }
58 | return this._htmlOverlayInfo;
59 | };
60 |
61 | // ----------
62 | var Overlay = function (viewer) {
63 | var self = this;
64 |
65 | this._viewer = viewer;
66 |
67 | this._element = document.createElement('div');
68 | this._element.style.position = 'absolute';
69 | this._element.style.left = 0;
70 | this._element.style.top = 0;
71 | // We give it width and height of 0 so it doesn't steal events from the viewer.
72 | this._element.style.width = 0;
73 | this._element.style.height = 0;
74 | this._element.style.transformOrigin = '0 0';
75 | this._viewer.canvas.appendChild(this._element);
76 |
77 | // OpenSeadragon blocks the normal click event action, so we have to reestablish it for links here
78 | new OpenSeadragon.MouseTracker({
79 | element: this._element,
80 | clickHandler: function (event) {
81 | // The event.originalTarget is the new OSD way; we're keeping
82 | // the event.originalEvent.target fallback for old OSD.
83 | var clickTarget =
84 | event.originalTarget || event.originalEvent.target;
85 |
86 | if (/a/i.test(clickTarget.nodeName)) {
87 | if (clickTarget.target === '_blank') {
88 | window.open(clickTarget.href);
89 | } else {
90 | location.href = clickTarget.href;
91 | }
92 | }
93 | }
94 | });
95 |
96 | this._viewer.addHandler('animation', function () {
97 | self.resize();
98 | });
99 |
100 | this._viewer.addHandler('open', function () {
101 | self.resize();
102 | });
103 |
104 | this._viewer.addHandler('rotate', function (evt) {
105 | self.resize();
106 | });
107 |
108 | this._viewer.addHandler('resize', function () {
109 | self.resize();
110 | });
111 |
112 | this.resize();
113 | };
114 |
115 | // ----------
116 | Overlay.prototype = {
117 | // ----------
118 | element: function () {
119 | return this._element;
120 | },
121 |
122 | // ----------
123 | resize: function () {
124 | var p = this._viewer.viewport.pixelFromPoint(
125 | new $.Point(0, 0),
126 | true
127 | );
128 | var zoom = this._viewer.viewport.getZoom(true);
129 | var rotation = this._viewer.viewport.getRotation();
130 |
131 | // TODO: Expose an accessor for _containerInnerSize in the OSD API so we don't have to use the private variable.
132 | var scale =
133 | (this._viewer.viewport._containerInnerSize.x * zoom) /
134 | this._scale;
135 |
136 | this._element.style.transform =
137 | 'translate(' +
138 | p.x +
139 | 'px,' +
140 | p.y +
141 | 'px) scale(' +
142 | scale +
143 | ') rotate(' +
144 | rotation +
145 | ')';
146 | },
147 |
148 | // ----------
149 | onClick: function (element, handler) {
150 | // TODO: Fast click for mobile browsers
151 |
152 | new $.MouseTracker({
153 | element: element,
154 | clickHandler: handler
155 | }).setTracking(true);
156 | }
157 | };
158 | })();
159 |
--------------------------------------------------------------------------------
/openseadragonlogo-transparent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openseadragon/html-overlay/8bffc71ad82f54c0c38404e1f3031851f880b6f3/openseadragonlogo-transparent.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "html-overlay",
3 | "version": "0.0.4",
4 | "description": "An OpenSeadragon plugin that adds HTML overlay capability.",
5 | "main": "openseadragon-html-overlay.js",
6 | "dependencies": {
7 | "openseadragon": "^2.0.0"
8 | },
9 | "devDependencies": {},
10 | "scripts": {
11 | "test": "echo \"Error: no test specified\" && exit 1"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/openseadragon/html-overlay.git"
16 | },
17 | "files": [ ],
18 | "keywords": [
19 | "openseadragon",
20 | "plugin",
21 | "html",
22 | "overlay"
23 | ],
24 | "author": "Ian Gilman",
25 | "license": "BSD-3-Clause",
26 | "bugs": {
27 | "url": "https://github.com/openseadragon/html-overlay/issues"
28 | },
29 | "homepage": "https://github.com/openseadragon/html-overlay#readme"
30 | }
31 |
--------------------------------------------------------------------------------