@saasquatch/squatch-js 2.6.0-0 → 2.6.0-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +87 -68
  2. package/coverage/clover.xml +3 -885
  3. package/coverage/coverage-final.json +1 -23
  4. package/coverage/lcov-report/WidgetApi.ts.html +631 -0
  5. package/coverage/lcov-report/api/AnalyticsApi.ts.html +4 -4
  6. package/coverage/lcov-report/api/WidgetApi.ts.html +36 -33
  7. package/coverage/lcov-report/api/graphql.ts.html +1 -1
  8. package/coverage/lcov-report/utils/domready.ts.html +2 -2
  9. package/coverage/lcov-report/utils/io.ts.html +31 -16
  10. package/coverage/lcov-report/utils/validate.ts.html +48 -48
  11. package/coverage/lcov-report/validate.ts.html +1 -1
  12. package/coverage/lcov-report/widgets/EmbedWidget.ts.html +21 -24
  13. package/coverage/lcov-report/widgets/PopupWidget.ts.html +72 -27
  14. package/coverage/lcov-report/widgets/Widget.ts.html +78 -21
  15. package/coverage/lcov-report/widgets/Widgets.ts.html +1060 -0
  16. package/coverage/lcov.info +0 -1628
  17. package/cucumber.js +3 -3
  18. package/dist/squatch.d.ts +0 -15
  19. package/dist/squatch.esm.js +145 -153
  20. package/dist/squatch.esm.js.map +1 -1
  21. package/dist/squatch.js +144 -153
  22. package/dist/squatch.js.map +1 -1
  23. package/dist/squatch.min.js +1 -1
  24. package/dist/utils/io.d.ts +1 -1
  25. package/dist/widgets/EmbedWidget.d.ts +5 -5
  26. package/dist/widgets/PopupWidget.d.ts +5 -5
  27. package/dist/widgets/Widget.d.ts +3 -2
  28. package/dist/widgets/Widgets.d.ts +1 -10
  29. package/dist/widgets/declarative/DeclarativeWidget.d.ts +4 -6
  30. package/jest.config.ts +3 -5
  31. package/package.json +5 -5
  32. package/tsconfig.json +1 -0
package/coverage/lcov-report/widgets/EmbedWidget.ts.html CHANGED
@@ -179,8 +179,7 @@
179
179
  <a name='L114'></a><a href='#L114'>114</a>
180
180
  <a name='L115'></a><a href='#L115'>115</a>
181
181
  <a name='L116'></a><a href='#L116'>116</a>
182
- <a name='L117'></a><a href='#L117'>117</a>
183
- <a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
182
+ <a name='L117'></a><a href='#L117'>117</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
184
183
  <span class="cline-any cline-neutral">&nbsp;</span>
185
184
  <span class="cline-any cline-yes">1x</span>
186
185
  <span class="cline-any cline-yes">1x</span>
@@ -201,22 +200,23 @@
201
200
  <span class="cline-any cline-neutral">&nbsp;</span>
202
201
  <span class="cline-any cline-neutral">&nbsp;</span>
203
202
  <span class="cline-any cline-no">&nbsp;</span>
203
+ <span class="cline-any cline-no">&nbsp;</span>
204
204
  <span class="cline-any cline-neutral">&nbsp;</span>
205
205
  <span class="cline-any cline-no">&nbsp;</span>
206
206
  <span class="cline-any cline-no">&nbsp;</span>
207
207
  <span class="cline-any cline-no">&nbsp;</span>
208
- <span class="cline-any cline-neutral">&nbsp;</span>
209
- <span class="cline-any cline-neutral">&nbsp;</span>
210
208
  <span class="cline-any cline-no">&nbsp;</span>
209
+ <span class="cline-any cline-neutral">&nbsp;</span>
211
210
  <span class="cline-any cline-no">&nbsp;</span>
212
211
  <span class="cline-any cline-neutral">&nbsp;</span>
213
212
  <span class="cline-any cline-neutral">&nbsp;</span>
214
- <span class="cline-any cline-no">&nbsp;</span>
215
213
  <span class="cline-any cline-neutral">&nbsp;</span>
216
214
  <span class="cline-any cline-no">&nbsp;</span>
217
215
  <span class="cline-any cline-no">&nbsp;</span>
218
216
  <span class="cline-any cline-neutral">&nbsp;</span>
217
+ <span class="cline-any cline-neutral">&nbsp;</span>
219
218
  <span class="cline-any cline-no">&nbsp;</span>
219
+ <span class="cline-any cline-neutral">&nbsp;</span>
220
220
  <span class="cline-any cline-no">&nbsp;</span>
221
221
  <span class="cline-any cline-no">&nbsp;</span>
222
222
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -224,7 +224,6 @@
224
224
  <span class="cline-any cline-no">&nbsp;</span>
225
225
  <span class="cline-any cline-no">&nbsp;</span>
226
226
  <span class="cline-any cline-no">&nbsp;</span>
227
- <span class="cline-any cline-no">&nbsp;</span>
228
227
  <span class="cline-any cline-neutral">&nbsp;</span>
229
228
  <span class="cline-any cline-neutral">&nbsp;</span>
230
229
  <span class="cline-any cline-no">&nbsp;</span>
@@ -232,18 +231,15 @@
232
231
  <span class="cline-any cline-no">&nbsp;</span>
233
232
  <span class="cline-any cline-no">&nbsp;</span>
234
233
  <span class="cline-any cline-neutral">&nbsp;</span>
234
+ <span class="cline-any cline-neutral">&nbsp;</span>
235
235
  <span class="cline-any cline-no">&nbsp;</span>
236
236
  <span class="cline-any cline-no">&nbsp;</span>
237
237
  <span class="cline-any cline-no">&nbsp;</span>
238
238
  <span class="cline-any cline-neutral">&nbsp;</span>
239
- <span class="cline-any cline-no">&nbsp;</span>
240
- <span class="cline-any cline-neutral">&nbsp;</span>
241
- <span class="cline-any cline-neutral">&nbsp;</span>
242
239
  <span class="cline-any cline-neutral">&nbsp;</span>
243
240
  <span class="cline-any cline-no">&nbsp;</span>
244
241
  <span class="cline-any cline-neutral">&nbsp;</span>
245
242
  <span class="cline-any cline-neutral">&nbsp;</span>
246
- <span class="cline-any cline-neutral">&nbsp;</span>
247
243
  <span class="cline-any cline-no">&nbsp;</span>
248
244
  <span class="cline-any cline-no">&nbsp;</span>
249
245
  <span class="cline-any cline-no">&nbsp;</span>
@@ -265,6 +261,7 @@
265
261
  <span class="cline-any cline-neutral">&nbsp;</span>
266
262
  <span class="cline-any cline-neutral">&nbsp;</span>
267
263
  <span class="cline-any cline-no">&nbsp;</span>
264
+ <span class="cline-any cline-no">&nbsp;</span>
268
265
  <span class="cline-any cline-neutral">&nbsp;</span>
269
266
  <span class="cline-any cline-no">&nbsp;</span>
270
267
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -281,6 +278,7 @@
281
278
  <span class="cline-any cline-neutral">&nbsp;</span>
282
279
  <span class="cline-any cline-neutral">&nbsp;</span>
283
280
  <span class="cline-any cline-no">&nbsp;</span>
281
+ <span class="cline-any cline-no">&nbsp;</span>
284
282
  <span class="cline-any cline-neutral">&nbsp;</span>
285
283
  <span class="cline-any cline-no">&nbsp;</span>
286
284
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -316,12 +314,17 @@ export default class EmbedWidget extends Widget {
316
314
  <span class="cstat-no" title="statement not covered" > super(params);</span>
317
315
  }
318
316
  &nbsp;
319
- <span class="fstat-no" title="function not covered" > async </span>load(frame: HTMLIFrameElement) {
317
+ <span class="fstat-no" title="function not covered" > async </span>load() {
318
+ const frame = <span class="cstat-no" title="statement not covered" >this._createFrame();</span>
320
319
  const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
321
320
  &nbsp;
322
321
  <span class="cstat-no" title="statement not covered" > if (this.container) {</span>
323
322
  <span class="cstat-no" title="statement not covered" > if (element.shadowRoot) {</span>
324
- <span class="cstat-no" title="statement not covered" > element.shadowRoot.appendChild(frame);</span>
323
+ <span class="cstat-no" title="statement not covered" > if (element.shadowRoot.lastChild?.nodeName === "IFRAME")</span>
324
+ <span class="cstat-no" title="statement not covered" > element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);</span>
325
+ else {
326
+ <span class="cstat-no" title="statement not covered" > element.shadowRoot.appendChild(frame);</span>
327
+ }
325
328
  }
326
329
  // Widget reloaded - replace existing element
327
330
  else <span class="cstat-no" title="statement not covered" >if (element.firstChild) {</span>
@@ -333,6 +336,7 @@ export default class EmbedWidget extends Widget {
333
336
  } else <span class="cstat-no" title="statement not covered" ><span class="missing-if-branch" title="if path not taken" >I</span>if (!element.firstChild || element.firstChild.nodeName === "#text") {</span>
334
337
  <span class="cstat-no" title="statement not covered" > element.appendChild(frame);</span>
335
338
  }
339
+ &nbsp;
336
340
  const { contentWindow } = <span class="cstat-no" title="statement not covered" >frame;</span>
337
341
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!contentWindow) {</span>
338
342
  <span class="cstat-no" title="statement not covered" > throw new Error("Frame needs a content window");</span>
@@ -347,20 +351,11 @@ export default class EmbedWidget extends Widget {
347
351
  <span class="cstat-no" title="statement not covered" > frameDoc.close();</span>
348
352
  <span class="cstat-no" title="statement not covered" > domready(frameDoc, <span class="fstat-no" title="function not covered" >async </span>() =&gt; {</span>
349
353
  const _sqh = <span class="cstat-no" title="statement not covered" >contentWindow.squatch || contentWindow.widgetIdent;</span>
350
- const ctaElement = <span class="cstat-no" title="statement not covered" >frameDoc.getElementById("cta");</span>
351
- &nbsp;
352
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (ctaElement) {</span>
353
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!ctaElement.parentNode) {</span>
354
- <span class="cstat-no" title="statement not covered" > throw new Error("ctaElement needs a parentNode");</span>
355
- }
356
- <span class="cstat-no" title="statement not covered" > ctaElement.parentNode.removeChild(ctaElement);</span>
357
- }
358
354
  &nbsp;
359
355
  // @ts-ignore -- number will be cast to string by browsers
360
356
  <span class="cstat-no" title="statement not covered" > frame.height = frameDoc.body.scrollHeight;</span>
361
357
  &nbsp;
362
358
  // Adjust frame height when size of body changes
363
- // @ts-ignore
364
359
  const ro = <span class="cstat-no" title="statement not covered" >new contentWindow["ResizeObserver"](<span class="fstat-no" title="function not covered" >(e</span>ntries) =&gt; {</span>
365
360
  <span class="cstat-no" title="statement not covered" > for (const entry of entries) {</span>
366
361
  const { height } = <span class="cstat-no" title="statement not covered" >entry.contentRect;</span>
@@ -380,7 +375,8 @@ export default class EmbedWidget extends Widget {
380
375
  }
381
376
  &nbsp;
382
377
  // Un-hide if element is available and refresh data
383
- <span class="fstat-no" title="function not covered" > open(</span>frame: HTMLIFrameElement) {
378
+ <span class="fstat-no" title="function not covered" > open(</span>) {
379
+ const frame = <span class="cstat-no" title="statement not covered" >this._findFrame();</span>
384
380
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!frame) <span class="cstat-no" title="statement not covered" >return _log("no target element to open");</span></span>
385
381
  &nbsp;
386
382
  const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
@@ -396,7 +392,8 @@ export default class EmbedWidget extends Widget {
396
392
  <span class="cstat-no" title="statement not covered" > _log("loaded");</span>
397
393
  }
398
394
  &nbsp;
399
- <span class="fstat-no" title="function not covered" > close(</span>frame: HTMLIFrameElement) {
395
+ <span class="fstat-no" title="function not covered" > close(</span>) {
396
+ const frame = <span class="cstat-no" title="statement not covered" >this._findFrame();</span>
400
397
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!frame) <span class="cstat-no" title="statement not covered" >return _log("no target element to close");</span></span>
401
398
  &nbsp;
402
399
  const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
@@ -421,7 +418,7 @@ export default class EmbedWidget extends Widget {
421
418
  <div class='footer quiet pad2 space-top1 center small'>
422
419
  Code coverage generated by
423
420
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
424
- at 2023-07-03T20:35:44.061Z
421
+ at 2023-07-18T18:59:28.021Z
425
422
  </div>
426
423
  <script src="../prettify.js"></script>
427
424
  <script>
package/coverage/lcov-report/widgets/PopupWidget.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">6.81% </span>
26
+ <span class="strong">6.45% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>6/88</span>
28
+ <span class='fraction'>6/93</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">0% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/28</span>
35
+ <span class='fraction'>0/31</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">0% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/15</span>
42
+ <span class='fraction'>0/14</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">7.14% </span>
47
+ <span class="strong">6.89% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>6/84</span>
49
+ <span class='fraction'>6/87</span>
50
50
  </div>
51
51
 
52
52
 
@@ -243,12 +243,28 @@
243
243
  <a name='L178'></a><a href='#L178'>178</a>
244
244
  <a name='L179'></a><a href='#L179'>179</a>
245
245
  <a name='L180'></a><a href='#L180'>180</a>
246
- <a name='L181'></a><a href='#L181'>181</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
247
262
  <span class="cline-any cline-neutral">&nbsp;</span>
248
263
  <span class="cline-any cline-yes">1x</span>
249
264
  <span class="cline-any cline-yes">1x</span>
250
265
  <span class="cline-any cline-yes">1x</span>
251
266
  <span class="cline-any cline-neutral">&nbsp;</span>
267
+ <span class="cline-any cline-neutral">&nbsp;</span>
252
268
  <span class="cline-any cline-yes">1x</span>
253
269
  <span class="cline-any cline-neutral">&nbsp;</span>
254
270
  <span class="cline-any cline-yes">1x</span>
@@ -282,6 +298,8 @@
282
298
  <span class="cline-any cline-neutral">&nbsp;</span>
283
299
  <span class="cline-any cline-neutral">&nbsp;</span>
284
300
  <span class="cline-any cline-neutral">&nbsp;</span>
301
+ <span class="cline-any cline-no">&nbsp;</span>
302
+ <span class="cline-any cline-neutral">&nbsp;</span>
285
303
  <span class="cline-any cline-neutral">&nbsp;</span>
286
304
  <span class="cline-any cline-no">&nbsp;</span>
287
305
  <span class="cline-any cline-no">&nbsp;</span>
@@ -298,14 +316,14 @@
298
316
  <span class="cline-any cline-neutral">&nbsp;</span>
299
317
  <span class="cline-any cline-neutral">&nbsp;</span>
300
318
  <span class="cline-any cline-neutral">&nbsp;</span>
301
- <span class="cline-any cline-no">&nbsp;</span>
302
319
  <span class="cline-any cline-neutral">&nbsp;</span>
303
320
  <span class="cline-any cline-neutral">&nbsp;</span>
304
- <span class="cline-any cline-no">&nbsp;</span>
305
321
  <span class="cline-any cline-neutral">&nbsp;</span>
306
- <span class="cline-any cline-no">&nbsp;</span>
307
- <span class="cline-any cline-no">&nbsp;</span>
308
- <span class="cline-any cline-no">&nbsp;</span>
322
+ <span class="cline-any cline-neutral">&nbsp;</span>
323
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
+ <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-neutral">&nbsp;</span>
326
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
327
  <span class="cline-any cline-neutral">&nbsp;</span>
310
328
  <span class="cline-any cline-neutral">&nbsp;</span>
311
329
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -331,12 +349,20 @@
331
349
  <span class="cline-any cline-no">&nbsp;</span>
332
350
  <span class="cline-any cline-neutral">&nbsp;</span>
333
351
  <span class="cline-any cline-no">&nbsp;</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-no">&nbsp;</span>
334
354
  <span class="cline-any cline-no">&nbsp;</span>
335
355
  <span class="cline-any cline-no">&nbsp;</span>
336
356
  <span class="cline-any cline-neutral">&nbsp;</span>
337
357
  <span class="cline-any cline-no">&nbsp;</span>
338
358
  <span class="cline-any cline-neutral">&nbsp;</span>
339
359
  <span class="cline-any cline-no">&nbsp;</span>
360
+ <span class="cline-any cline-neutral">&nbsp;</span>
361
+ <span class="cline-any cline-neutral">&nbsp;</span>
362
+ <span class="cline-any cline-no">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</span>
365
+ <span class="cline-any cline-no">&nbsp;</span>
340
366
  <span class="cline-any cline-no">&nbsp;</span>
341
367
  <span class="cline-any cline-no">&nbsp;</span>
342
368
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -392,6 +418,8 @@
392
418
  <span class="cline-any cline-no">&nbsp;</span>
393
419
  <span class="cline-any cline-no">&nbsp;</span>
394
420
  <span class="cline-any cline-no">&nbsp;</span>
421
+ <span class="cline-any cline-no">&nbsp;</span>
422
+ <span class="cline-any cline-no">&nbsp;</span>
395
423
  <span class="cline-any cline-neutral">&nbsp;</span>
396
424
  <span class="cline-any cline-neutral">&nbsp;</span>
397
425
  <span class="cline-any cline-no">&nbsp;</span>
@@ -405,6 +433,8 @@
405
433
  <span class="cline-any cline-neutral">&nbsp;</span>
406
434
  <span class="cline-any cline-no">&nbsp;</span>
407
435
  <span class="cline-any cline-no">&nbsp;</span>
436
+ <span class="cline-any cline-no">&nbsp;</span>
437
+ <span class="cline-any cline-no">&nbsp;</span>
408
438
  <span class="cline-any cline-neutral">&nbsp;</span>
409
439
  <span class="cline-any cline-no">&nbsp;</span>
410
440
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -428,6 +458,7 @@
428
458
  import { debug } from "debug";
429
459
  import { domready } from "../utils/domready";
430
460
  import Widget, { Params } from "./Widget";
461
+ import DeclarativeWidget from "./declarative/DeclarativeWidget";
431
462
  &nbsp;
432
463
  const _log = debug("squatch-js:POPUPwidget");
433
464
  &nbsp;
@@ -440,10 +471,10 @@ let popupId = 0;
440
471
  *
441
472
  */
442
473
  export default class PopupWidget extends Widget {
443
- trigger: string;
474
+ trigger: string | null;
444
475
  id: string;
445
476
  &nbsp;
446
- <span class="fstat-no" title="function not covered" > constructor(p</span>arams: Params, trigger = <span class="branch-0 cbranch-no" title="branch not covered" >".squatchpop")</span> {
477
+ <span class="fstat-no" title="function not covered" > constructor(p</span>arams: Params, trigger: string | null = <span class="branch-0 cbranch-no" title="branch not covered" >".squatchpop")</span> {
447
478
  <span class="cstat-no" title="statement not covered" > super(params);</span>
448
479
  &nbsp;
449
480
  <span class="cstat-no" title="statement not covered" > this.trigger = trigger;</span>
@@ -462,6 +493,8 @@ export default class PopupWidget extends Widget {
462
493
  }
463
494
  &nbsp;
464
495
  <span class="fstat-no" title="function not covered" > _initialiseCTA(</span>frame: HTMLIFrameElement) {
496
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!this.trigger) <span class="cstat-no" title="statement not covered" >return;</span></span>
497
+ &nbsp;
465
498
  let triggerElement;
466
499
  <span class="cstat-no" title="statement not covered" > try {</span>
467
500
  <span class="cstat-no" title="statement not covered" > triggerElement /* HTMLButton */ = document.querySelector(this.trigger);</span>
@@ -474,20 +507,20 @@ export default class PopupWidget extends Widget {
474
507
  // Trigger is optional
475
508
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (triggerElement) {</span>
476
509
  <span class="cstat-no" title="statement not covered" > triggerElement.onclick = <span class="fstat-no" title="function not covered" >() =</span>&gt; {</span>
477
- <span class="cstat-no" title="statement not covered" > this.open(frame);</span>
510
+ <span class="cstat-no" title="statement not covered" > this.open();</span>
478
511
  };
479
512
  }
480
513
  &nbsp;
481
- const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
514
+ // const element = this._findElement();
482
515
  // If widget is loaded with CTA, look for a 'squatchpop' element to use
483
516
  // that element as a trigger as well.
484
- const triggerWhenCTA = <span class="cstat-no" title="statement not covered" >element.querySelector(".squatchpop") as HTMLElement;</span>
517
+ // const triggerWhenCTA = element.querySelector(".squatchpop") as HTMLElement;
485
518
  &nbsp;
486
- <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (this.trigger === "#cta" &amp;&amp; triggerWhenCTA) {</span>
487
- <span class="cstat-no" title="statement not covered" > triggerWhenCTA.onclick = <span class="fstat-no" title="function not covered" >() =</span>&gt; {</span>
488
- <span class="cstat-no" title="statement not covered" > this.open(frame);</span>
489
- };
490
- }
519
+ // if (this.trigger === "#cta" &amp;&amp; triggerWhenCTA) {
520
+ // triggerWhenCTA.onclick = () =&gt; {
521
+ // this.open(frame);
522
+ // };
523
+ // }
491
524
  }
492
525
  &nbsp;
493
526
  <span class="fstat-no" title="function not covered" > _createPopupDialog(</span>): HTMLDialogElement {
@@ -506,15 +539,23 @@ export default class PopupWidget extends Widget {
506
539
  <span class="cstat-no" title="statement not covered" > return dialog;</span>
507
540
  }
508
541
  &nbsp;
509
- <span class="fstat-no" title="function not covered" > load(</span>frame: HTMLIFrameElement) {
542
+ <span class="fstat-no" title="function not covered" > load(</span>) {
543
+ const frame = <span class="cstat-no" title="statement not covered" >this._createFrame();</span>
510
544
  <span class="cstat-no" title="statement not covered" > this._initialiseCTA(frame);</span>
545
+ &nbsp;
511
546
  const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
512
547
  &nbsp;
513
548
  const dialogParent = <span class="cstat-no" title="statement not covered" >element.shadowRoot || element;</span>
514
549
  const dialog = <span class="cstat-no" title="statement not covered" >this._createPopupDialog();</span>
515
550
  <span class="cstat-no" title="statement not covered" > dialog.appendChild(frame);</span>
516
551
  &nbsp;
517
- <span class="cstat-no" title="statement not covered" > dialogParent.appendChild(dialog);</span>
552
+ <span class="cstat-no" title="statement not covered" > if (dialogParent.lastChild?.nodeName === "DIALOG") {</span>
553
+ // Was reloaded
554
+ <span class="cstat-no" title="statement not covered" > dialogParent.replaceChild(dialog, dialogParent.lastChild);</span>
555
+ } else {
556
+ // First time rendering
557
+ <span class="cstat-no" title="statement not covered" > dialogParent.appendChild(dialog);</span>
558
+ }
518
559
  &nbsp;
519
560
  const { contentWindow } = <span class="cstat-no" title="statement not covered" >frame;</span>
520
561
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!contentWindow) {</span>
@@ -561,7 +602,7 @@ export default class PopupWidget extends Widget {
561
602
  });
562
603
  }
563
604
  &nbsp;
564
- <span class="fstat-no" title="function not covered" > open(</span>frame: HTMLIFrameElement) {
605
+ <span class="fstat-no" title="function not covered" > open(</span>) {
565
606
  const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
566
607
  const parent = <span class="cstat-no" title="statement not covered" >element.shadowRoot || element;</span>
567
608
  const dialog = <span class="cstat-no" title="statement not covered" >parent.querySelector(`#${this.id}`) as HTMLDialogElement;</span>
@@ -569,6 +610,8 @@ export default class PopupWidget extends Widget {
569
610
  &nbsp;
570
611
  <span class="cstat-no" title="statement not covered" > dialog.showModal();</span>
571
612
  &nbsp;
613
+ const frame = <span class="cstat-no" title="statement not covered" >this._findFrame();</span>
614
+ <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!frame) <span class="cstat-no" title="statement not covered" >throw new Error("Could not find iframe");</span></span>
572
615
  const { contentWindow } = <span class="cstat-no" title="statement not covered" >frame;</span>
573
616
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!contentWindow) <span class="cstat-no" title="statement not covered" >throw new Error("Squatch.js has an empty iframe");</span></span>
574
617
  const frameDoc = <span class="cstat-no" title="statement not covered" >contentWindow.document;</span>
@@ -583,7 +626,9 @@ export default class PopupWidget extends Widget {
583
626
  }
584
627
  &nbsp;
585
628
  <span class="fstat-no" title="function not covered" > close(</span>) {
586
- const dialog = <span class="cstat-no" title="statement not covered" >document.getElementById(this.id) as HTMLDialogElement;</span>
629
+ const element = <span class="cstat-no" title="statement not covered" >this._findElement();</span>
630
+ const parent = <span class="cstat-no" title="statement not covered" >element.shadowRoot || element;</span>
631
+ const dialog = <span class="cstat-no" title="statement not covered" >parent.querySelector(`#${this.id}`) as HTMLDialogElement;</span>
587
632
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!dialog) <span class="cstat-no" title="statement not covered" >throw new Error("Could not determine container div");</span></span>
588
633
  &nbsp;
589
634
  <span class="cstat-no" title="statement not covered" > dialog.close();</span>
@@ -610,7 +655,7 @@ export default class PopupWidget extends Widget {
610
655
  <div class='footer quiet pad2 space-top1 center small'>
611
656
  Code coverage generated by
612
657
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
613
- at 2023-07-03T20:35:44.061Z
658
+ at 2023-07-18T18:59:28.021Z
614
659
  </div>
615
660
  <script src="../prettify.js"></script>
616
661
  <script>