@flarehr/apollo-super-campaign 0.1.711 → 0.1.715
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/dist/apollo-super-campaign.js +7 -7
- package/dist/index.html +116 -24
- package/package.json +1 -1
package/dist/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<!-- This index is for
|
|
2
|
-
<!
|
|
1
|
+
<!-- This index is for local development -->
|
|
2
|
+
<!doctype html>
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Apollo Super Campaign</title>
|
|
@@ -11,30 +11,122 @@
|
|
|
11
11
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
12
12
|
rel="stylesheet"
|
|
13
13
|
/>
|
|
14
|
+
<script type="module" crossorigin src="./apollo-super-campaign.js"></script>
|
|
14
15
|
</head>
|
|
15
|
-
<style>
|
|
16
|
-
:root {
|
|
17
|
-
--fl-color-primary: #1890ff;
|
|
18
|
-
--fl-color-primary-light: #74c0ff;
|
|
19
|
-
--fl-color-primary-dark: #006bce;
|
|
20
|
-
--fl-color-primary-disabled: #f5f5f5;
|
|
21
|
-
--fl-color-primary-hover: #40a9ff;
|
|
22
|
-
--fl-color-primary-focus: #40a9ff;
|
|
23
|
-
--fl-color-primary-text: white;
|
|
24
|
-
--fl-color-secondary: #d3d3d3;
|
|
25
|
-
--fl-color-secondary-light: #e1e1e1;
|
|
26
|
-
--fl-color-secondary-dark: #cecece;
|
|
27
|
-
--fl-color-secondary-disabled: #f5f5f5;
|
|
28
|
-
--fl-color-secondary-hover: #ebebeb;
|
|
29
|
-
--fl-color-secondary-focus: #ebebeb;
|
|
30
|
-
--fl-color-secondary-text: #262626;
|
|
31
|
-
}
|
|
16
|
+
<style>
|
|
17
|
+
:root {
|
|
18
|
+
--fl-color-primary: #1890ff;
|
|
19
|
+
--fl-color-primary-light: #74c0ff;
|
|
20
|
+
--fl-color-primary-dark: #006bce;
|
|
21
|
+
--fl-color-primary-disabled: #f5f5f5;
|
|
22
|
+
--fl-color-primary-hover: #40a9ff;
|
|
23
|
+
--fl-color-primary-focus: #40a9ff;
|
|
24
|
+
--fl-color-primary-text: white;
|
|
25
|
+
--fl-color-secondary: #d3d3d3;
|
|
26
|
+
--fl-color-secondary-light: #e1e1e1;
|
|
27
|
+
--fl-color-secondary-dark: #cecece;
|
|
28
|
+
--fl-color-secondary-disabled: #f5f5f5;
|
|
29
|
+
--fl-color-secondary-hover: #ebebeb;
|
|
30
|
+
--fl-color-secondary-focus: #ebebeb;
|
|
31
|
+
--fl-color-secondary-text: #262626;
|
|
32
|
+
}
|
|
32
33
|
</style>
|
|
33
34
|
<body>
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
<fieldset>
|
|
36
|
+
<legend>Choose an app:</legend>
|
|
37
|
+
<div>
|
|
38
|
+
<input type="radio" id="campaign-radio" name="app" value="campaign" checked />
|
|
39
|
+
<label for="campaign-radio">apollo-super-campaign</label>
|
|
40
|
+
</div>
|
|
41
|
+
<div>
|
|
42
|
+
<input type="radio" id="byof-radio" name="app" value="byof" />
|
|
43
|
+
<label for="byof-radio">apollo-super-byof-engagement</label>
|
|
44
|
+
</div>
|
|
45
|
+
</fieldset>
|
|
46
|
+
|
|
47
|
+
<div style="padding-top: 3rem;">
|
|
48
|
+
<button id="returnButton" style="display: none">Return</button>
|
|
49
|
+
<div id="super-campaign">
|
|
50
|
+
<apollo-super-campaign
|
|
51
|
+
backend-url="%VITE_BACKEND_URL%"
|
|
52
|
+
access-token="%VITE_ACCESS_TOKEN%"
|
|
53
|
+
/>
|
|
54
|
+
</div>
|
|
55
|
+
<div id="super-byof-engagement" style="display: none">
|
|
56
|
+
<apollo-super-byof-engagement
|
|
57
|
+
backend-url="%VITE_BACKEND_URL%"
|
|
58
|
+
access-token="%VITE_ACCESS_TOKEN%"
|
|
59
|
+
fund-usi="%VITE_FUND_USI%"
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<script>
|
|
65
|
+
// Wait till DOM loaded before attempting to hook up listeners
|
|
66
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
67
|
+
const campaignOption = document.getElementById('campaign-radio');
|
|
68
|
+
const byofOption = document.getElementById('byof-radio');
|
|
69
|
+
const campaignDiv = document.getElementById('super-campaign');
|
|
70
|
+
const byofDiv = document.getElementById('super-byof-engagement');
|
|
71
|
+
|
|
72
|
+
function handleDisplay() {
|
|
73
|
+
if (campaignOption.checked) {
|
|
74
|
+
campaignDiv.style.display = 'block';
|
|
75
|
+
byofDiv.style.display = 'none';
|
|
76
|
+
} else {
|
|
77
|
+
campaignDiv.style.display = 'none';
|
|
78
|
+
byofDiv.style.display = 'block';
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
campaignOption.addEventListener('change', handleDisplay);
|
|
83
|
+
byofOption.addEventListener('change', handleDisplay);
|
|
84
|
+
});
|
|
85
|
+
</script>
|
|
86
|
+
<script>
|
|
87
|
+
// Setup button to recreate apollo-super-campaign
|
|
88
|
+
const returnButton = document.getElementById('returnButton');
|
|
89
|
+
returnButton.onclick = () => {
|
|
90
|
+
const el = document.createElement('apollo-super-campaign');
|
|
91
|
+
el.setAttribute('backend-url', '%VITE_BACKEND_URL%');
|
|
92
|
+
el.setAttribute('access-token', '%VITE_ACCESS_TOKEN%');
|
|
93
|
+
document.body.appendChild(el);
|
|
94
|
+
returnButton.style.display = 'none';
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// Listen to events meant for apollo
|
|
98
|
+
const events = [
|
|
99
|
+
'choose-another-fund-requested',
|
|
100
|
+
'fund-panel-shown',
|
|
101
|
+
'fund-tile-clicked',
|
|
102
|
+
'disclaimer-viewed',
|
|
103
|
+
'disclaimer-accepted',
|
|
104
|
+
'fund-pds-viewed',
|
|
105
|
+
'promoted-fund-joined',
|
|
106
|
+
'super-campaign-loaded',
|
|
107
|
+
'super-campaign-load-failed',
|
|
108
|
+
'super-campaign-failed',
|
|
109
|
+
];
|
|
110
|
+
for (const event of events) {
|
|
111
|
+
document.addEventListener(event, (e) => {
|
|
112
|
+
console.log('apollo received', e, e.detail);
|
|
113
|
+
|
|
114
|
+
// Simulate navigating away in apollo by destroying the element
|
|
115
|
+
if (
|
|
116
|
+
e.type === 'choose-another-fund-requested' ||
|
|
117
|
+
e.type === 'promoted-fund-joined'
|
|
118
|
+
) {
|
|
119
|
+
document.getElementsByTagName('apollo-super-campaign')[0].remove();
|
|
120
|
+
returnButton.style.display = 'block';
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Listen for iFrame events for debugging
|
|
126
|
+
const handleMessage = async (e) => {
|
|
127
|
+
//console.log('received iframe event', e.data);
|
|
128
|
+
};
|
|
129
|
+
window.addEventListener('message', handleMessage);
|
|
130
|
+
</script>
|
|
39
131
|
</body>
|
|
40
132
|
</html>
|