1 | class Widget {
|
2 | constructor(config, context={}) {
|
3 | this.config = config;
|
4 | this.context = context;
|
5 | }
|
6 |
|
7 | render() {
|
8 | let ctx = this.context;
|
9 | let settings = (ctx.settings || {})
|
10 | , options = (ctx.options || {'widget': 'active'})
|
11 | ;
|
12 |
|
13 | var [frm, map, btn] = this._buildComponents(options.widget);
|
14 |
|
15 | this._insertStyle(frm);
|
16 |
|
17 | |
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | let iframe = document.createElement('iframe');
|
34 | iframe.setAttribute('id', 'scrolliris_frame');
|
35 |
|
36 |
|
37 | let container = document.createElement('div');
|
38 | container.setAttribute('id', 'scrolliris_container');
|
39 | container.appendChild(iframe);
|
40 | document.body.appendChild(container);
|
41 |
|
42 | let currentScript = ctx.currentScript || document.currentScript
|
43 | , scriptSrc = currentScript.getAttribute('src') || ''
|
44 | ;
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 | let reflectorJSRegex = /(-browser)?(\.min)?\.js(\?)?/;
|
51 | let canvasJS = settings.canvasJS || scriptSrc.replace(
|
52 | reflectorJSRegex, '-canvas$2.js$3').toString()
|
53 | , canvasCSS = settings.canvasCSS || scriptSrc.replace(
|
54 | reflectorJSRegex, '-canvas$2.css$3').toString()
|
55 | ;
|
56 |
|
57 | if (canvasJS === '') {
|
58 | console.error('canvasJS is missing');
|
59 | }
|
60 | if (canvasCSS === '') {
|
61 | console.error('canvasCSS is missing');
|
62 | }
|
63 |
|
64 | iframe.contentWindow.ScrollirisReadabilityReflector = {
|
65 | Context: ctx
|
66 | };
|
67 | iframe.contentWindow.document.open();
|
68 | iframe.contentWindow.document.write(
|
69 | this._makeContent(btn, map, canvasJS, canvasCSS));
|
70 | iframe.contentWindow.document.close();
|
71 | }
|
72 |
|
73 | _insertStyle(frm) {
|
74 | let cssContent = `
|
75 | #scrolliris_container {
|
76 | position: fixed;
|
77 | margin: 0;
|
78 | padding: 0;
|
79 | width: auto;
|
80 | height: auto;
|
81 | left: 0px;
|
82 | bottom: 0px;
|
83 | z-index: 9999999 !important;
|
84 | }
|
85 |
|
86 | #scrolliris_frame {
|
87 | z-index: 9999999 !important;
|
88 | position: fixed !important;
|
89 | margin: 0;
|
90 | padding: 0;
|
91 | width: ${frm.width}px;
|
92 | height: ${frm.height}px;
|
93 | left: 9px;
|
94 | bottom: 9px;
|
95 | border: 0;
|
96 | }
|
97 | `;
|
98 |
|
99 | let style = document.createElement('style');
|
100 | style.type = 'text/css';
|
101 | style.appendChild(document.createTextNode(cssContent));
|
102 |
|
103 | let h = document.getElementsByTagName('head')[0];
|
104 | h.appendChild(style);
|
105 | }
|
106 |
|
107 | _buildComponents(widgetState) {
|
108 | let map = {
|
109 | state: (widgetState === 'inactive' ? 'hidden' : 'block')
|
110 | , width: '260'
|
111 | , height: '400'
|
112 | }, btn = {
|
113 | state: (widgetState === 'inactive' ? 'block' : 'hidden')
|
114 | , width: '48'
|
115 | , height: '48'
|
116 | , src: 'https://img.scrolliris.io/icon/scrolliris-logo-white-64x64.png'
|
117 | };
|
118 |
|
119 | let frm = {
|
120 | width: (map.state === 'hidden' ? btn.width : map.width)
|
121 | , height: (map.state === 'hidden' ? btn.height : map.height)
|
122 | };
|
123 |
|
124 | return [frm, map, btn];
|
125 | }
|
126 |
|
127 | _makeContent(btn, map, canvasJS, canvasCSS) {
|
128 | let content = `
|
129 | <head>
|
130 | <meta charset="utf-8">
|
131 | <style>
|
132 | body {
|
133 | margin: 0;
|
134 | padding: 0;
|
135 | }
|
136 |
|
137 | :focus {
|
138 | outline: none;
|
139 | }
|
140 |
|
141 | ::-moz-focus-inner {
|
142 | border: 0;
|
143 | }
|
144 |
|
145 | #scrolliris_icon_container .btn,
|
146 | #scrolliris_minimap_container .btn {
|
147 | cursor: pointer;
|
148 | margin: 0;
|
149 | padding: 0;
|
150 | outline: 0;
|
151 | outline-style: none;
|
152 | border: 0;
|
153 | background: none;
|
154 | box-shadow: none;
|
155 | appearance: none;
|
156 | -moz-appearance: none;
|
157 | -webkit-appearance: none;
|
158 | }
|
159 |
|
160 | .hidden {
|
161 | display: none;
|
162 | border: 0;
|
163 | width: 0;
|
164 | height: 0;
|
165 | }
|
166 |
|
167 | #scrolliris_widget {
|
168 | margin: 0;
|
169 | padding: 0;
|
170 | width: auto;
|
171 | height: auto;
|
172 | }
|
173 |
|
174 | #scrolliris_widget .icon {
|
175 | margin: 0;
|
176 | padding: 0;
|
177 | }
|
178 |
|
179 | #scrolliris_minimap_container {
|
180 | background-color: #ffffff;
|
181 | max-width: 260px;
|
182 | max-height: 400px;
|
183 | border: 1px solid rgba(51, 51, 51, 0.18);
|
184 | border-radius: 1px;
|
185 | }
|
186 | </style>
|
187 | <link rel="stylesheet" href="${canvasCSS}">
|
188 | </head>
|
189 | <body>
|
190 | <div id="scrolliris_widget">
|
191 | <div id="scrolliris_icon_container">
|
192 | <button type="button" class="btn ${btn.state}" onclick="return toggleMinimap(this, event);">
|
193 | <img class="icon" src="${btn.src}" alt="Scrolliris Icon" width="${btn.width}" height="${btn.height}"></button>
|
194 | </div>
|
195 | <div id="scrolliris_minimap_container" class="${map.state}">
|
196 | <div id="scrolliris_header">
|
197 | <div class="header">
|
198 | <h1 style="font-family:monospace;">READABILITY HEATMAP</h1>
|
199 | <button type="button" class="btn close" onclick="return toggleMinimap(null, event)">×</button>
|
200 | </div>
|
201 | </div>
|
202 | <div id="scrolliris_canvas_container"></div>
|
203 | <div id="scrolliris_footer">
|
204 | <p class="txt">Powered by <a href="https://about.scrolliris.com/" target="_blank">Scrolliris</a></p>
|
205 | </div>
|
206 | </div>
|
207 | </div>
|
208 | <script async src="${canvasJS}"></script>
|
209 | <script>
|
210 | function _resetMinimap(minimap) {
|
211 | var frame = window.parent.document.getElementById('scrolliris_frame');
|
212 | if (minimap.classList.contains('hidden')) {
|
213 | frame.setAttribute('style', 'height:48px;width:48px;');
|
214 | } else {
|
215 | frame.setAttribute('style', 'height:400px;width:260px;');
|
216 | }
|
217 | }
|
218 |
|
219 | function toggleMinimap(self, e) {
|
220 | e.preventDefault();
|
221 | var minimap = document.getElementById('scrolliris_minimap_container');
|
222 | minimap.classList.toggle('hidden');
|
223 | _resetMinimap(minimap);
|
224 | if (self !== null) {
|
225 | self.classList.toggle('hidden');
|
226 | } else {
|
227 | var icon = document.getElementById('scrolliris_icon_container')
|
228 | , btn = icon.querySelector('button')
|
229 | ;
|
230 | btn.classList.toggle('hidden');
|
231 | }
|
232 | }
|
233 | </script>
|
234 | </body>
|
235 | `;
|
236 | return content.replace(/\n\s*/g, '');
|
237 | }
|
238 | }
|
239 |
|
240 | export default Widget;
|