@saasquatch/squatch-js 2.3.2-20 → 2.3.2-24
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.
- package/demo/templates/MintGAContainer.ts +61 -51
- package/demo/templates/MintGAContainerDisplayBlock.ts +60 -51
- package/demo/templates/QuirksMintGAContainer.ts +59 -50
- package/demo/templates/QuirksMintGAContainerDisplayBlock.ts +59 -50
- package/demo/toolbar.tsx +78 -153
- package/dist/squatch.esm.js +52 -10
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +52 -10
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +1 -1
- package/dist/stats.html +1 -1
- package/dist/types.d.ts +4 -0
- package/dist/widgets/EmbedWidget.d.ts +4 -1
- package/dist/widgets/Widgets.d.ts +1 -0
- package/package.json +2 -2
- package/dist/squatchjs.min.js +0 -13
|
@@ -1,56 +1,65 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
template: `
|
|
3
3
|
<html>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</sqm-
|
|
35
|
-
</sqm-
|
|
36
|
-
|
|
37
|
-
</sqm-
|
|
38
|
-
|
|
39
|
-
</sqm-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
4
|
+
<head>
|
|
5
|
+
<script type="text/javascript">
|
|
6
|
+
window.widgetIdent = {"programId":"klip-referral-program","userId":"sam+klip@saasquat.ch","accountId":"sam+klip@saasquat.ch","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiIsImN1c3RvbUZpZWxkcyI6e319fQ.4AneYO6_38IcAr6q_k7V-UDeU8aTtOzVu24zvUsnml4","tenantAlias":"test_a74miwdpofztj","engagementMedium":"EMBED","appDomain":"https://staging.referralsaasquatch.com"};
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-62/dist/mint-components/mint-components.css">
|
|
10
|
+
|
|
11
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/bedrock-components@1.3.1-7/dist/bedrock-components/bedrock-components.js"></script>
|
|
12
|
+
|
|
13
|
+
<script src="https://fast-staging.ssqt.io/npm/@saasquatch/mint-components@1.5.0-62/dist/mint-components/mint-components.js"></script>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<script src="https://fast-staging.ssqt.io/npm/@elastic/apm-rum@4.0.1/dist/bundles/elastic-apm-rum.umd.min.js" crossorigin></script>
|
|
17
|
+
<script>
|
|
18
|
+
window.apm = elasticApm.init({
|
|
19
|
+
serviceName: 'programwidget-staging',
|
|
20
|
+
serverUrl: 'https://1c9081d2ac2d43548254f581dca2dbee.apm.us-central1.gcp.cloud.es.io:443',
|
|
21
|
+
active: Math.random() < 0.1
|
|
22
|
+
})
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<sqm-brand brand-color="#4225c4" brand-font="Nunito Sans"><sqm-portal-container style="display:block;" class="squatch-container" direction="column" padding="small" gap="xxxx-large"><sqm-portal-container direction="column" padding="none" gap="xxx-large"><sqm-hero-image image-url="https://i.imgur.com/yr6ER3R.png" header="Klip Rewards" description="Refer friends and complete tasks while using Klip to earn rewards" layout="columns" image-pos="right" background-color="#F9F9F9">
|
|
28
|
+
</sqm-hero-image><sqm-stat-container space="xxxx-large"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE"><sqm-text><p>Giftcards Earned</p></sqm-text></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><sqm-text><p>Points Balance</p></sqm-text></sqm-big-stat></sqm-stat-container><sqm-titled-section align="center"><sqm-text slot="label"><h3>Share $50 with friends</h3></sqm-text><sqm-text slot="content"><p>
|
|
29
|
+
They’ll get a $50 credit towards a new account and you’ll get up to
|
|
30
|
+
$1200
|
|
31
|
+
</p></sqm-text></sqm-titled-section><sqm-referral-card><sqm-timeline slot="left" icon="circle"><sqm-timeline-entry reward="75" unit="points" desc="Your friends signs up for a free trial">
|
|
32
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friends signs up for Klip Business">
|
|
33
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Your friend qualifies as a good fit for Klip Enterprise">
|
|
34
|
+
</sqm-timeline-entry><sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases Klip Enterprise">
|
|
35
|
+
</sqm-timeline-entry></sqm-timeline><sqm-portal-container gap="large" slot="right"><sqm-text>Choose how you want to share: </sqm-text><sqm-text><p light="">Your unique referral link:</p><sqm-share-link> </sqm-share-link></sqm-text><sqm-portal-container gap="x-small"><sqm-share-button medium="email">
|
|
36
|
+
Share via email
|
|
37
|
+
</sqm-share-button><sqm-share-button medium="linkedin">
|
|
38
|
+
Share on LinkedIn
|
|
39
|
+
</sqm-share-button><sqm-share-button medium="twitter">
|
|
40
|
+
Tweet about us
|
|
41
|
+
</sqm-share-button></sqm-portal-container></sqm-portal-container></sqm-referral-card></sqm-portal-container><sqm-portal-container direction="column" padding="none" gap="xx-large"><sqm-titled-section align="center"><sqm-text slot="label"><h3>Earn more rewards</h3></sqm-text><sqm-text slot="content"><p>
|
|
42
|
+
Get points while using Klip. Use those points to redeem rewards like
|
|
43
|
+
one free month of Klip Enterprise or two plane tickets to anywhere
|
|
44
|
+
in North America
|
|
45
|
+
</p></sqm-text></sqm-titled-section><sqm-card-feed><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" goal="1" stat-type="/programGoals/count/Follow-on-Social-Media" open-new-tab="true" event-key="socialFollow">
|
|
46
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="250" goal="500" show-progress-bar="true" card-title="Spend $500 on Klip Products" description="Earn 250 points when you spend $500 or more on Klip products." button-text="See plans" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/customFields/purchaseTotal" open-new-tab="false">
|
|
47
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="25" goal="1" card-title="Upload Your First Video" description="Earn 25 points for exploring the Klip platform when you upload your first video." button-text="Upload" button-link="https://klip-staging.vercel.app/app" stat-type="/programGoals/count/Record-First-Video" open-new-tab="false">
|
|
48
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="100" goal="5" repeatable="true" show-progress-bar="true" steps="true" card-title="Share 5 Videos" description="Earn 100 points for collaborating each time you share 5 videos." button-text="Share" button-link="https://klip-staging.vercel.app/app" stat-type="/customFields/videosShared" open-new-tab="false">
|
|
49
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Buy a Business or Enterprise plan and get 1 free month of Klip for being a committed customer." button-text="Upgrade" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/programGoals/count/Upgrade-Plan" open-new-tab="false">
|
|
50
|
+
</sqm-task-card></sqb-program-section><sqm-task-card reward-amount="200" goal="5" show-progress-bar="" steps="" card-title="Purchase 5 Seats" description="Earn 200 points when you expand your Klip Team by purchasing 5 or more seats." button-text="Purchase seats" button-link="https://klip-staging.vercel.app/app/plans" stat-type="/customFields/seatCount" reward-duration="2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z" show-expiry="">
|
|
51
|
+
</sqm-task-card><sqm-task-card reward-amount="250" goal="1" repeatable="" show-progress-bar="" card-title="Upload 1 Hour of Video" description="Record and upload an hour of video and get 250 points for being a super user." button-text="Upload" button-link="https://klip-staging.vercel.app/app" stat-type="/customFields/videoHoursCount" reward-duration="2021-12-31T08:00:00.000Z/2022-01-02T08:00:00.000Z" show-expiry="" finite="3" progress-bar-unit="" reward-unit="Points">
|
|
52
|
+
</sqm-task-card><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="100" goal="1" card-title="Complete an NPS Survey" description="Fill out our NPS survey and get 100 points for giving us honest feedback. Be sure to use your Klip account email when completing the survey." button-text="Complete survey" button-link="https://y5tqgj96plv.typeform.com/to/p6N7lHUk" stat-type="/programGoals/count/NPS-Survey" reward-unit="Points" open-new-tab="true">
|
|
53
|
+
</sqm-task-card></sqb-program-section><sqb-conditional-section condition="'champion' in user.segments"><sqb-program-section program-id="klip-loyalty"><sqm-task-card reward-amount="$100" goal="1" card-title="Complete a Case Study" description="Write a Klip case study and earn a $100 Visa Gift Card for letting us know how Klip has helped your team succeed." button-text="Complete case study" button-link="https://y5tqgj96plv.typeform.com/to/CPhkFBBW" stat-type="/programGoals/count/Case-Study" reward-unit="Visa Gift Card" open-new-tab="true">
|
|
54
|
+
</sqm-task-card></sqb-program-section></sqb-conditional-section></sqm-card-feed><sl-tab-group><sl-tab slot="nav" panel="referralLeaderboard">Leaderboard </sl-tab><sl-tab slot="nav" panel="referralHistory">Referral history </sl-tab><sl-tab slot="nav" panel="rewardHistory">Reward history </sl-tab><sl-tab slot="nav" panel="rewardExchange">Redeem </sl-tab><sl-tab-panel name="referralHistory"><sqm-referral-table per-page="4"><sqm-referral-table-user-column column-title="User">
|
|
55
|
+
</sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status">
|
|
56
|
+
</sqm-referral-table-status-column><sqm-referral-table-rewards-column>
|
|
57
|
+
</sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted">
|
|
58
|
+
</sqm-referral-table-date-column></sqm-referral-table></sl-tab-panel><sl-tab-panel name="referralLeaderboard"><sqm-portal-container gap="large"><sqm-hero-image image-url="https://i.imgur.com/2evfTx7.png" description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!" layout="columns" image-pos="left" background-color="#EFF8FE">
|
|
59
|
+
</sqm-hero-image><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true">
|
|
60
|
+
</sqm-leaderboard></sqm-portal-container></sl-tab-panel><sl-tab-panel name="rewardHistory"><sqb-program-section program-id=""><sqm-rewards-table per-page="4"><sqm-rewards-table-reward-column></sqm-rewards-table-reward-column><sqm-rewards-table-source-column></sqm-rewards-table-source-column><sqm-rewards-table-status-column></sqm-rewards-table-status-column><sqm-rewards-table-date-column></sqm-rewards-table-date-column></sqm-rewards-table></sqb-program-section></sl-tab-panel><sl-tab-panel name="rewardExchange"><sqm-reward-exchange-list></sqm-reward-exchange-list></sl-tab-panel></sl-tab-group></sqm-portal-container></sqm-portal-container></sqm-brand><style>* { box-sizing: border-box; } body {margin: 0;}:root{--sqm-portal-background: white;}sl-tab-panel::part(base){padding-top: !important;padding-right: !important;padding-bottom: !important;padding-left: !important;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.facebook-button::part(defaultsharebutton-base):active{outline-color:initial;outline-style:none;outline-width:initial;}</style>
|
|
61
|
+
</body>
|
|
62
|
+
</html>`,
|
|
54
63
|
jsOptions: {},
|
|
55
64
|
user: {
|
|
56
65
|
id: "sam+klip@saasquat.ch",
|
package/demo/toolbar.tsx
CHANGED
|
@@ -298,39 +298,6 @@ function VersionList(props) {
|
|
|
298
298
|
);
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
async function getMockWidget(
|
|
302
|
-
widget,
|
|
303
|
-
engagementMedium,
|
|
304
|
-
element?: HTMLElement,
|
|
305
|
-
showWidget?: boolean
|
|
306
|
-
) {
|
|
307
|
-
window["mockWidget"] = widget;
|
|
308
|
-
window["sandbox"].initObj = {
|
|
309
|
-
...window["sandbox"].initObj,
|
|
310
|
-
engagementMedium,
|
|
311
|
-
};
|
|
312
|
-
|
|
313
|
-
worker.use(
|
|
314
|
-
rest.put(
|
|
315
|
-
"https://staging.referralsaasquatch.com/api/*",
|
|
316
|
-
(req, res, ctx) => {
|
|
317
|
-
return res(
|
|
318
|
-
ctx.delay(500),
|
|
319
|
-
ctx.status(202, "Mocked status"),
|
|
320
|
-
ctx.json(widgets[window["mockWidget"]])
|
|
321
|
-
);
|
|
322
|
-
}
|
|
323
|
-
)
|
|
324
|
-
);
|
|
325
|
-
document.getElementById("squatchembed").innerHTML = "";
|
|
326
|
-
await window["squatch"].widgets().upsertUser({
|
|
327
|
-
...window["sandbox"].initObj,
|
|
328
|
-
element,
|
|
329
|
-
});
|
|
330
|
-
|
|
331
|
-
if (showWidget) element.open();
|
|
332
|
-
}
|
|
333
|
-
|
|
334
301
|
async function getCustomWidget(engagementMedium) {
|
|
335
302
|
window["sandbox"].initObj = {
|
|
336
303
|
...window["sandbox"].initObj,
|
|
@@ -353,7 +320,6 @@ async function getCustomWidget(engagementMedium) {
|
|
|
353
320
|
document.getElementById("squatchembed").innerHTML = "";
|
|
354
321
|
window["squatch"].widgets().upsertUser({
|
|
355
322
|
...window["sandbox"].initObj,
|
|
356
|
-
element: <div className="sam"></div>,
|
|
357
323
|
});
|
|
358
324
|
}
|
|
359
325
|
|
|
@@ -362,10 +328,41 @@ function MockedWidgets(props) {
|
|
|
362
328
|
const [engagementMedium, setEngagementMedium] = useState("EMBED");
|
|
363
329
|
const [usePreload, setUsePreload] = useState(false);
|
|
364
330
|
const [showWidget, setShowWidget] = useState(false);
|
|
365
|
-
|
|
331
|
+
const [widget, setWidget] = useState(undefined);
|
|
366
332
|
const element = usePreload && document.getElementById("squatchembed");
|
|
367
333
|
|
|
368
|
-
|
|
334
|
+
async function getMockWidget(widget) {
|
|
335
|
+
window["mockWidget"] = widget;
|
|
336
|
+
window["sandbox"].initObj = {
|
|
337
|
+
...window["sandbox"].initObj,
|
|
338
|
+
engagementMedium,
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
worker.use(
|
|
342
|
+
rest.put(
|
|
343
|
+
"https://staging.referralsaasquatch.com/api/*",
|
|
344
|
+
(req, res, ctx) => {
|
|
345
|
+
return res(
|
|
346
|
+
ctx.delay(500),
|
|
347
|
+
ctx.status(202, "Mocked status"),
|
|
348
|
+
ctx.json(widgets[window["mockWidget"]])
|
|
349
|
+
);
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
);
|
|
353
|
+
document.getElementById("squatchembed").innerHTML = "";
|
|
354
|
+
|
|
355
|
+
const { widget: embedWidget } = await window["squatch"]
|
|
356
|
+
.widgets()
|
|
357
|
+
.upsertUser({
|
|
358
|
+
...window["sandbox"].initObj,
|
|
359
|
+
element,
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
if (showWidget) embedWidget.open();
|
|
363
|
+
setWidget(embedWidget);
|
|
364
|
+
}
|
|
365
|
+
|
|
369
366
|
return (
|
|
370
367
|
<details
|
|
371
368
|
title={"Version: " + window["sandbox"].version || "Head"}
|
|
@@ -374,152 +371,80 @@ function MockedWidgets(props) {
|
|
|
374
371
|
>
|
|
375
372
|
<summary>Mocked Widgets</summary>
|
|
376
373
|
<h4>Engagement Medium</h4>
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
type="radio"
|
|
380
|
-
name="embed"
|
|
381
|
-
checked={engagementMedium === "EMBED"}
|
|
382
|
-
onClick={() => setEngagementMedium("EMBED")}
|
|
383
|
-
></input>
|
|
374
|
+
<form onSubmit={(e) => e.preventDefault()}>
|
|
375
|
+
<label>Embed</label>
|
|
384
376
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
></input>
|
|
392
|
-
<br />
|
|
393
|
-
<h4>Preload</h4>
|
|
394
|
-
<label>true</label>
|
|
395
|
-
<input
|
|
396
|
-
type="radio"
|
|
397
|
-
name="preload"
|
|
398
|
-
checked={usePreload === true}
|
|
399
|
-
onClick={() => setUsePreload(true)}
|
|
400
|
-
></input>
|
|
377
|
+
<input
|
|
378
|
+
type="radio"
|
|
379
|
+
name="embed"
|
|
380
|
+
checked={engagementMedium === "EMBED"}
|
|
381
|
+
onClick={() => setEngagementMedium("EMBED")}
|
|
382
|
+
></input>
|
|
401
383
|
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
384
|
+
<label>Popup</label>
|
|
385
|
+
<input
|
|
386
|
+
type="radio"
|
|
387
|
+
name="popup"
|
|
388
|
+
checked={engagementMedium === "POPUP"}
|
|
389
|
+
onClick={() => setEngagementMedium("POPUP")}
|
|
390
|
+
></input>
|
|
391
|
+
<br />
|
|
392
|
+
<h4>Preload</h4>
|
|
393
|
+
<label>true</label>
|
|
394
|
+
<input
|
|
395
|
+
type="radio"
|
|
396
|
+
name="preload"
|
|
397
|
+
checked={usePreload === true}
|
|
398
|
+
onClick={() => setUsePreload(true)}
|
|
399
|
+
></input>
|
|
400
|
+
|
|
401
|
+
<label>false</label>
|
|
402
|
+
<input
|
|
403
|
+
type="radio"
|
|
404
|
+
name="noPreload"
|
|
405
|
+
checked={usePreload === false}
|
|
406
|
+
onClick={() => setUsePreload(false)}
|
|
407
|
+
></input>
|
|
408
|
+
</form>
|
|
409
409
|
<br />
|
|
410
410
|
<button
|
|
411
411
|
onClick={() => {
|
|
412
412
|
if (showWidget) {
|
|
413
413
|
setShowWidget(false);
|
|
414
|
-
|
|
414
|
+
widget?.close();
|
|
415
415
|
} else {
|
|
416
|
-
console.log("element?", element);
|
|
417
416
|
setShowWidget(true);
|
|
418
|
-
|
|
417
|
+
widget?.open();
|
|
419
418
|
}
|
|
420
419
|
}}
|
|
421
420
|
>
|
|
422
421
|
{showWidget ? "hide widget" : "show widget"}
|
|
423
422
|
</button>
|
|
424
423
|
<br />
|
|
425
|
-
<button
|
|
426
|
-
onClick={() =>
|
|
427
|
-
getMockWidget(
|
|
428
|
-
"QuirksVanillaGA",
|
|
429
|
-
engagementMedium,
|
|
430
|
-
element,
|
|
431
|
-
showWidget
|
|
432
|
-
)
|
|
433
|
-
}
|
|
434
|
-
>
|
|
424
|
+
<button onClick={() => getMockWidget("QuirksVanillaGA")}>
|
|
435
425
|
Quirks mode - Vanilla
|
|
436
426
|
</button>
|
|
437
|
-
<button
|
|
438
|
-
onClick={() =>
|
|
439
|
-
getMockWidget("QuirksMintGA", engagementMedium, element, showWidget)
|
|
440
|
-
}
|
|
441
|
-
>
|
|
427
|
+
<button onClick={() => getMockWidget("QuirksMintGA")}>
|
|
442
428
|
Quirks mode - Mint
|
|
443
429
|
</button>
|
|
444
|
-
<button
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
>
|
|
449
|
-
Classic
|
|
450
|
-
</button>
|
|
451
|
-
<button
|
|
452
|
-
onClick={() =>
|
|
453
|
-
getMockWidget("MintGA", engagementMedium, element, showWidget)
|
|
454
|
-
}
|
|
455
|
-
>
|
|
456
|
-
GA - Mint
|
|
457
|
-
</button>
|
|
458
|
-
<button
|
|
459
|
-
onClick={() =>
|
|
460
|
-
getMockWidget("VanillaGA", engagementMedium, element, showWidget)
|
|
461
|
-
}
|
|
462
|
-
>
|
|
463
|
-
GA - Vanilla
|
|
464
|
-
</button>
|
|
465
|
-
<button
|
|
466
|
-
onClick={() =>
|
|
467
|
-
getMockWidget(
|
|
468
|
-
"MintGAContainer",
|
|
469
|
-
engagementMedium,
|
|
470
|
-
element,
|
|
471
|
-
showWidget
|
|
472
|
-
)
|
|
473
|
-
}
|
|
474
|
-
>
|
|
430
|
+
<button onClick={() => getMockWidget("classic")}>Classic</button>
|
|
431
|
+
<button onClick={() => getMockWidget("MintGA")}>GA - Mint</button>
|
|
432
|
+
<button onClick={() => getMockWidget("VanillaGA")}>GA - Vanilla</button>
|
|
433
|
+
<button onClick={() => getMockWidget("MintGAContainer")}>
|
|
475
434
|
Mint - With Container
|
|
476
435
|
</button>
|
|
477
|
-
<button
|
|
478
|
-
onClick={() =>
|
|
479
|
-
getMockWidget(
|
|
480
|
-
"QuirksMintGAContainer",
|
|
481
|
-
engagementMedium,
|
|
482
|
-
element,
|
|
483
|
-
showWidget
|
|
484
|
-
)
|
|
485
|
-
}
|
|
486
|
-
>
|
|
436
|
+
<button onClick={() => getMockWidget("QuirksMintGAContainer")}>
|
|
487
437
|
Quirks mode - Mint - With Container
|
|
488
438
|
</button>
|
|
489
|
-
<button
|
|
490
|
-
onClick={() =>
|
|
491
|
-
getMockWidget(
|
|
492
|
-
"MintGAContainerDisplayBlock",
|
|
493
|
-
engagementMedium,
|
|
494
|
-
element,
|
|
495
|
-
showWidget
|
|
496
|
-
)
|
|
497
|
-
}
|
|
498
|
-
>
|
|
439
|
+
<button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
|
|
499
440
|
Mint - With Container + Display Block
|
|
500
441
|
</button>
|
|
501
442
|
<button
|
|
502
|
-
onClick={() =>
|
|
503
|
-
getMockWidget(
|
|
504
|
-
"QuirksMintGAContainerDisplayBlock",
|
|
505
|
-
engagementMedium,
|
|
506
|
-
element,
|
|
507
|
-
showWidget
|
|
508
|
-
)
|
|
509
|
-
}
|
|
443
|
+
onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}
|
|
510
444
|
>
|
|
511
445
|
Quirks mode - Mint - With Container + Display Block
|
|
512
446
|
</button>
|
|
513
|
-
<button
|
|
514
|
-
onClick={() =>
|
|
515
|
-
getMockWidget(
|
|
516
|
-
"VanillaGANoContainer",
|
|
517
|
-
engagementMedium,
|
|
518
|
-
element,
|
|
519
|
-
showWidget
|
|
520
|
-
)
|
|
521
|
-
}
|
|
522
|
-
>
|
|
447
|
+
<button onClick={() => getMockWidget("VanillaGANoContainer")}>
|
|
523
448
|
Vanilla - No Container
|
|
524
449
|
</button>
|
|
525
450
|
</details>
|
package/dist/squatch.esm.js
CHANGED
|
@@ -541,7 +541,7 @@ class Widget {
|
|
|
541
541
|
const {
|
|
542
542
|
contentWindow
|
|
543
543
|
} = this.frame;
|
|
544
|
-
if (!contentWindow) throw new Error("Squatch.
|
|
544
|
+
if (!contentWindow) throw new Error("Squatch.js frame inner frame is empty");
|
|
545
545
|
const frameDoc = contentWindow.document;
|
|
546
546
|
|
|
547
547
|
function search() {
|
|
@@ -690,13 +690,28 @@ const _log$5 = debug__default("squatch-js:EMBEDwidget");
|
|
|
690
690
|
class EmbedWidget extends Widget {
|
|
691
691
|
constructor(params, selector = "#squatchembed") {
|
|
692
692
|
super(params);
|
|
693
|
+
|
|
694
|
+
if (params.context.element) {
|
|
695
|
+
this.targetElement = params.context.element;
|
|
696
|
+
}
|
|
697
|
+
|
|
693
698
|
const element = document.querySelector(selector) || document.querySelector(".squatchembed");
|
|
694
699
|
if (!element) throw new Error(`element with selector '${selector}' not found.'`);
|
|
695
700
|
this.element = element;
|
|
696
701
|
}
|
|
697
702
|
|
|
698
703
|
async load() {
|
|
699
|
-
if (
|
|
704
|
+
if (this.targetElement) {
|
|
705
|
+
this.element.style.visibility = "hidden";
|
|
706
|
+
this.element.style.height = "0";
|
|
707
|
+
this.element.style["overflow-y"] = "hidden"; // Widget reloaded - replace existing element
|
|
708
|
+
|
|
709
|
+
if (this.element.firstChild) {
|
|
710
|
+
this.element.replaceChild(this.frame, this.element.firstChild); // Add iframe for the first time
|
|
711
|
+
} else {
|
|
712
|
+
this.element.appendChild(this.frame);
|
|
713
|
+
}
|
|
714
|
+
} else if (!this.element.firstChild || this.element.firstChild.nodeName === "#text") {
|
|
700
715
|
this.element.appendChild(this.frame);
|
|
701
716
|
}
|
|
702
717
|
|
|
@@ -738,17 +753,42 @@ class EmbedWidget extends Widget {
|
|
|
738
753
|
|
|
739
754
|
this.frame.height = height;
|
|
740
755
|
}
|
|
741
|
-
});
|
|
756
|
+
});
|
|
757
|
+
ro.observe(await this._findInnerContainer()); // Regular load - trigger event
|
|
742
758
|
|
|
743
|
-
|
|
744
|
-
|
|
759
|
+
if (!this.targetElement) {
|
|
760
|
+
this._loadEvent(_sqh);
|
|
745
761
|
|
|
746
|
-
|
|
762
|
+
_log$5("loaded");
|
|
763
|
+
}
|
|
764
|
+
});
|
|
765
|
+
} // Un-hide if element is available and refresh data
|
|
747
766
|
|
|
748
|
-
this._loadEvent(_sqh);
|
|
749
767
|
|
|
750
|
-
|
|
751
|
-
|
|
768
|
+
open() {
|
|
769
|
+
var _this$frame, _this$frame$contentDo, _this$frame2, _this$frame2$contentW, _this$frame3, _this$frame3$contentW;
|
|
770
|
+
|
|
771
|
+
//@ts-ignore type is set in constructor
|
|
772
|
+
if (!this.frame) return _log$5("no target element to open");
|
|
773
|
+
this.element.style.visibility = "unset";
|
|
774
|
+
this.element.style.height = "auto";
|
|
775
|
+
this.element.style["overflow-y"] = "auto";
|
|
776
|
+
(_this$frame = this.frame) == null ? void 0 : (_this$frame$contentDo = _this$frame.contentDocument) == null ? void 0 : _this$frame$contentDo.dispatchEvent(new CustomEvent("sq:refresh"));
|
|
777
|
+
|
|
778
|
+
const _sqh = ((_this$frame2 = this.frame) == null ? void 0 : (_this$frame2$contentW = _this$frame2.contentWindow) == null ? void 0 : _this$frame2$contentW.squatch) || ((_this$frame3 = this.frame) == null ? void 0 : (_this$frame3$contentW = _this$frame3.contentWindow) == null ? void 0 : _this$frame3$contentW.widgetIdent);
|
|
779
|
+
|
|
780
|
+
this._loadEvent(_sqh);
|
|
781
|
+
|
|
782
|
+
_log$5("loaded");
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
close() {
|
|
786
|
+
if (!this.frame) return _log$5("no target element to close");
|
|
787
|
+
this.element.style.visibility = "hidden";
|
|
788
|
+
this.element.style.height = "0";
|
|
789
|
+
this.element.style["overflow-y"] = "hidden";
|
|
790
|
+
|
|
791
|
+
_log$5("Embed widget closed");
|
|
752
792
|
}
|
|
753
793
|
|
|
754
794
|
_error(rs, mode = "embed", style = "") {
|
|
@@ -1126,6 +1166,7 @@ class Widgets {
|
|
|
1126
1166
|
* @param {EngagementMedium} config.engagementMedium How to display the widget.
|
|
1127
1167
|
* @param {string} config.jwt the JSON Web Token (JWT) that is used
|
|
1128
1168
|
* to validate the data (can be disabled)
|
|
1169
|
+
@param {HTMLElement} config.element Element to load the widget into
|
|
1129
1170
|
*
|
|
1130
1171
|
* @return {Promise<WidgetResult>} json object if true, with a Widget and user details.
|
|
1131
1172
|
*/
|
|
@@ -1141,7 +1182,8 @@ class Widgets {
|
|
|
1141
1182
|
widget: this._renderWidget(response, clean, {
|
|
1142
1183
|
type: "upsert",
|
|
1143
1184
|
user: clean.user,
|
|
1144
|
-
engagementMedium: config.engagementMedium
|
|
1185
|
+
engagementMedium: config.engagementMedium,
|
|
1186
|
+
element: config.element
|
|
1145
1187
|
}),
|
|
1146
1188
|
user: response.user
|
|
1147
1189
|
};
|