UNPKG

5.97 kBJavaScriptView Raw
1class 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 * Note:
19 *
20 * ```
21 * div#scrolliris_container
22 * iframe#scrolliris_frame
23 * html
24 * body
25 * div#scrolliris_widget
26 * div#scrolliris_icon_container
27 * div#scrolliris_minimap_container
28 * div#scrolliris_canvas_container
29 * ```
30 */
31
32 // iframe
33 let iframe = document.createElement('iframe');
34 iframe.setAttribute('id', 'scrolliris_frame');
35
36 // iframe container
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 // This part assumes -canvas.{js|css} are both hosted in same location
46 // as -browser.js.
47 //
48 // reflector.js --> reflector-canvas.js,.css
49 // reflector-browser.js --> reflector-canvas.js,.css
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>
132body {
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>
210function _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
219function 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
240export default Widget;