@biggive/components 202311240945.0.0 → 202312031231.0.0
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/biggive/biggive.esm.js +1 -1
- package/dist/biggive/p-0d0d051b.entry.js +1 -0
- package/dist/cjs/biggive-accordion_42.cjs.entry.js +63 -42
- package/dist/collection/components/biggive-back-to-top/biggive-back-to-top.js +1 -1
- package/dist/collection/components/biggive-footer/biggive-footer.js +2 -2
- package/dist/collection/components/biggive-main-menu/biggive-main-menu.js +7 -0
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.css +14 -10
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +51 -38
- package/dist/collection/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.css +1 -1
- package/dist/components/biggive-back-to-top.js +1 -1
- package/dist/components/biggive-footer.js +2 -2
- package/dist/components/biggive-main-menu.js +7 -0
- package/dist/components/biggive-totalizer-ticker-item.js +1 -1
- package/dist/components/biggive-totalizer.js +52 -38
- package/dist/esm/biggive-accordion_42.entry.js +63 -42
- package/dist/types/components/biggive-main-menu/biggive-main-menu.d.ts +1 -0
- package/dist/types/components/biggive-totalizer/biggive-totalizer.d.ts +1 -0
- package/hydrate/index.js +63 -42
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/biggive/p-5ba75d1d.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:
|
|
3
|
+
const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:30px}";
|
|
4
4
|
|
|
5
5
|
const BiggiveTotalizerTickerItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-
|
|
3
|
+
const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;--ticker-end-left:-100%}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(var(--ticker-end-left), 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{font-size:17px;line-height:24px;padding:6px 30px 10px 0;min-height:17px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;position:absolute;display:flex;min-width:100%;left:100%;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none !important}}.container .ticker-wrap .sleeve ::slotted([slot=ticker-items]){display:inline-flex;white-space:nowrap;max-height:24px}.container .ticker-wrap .sleeve-delayed-copy{display:none;white-space:nowrap;max-height:24px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
|
|
4
4
|
|
|
5
5
|
const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super();
|
|
8
8
|
this.__registerHost();
|
|
9
9
|
this.__attachShadow();
|
|
10
|
+
this.lastWrapperWidth = 0;
|
|
10
11
|
this.spaceBelow = 0;
|
|
11
12
|
this.primaryColour = 'primary';
|
|
12
13
|
this.primaryTextColour = 'white';
|
|
@@ -14,58 +15,71 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
14
15
|
this.secondaryTextColour = 'black';
|
|
15
16
|
this.mainMessage = undefined;
|
|
16
17
|
}
|
|
17
|
-
setSpeed(itemsWidth) {
|
|
18
|
-
var _a
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
|
|
18
|
+
setSpeed(itemsWidth, containerWidth) {
|
|
19
|
+
var _a;
|
|
20
|
+
if (containerWidth === this.lastWrapperWidth) {
|
|
21
|
+
// Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
|
|
22
|
+
// relevant changed.
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
25
|
+
let sleeves = [];
|
|
26
|
+
for (const ii in [1, 2, 3, 4]) {
|
|
27
|
+
const sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_' + ii);
|
|
28
|
+
if (sleeve) {
|
|
29
|
+
sleeves.push(sleeve);
|
|
30
|
+
// Restart the animation(s) on window resize to reduce the chance of jankiness.
|
|
31
|
+
// https://stackoverflow.com/a/45036752/2803757
|
|
32
|
+
sleeve.style.animationName = 'none';
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
this.lastWrapperWidth = containerWidth;
|
|
36
|
+
if (sleeves.length === 0) {
|
|
37
|
+
console.log('sleeves missing, skipping setSpeed()');
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
41
|
+
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
42
|
+
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
43
|
+
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
44
|
+
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
45
|
+
const duration = Math.round((itemsWidth / 100) * sleeveCount);
|
|
46
|
+
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
47
|
+
const sleeve = sleeves[ii - 1];
|
|
48
|
+
if (sleeve) {
|
|
49
|
+
sleeve.style.animationDuration = duration + 's';
|
|
50
|
+
// https://stackoverflow.com/a/45847760
|
|
51
|
+
sleeve.style.animationDelay = (duration * (ii - 1)) / sleeveCount + 's';
|
|
52
|
+
sleeve.style.display = 'inline-flex';
|
|
53
|
+
sleeve.style.animationName = 'ticker';
|
|
54
|
+
}
|
|
42
55
|
}
|
|
43
56
|
}
|
|
44
57
|
componentDidRender() {
|
|
45
|
-
var _a, _b;
|
|
58
|
+
var _a, _b, _c, _d, _e;
|
|
59
|
+
const wrapper = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap');
|
|
46
60
|
const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
|
|
47
|
-
const sleeve1 = (
|
|
48
|
-
const sleeve2 = (
|
|
49
|
-
|
|
50
|
-
|
|
61
|
+
const sleeve1 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_1');
|
|
62
|
+
const sleeve2 = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.ticker-wrap #sleeve_2');
|
|
63
|
+
const sleeve3 = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.ticker-wrap #sleeve_3');
|
|
64
|
+
const sleeve4 = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.ticker-wrap #sleeve_4');
|
|
65
|
+
if (!tickerItemsInternalWrapper || !sleeve1) {
|
|
66
|
+
console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');
|
|
51
67
|
return;
|
|
52
68
|
}
|
|
53
69
|
// Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
|
|
54
|
-
// a blank break. Sleeve 2 will animate on
|
|
70
|
+
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
55
71
|
tickerItemsInternalWrapper.childNodes.forEach((child) => {
|
|
56
|
-
sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
72
|
+
sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
73
|
+
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
74
|
+
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
57
75
|
});
|
|
58
|
-
|
|
59
|
-
tickerItemsInternalWrapper.style.display = 'inline-flex';
|
|
60
|
-
tickerItemsInternalWrapper.style.flex = 'none';
|
|
61
|
-
}
|
|
62
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
76
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
63
77
|
window.addEventListener('resize', () => {
|
|
64
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
78
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
65
79
|
});
|
|
66
80
|
}
|
|
67
81
|
render() {
|
|
68
|
-
return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
|
|
82
|
+
return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
|
|
69
83
|
}
|
|
70
84
|
get host() { return this; }
|
|
71
85
|
static get style() { return biggiveTotalizerCss; }
|
|
@@ -108,7 +108,7 @@ const BiggiveBackToTop = class {
|
|
|
108
108
|
registerInstance(this, hostRef);
|
|
109
109
|
}
|
|
110
110
|
render() {
|
|
111
|
-
return (h("div", { class: "container" }, h("a", { href: "#" }, h("img", { src: getAssetPath('
|
|
111
|
+
return (h("div", { class: "container" }, h("a", { href: "#" }, h("img", { src: getAssetPath('assets/images/triangles-combined.svg') }), h("span", { class: "text" }, "Back to top"))));
|
|
112
112
|
}
|
|
113
113
|
};
|
|
114
114
|
BiggiveBackToTop.style = biggiveBackToTopCss;
|
|
@@ -700,10 +700,10 @@ const BiggiveFooter = class {
|
|
|
700
700
|
render() {
|
|
701
701
|
const HeadingTag = `h${this.headingLevel}`;
|
|
702
702
|
const slotBasedFooter = () => {
|
|
703
|
-
return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('
|
|
703
|
+
return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("slot", { name: "nav-primary-title" }))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("slot", { name: "nav-secondary-title" }))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("slot", { name: "nav-tertiary-title" }))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/charities", label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: "https://blog.thebiggive.org.uk/funders", label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('assets/images/fundraising-regulator.png'), alt: "Registered with FUNDRAISING REGULATOR" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" })), h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("p", null, "\u00A9 2007 \u2013 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
|
|
704
704
|
};
|
|
705
705
|
const presetFooter = () => {
|
|
706
|
-
return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), h("ul", { slot: "nav-primary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and Girls Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'artsforimpact'), class: "icon-arts" }, "Arts for Impact")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("div", { slot: "nav-secondary-title" }, "Resources")), h("ul", { slot: "nav-secondary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press")))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("div", { slot: "nav-tertiary-title" }, "About")), h("ul", { slot: "nav-tertiary" }, h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'donation-funds') }, "Donate by Bank Transfer")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('
|
|
706
|
+
return (h("footer", { class: "footer" }, h("div", { class: "row row-top" }, h("nav", { class: "nav nav-primary", "aria-labelledby": "footer-primary-heading" }, h(HeadingTag, { class: "heading", id: "footer-primary-heading" }, h("div", { slot: "nav-primary-title" }, "Match Funding Opportunities")), h("ul", { slot: "nav-primary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'christmas-challenge'), class: "icon-christmas" }, "Christmas Challenge")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'green-match-fund'), class: "icon-green" }, "Green Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'champions-for-children'), class: "icon-children" }, "Champions for Children")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'women-girls-match-fund'), class: "icon-women-girls" }, "Women and Girls Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'kind2mind/'), class: "icon-mental-health" }, "Kind\u00B2Mind")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'artsforimpact'), class: "icon-arts" }, "Arts for Impact")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'emergency-campaigns/'), class: "icon-emergency" }, "Emergency Match Fund")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'run-your-own-campaign/)') }, "Run your own campaign")))), h("nav", { class: "nav nav-secondary", "aria-labelledby": "footer-secondary-heading-heading" }, h(HeadingTag, { class: "heading", id: "footer-secondary-heading" }, h("div", { slot: "nav-secondary-title" }, "Resources")), h("ul", { slot: "nav-secondary" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'case-studies') }, "Case Studies")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'blog') }, "Blog")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'reports-insights') }, "Reports & Insights")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'press') }, "Press")))), h("nav", { class: "nav nav-tertiary", "aria-labelledby": "footer-tertiary-heading" }, h(HeadingTag, { class: "heading", id: "footer-tertiary-heading" }, h("div", { slot: "nav-tertiary-title" }, "About")), h("ul", { slot: "nav-tertiary" }, h("li", null, h("a", { href: makeURL('Experience', this.experienceUrlPrefix, 's/contact-us') }, "Contact us")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-story') }, "Our Story")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-people') }, "Our People")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'donation-funds') }, "Donate by Bank Transfer")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'our-fees') }, "Our Fees")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'careers') }, "Careers")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'faqs') }, "FAQs")))), h("div", { class: "button-wrap" }, h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'charities'), label: "For charities" }), h("biggive-button", { "colour-scheme": "white", url: makeURL('Blog', this.blogUrlPrefix, 'funders'), label: "For funders" }))), h("div", { class: "row row-bottom" }, h("div", { class: "postscript-wrap" }, h("img", { class: "fr-logo", src: getAssetPath('assets/images/fundraising-regulator.png'), alt: "Registered with FUNDRAISING REGULATOR" }), h("nav", { class: "nav nav-postscript", "aria-label": "Legal" }, h("ul", { slot: "nav-postscript" }, h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'terms-and-conditions') }, "Terms and Conditions")), h("li", null, h("a", { href: makeURL('Blog', this.blogUrlPrefix, 'privacy') }, "Privacy Policy"))))), h("div", { class: "social-icon-wrap" }, h("div", { slot: "social-icons" }, h("biggive-social-icon", { service: "Facebook", url: "https://www.facebook.com/BigGive.org", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Twitter", url: "https://twitter.com/BigGive", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "LinkedIn", url: "https://uk.linkedin.com/company/big-give", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "YouTube", url: "https://www.youtube.com/channel/UC9_wH1aaTuZurJ-F9R8GDcA", "background-colour": "tertiary", "icon-colour": "black", wide: true }), h("biggive-social-icon", { service: "Instagram", url: "https://www.instagram.com/biggiveorg", "background-colour": "tertiary", "icon-colour": "black" }))), h("p", null, "\u00A9 2007 \u2013 2023 The Big Give Trust (1136547) | Company number 07273065 | Dragon Court, 27-29 Macklin Street, London WC2B 5LX, United Kingdom"))));
|
|
707
707
|
};
|
|
708
708
|
return this.usePresetFooter ? presetFooter() : slotBasedFooter();
|
|
709
709
|
}
|
|
@@ -1037,6 +1037,7 @@ const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{te
|
|
|
1037
1037
|
const BiggiveMainMenu = class {
|
|
1038
1038
|
constructor(hostRef) {
|
|
1039
1039
|
registerInstance(this, hostRef);
|
|
1040
|
+
this.lastOffsetHeight = 0;
|
|
1040
1041
|
this.openMobileMenu = () => {
|
|
1041
1042
|
const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
|
|
1042
1043
|
mobileMenu.style.left = '0';
|
|
@@ -1058,6 +1059,12 @@ const BiggiveMainMenu = class {
|
|
|
1058
1059
|
event.preventDefault();
|
|
1059
1060
|
}
|
|
1060
1061
|
setHeaderSize() {
|
|
1062
|
+
if (this.host.offsetHeight === this.lastOffsetHeight) {
|
|
1063
|
+
// Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
|
|
1064
|
+
// relevant changed.
|
|
1065
|
+
return;
|
|
1066
|
+
}
|
|
1067
|
+
this.lastOffsetHeight = this.host.offsetHeight;
|
|
1061
1068
|
// Some resize edge cases lead Firefox, and maybe others, to go haywire and get a host offset
|
|
1062
1069
|
// height of millions of pixels, presumably due to a layout logic loop. So for as long as we use
|
|
1063
1070
|
// this body padding workaround, we need a safe maximum value, currently 130px, beyond which
|
|
@@ -1622,11 +1629,12 @@ const BiggiveTimelineEntry = class {
|
|
|
1622
1629
|
};
|
|
1623
1630
|
BiggiveTimelineEntry.style = biggiveTimelineEntryCss;
|
|
1624
1631
|
|
|
1625
|
-
const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-
|
|
1632
|
+
const biggiveTotalizerCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-cc-red:hover,.background-colour-brand-cc-red{background-color:#B30510}.background-colour-hover-brand-wgmf-purple:hover,.background-colour-brand-wgmf-purple{background-color:#6E0887}.background-colour-hover-brand-gmf-green:hover,.background-colour-brand-gmf-green{background-color:#50B400}.background-colour-hover-brand-emf-yellow:hover,.background-colour-brand-emf-yellow{background-color:#FFE500}.background-colour-hover-brand-c4c-orange:hover,.background-colour-brand-c4c-orange{background-color:#F07D00}.background-colour-hover-brand-afa-pink:hover,.background-colour-brand-afa-pink{background-color:#BF387D}.background-colour-hover-brand-mhf-turquoise:hover,.background-colour-brand-mhf-turquoise{background-color:#62CFC9}.background-colour-hover-brand-grey:hover,.background-colour-brand-grey{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-hover-grey-extra-light:hover,.background-colour-grey-extra-light{background-color:#D7D7D7}.background-colour-hover-grey-light:hover,.background-colour-grey-light{background-color:#E8E8E8}.background-colour-hover-grey-medium:hover,.background-colour-grey-medium{background-color:#8A8A8A}.background-colour-hover-grey-dark:hover,.background-colour-grey-dark{background-color:#4A4A4A}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#62CFC9}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-cc-red:hover,.text-colour-brand-cc-red{color:#B30510}.text-colour-hover-brand-wgmf-purple:hover,.text-colour-brand-wgmf-purple{color:#6E0887}.text-colour-hover-brand-gmf-green:hover,.text-colour-brand-gmf-green{color:#50B400}.text-colour-hover-brand-emf-yellow:hover,.text-colour-brand-emf-yellow{color:#FFE500}.text-colour-hover-brand-c4c-orange:hover,.text-colour-brand-c4c-orange{color:#F07D00}.text-colour-hover-brand-afa-pink:hover,.text-colour-brand-afa-pink{color:#BF387D}.text-colour-hover-brand-mhf-turquoise:hover,.text-colour-brand-mhf-turquoise{color:#62CFC9}.text-colour-hover-brand-grey:hover,.text-colour-brand-grey{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.text-colour-hover-grey-extra-light:hover,.text-colour-grey-extra-light{color:#D7D7D7}.text-colour-hover-grey-light:hover,.text-colour-grey-light{color:#E8E8E8}.text-colour-hover-grey-medium:hover,.text-colour-grey-medium{color:#8A8A8A}.text-colour-hover-grey-dark:hover,.text-colour-grey-dark{color:#4A4A4A}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}:host{display:contents;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;--ticker-end-left:-100%}@keyframes ticker{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(var(--ticker-end-left), 0, 0)}}.container{position:absolute;left:0;right:0;z-index:1}.container .main-message-wrap{position:absolute;z-index:1;padding:10px 30px;left:0;top:0;font-size:24px;line-height:30px;font-weight:600;max-width:33.3%}.container .ticker-wrap{font-size:17px;line-height:24px;padding:6px 30px 10px 0;min-height:17px;overflow:hidden;position:relative}.container .ticker-wrap .sleeve{will-change:transform;position:absolute;display:flex;min-width:100%;left:100%;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:ticker;animation-duration:10s}@media (prefers-reduced-motion){.container .ticker-wrap .sleeve{animation-name:none !important}}.container .ticker-wrap .sleeve ::slotted([slot=ticker-items]){display:inline-flex;white-space:nowrap;max-height:24px}.container .ticker-wrap .sleeve-delayed-copy{display:none;white-space:nowrap;max-height:24px}@media screen and (max-width: 768px){.container .main-message-wrap{font-size:17px;line-height:24px;padding:10px}}";
|
|
1626
1633
|
|
|
1627
1634
|
const BiggiveTotalizer = class {
|
|
1628
1635
|
constructor(hostRef) {
|
|
1629
1636
|
registerInstance(this, hostRef);
|
|
1637
|
+
this.lastWrapperWidth = 0;
|
|
1630
1638
|
this.spaceBelow = 0;
|
|
1631
1639
|
this.primaryColour = 'primary';
|
|
1632
1640
|
this.primaryTextColour = 'white';
|
|
@@ -1634,64 +1642,77 @@ const BiggiveTotalizer = class {
|
|
|
1634
1642
|
this.secondaryTextColour = 'black';
|
|
1635
1643
|
this.mainMessage = undefined;
|
|
1636
1644
|
}
|
|
1637
|
-
setSpeed(itemsWidth) {
|
|
1638
|
-
var _a
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
console.log('sleeve1 or sleeve2 is missing, skipping setSpeed()');
|
|
1645
|
+
setSpeed(itemsWidth, containerWidth) {
|
|
1646
|
+
var _a;
|
|
1647
|
+
if (containerWidth === this.lastWrapperWidth) {
|
|
1648
|
+
// Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing
|
|
1649
|
+
// relevant changed.
|
|
1643
1650
|
return;
|
|
1644
1651
|
}
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1652
|
+
let sleeves = [];
|
|
1653
|
+
for (const ii in [1, 2, 3, 4]) {
|
|
1654
|
+
const sleeve = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap #sleeve_' + ii);
|
|
1655
|
+
if (sleeve) {
|
|
1656
|
+
sleeves.push(sleeve);
|
|
1657
|
+
// Restart the animation(s) on window resize to reduce the chance of jankiness.
|
|
1658
|
+
// https://stackoverflow.com/a/45036752/2803757
|
|
1659
|
+
sleeve.style.animationName = 'none';
|
|
1660
|
+
}
|
|
1661
|
+
}
|
|
1662
|
+
this.lastWrapperWidth = containerWidth;
|
|
1663
|
+
if (sleeves.length === 0) {
|
|
1664
|
+
console.log('sleeves missing, skipping setSpeed()');
|
|
1665
|
+
return;
|
|
1666
|
+
}
|
|
1667
|
+
// We've seen the initial calculation exclude the ~30px per set of values end padding before,
|
|
1668
|
+
// and it's safe to err on the side of more copies to reduce the chance of abrupt early loop
|
|
1669
|
+
// ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.
|
|
1670
|
+
const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));
|
|
1671
|
+
this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);
|
|
1672
|
+
const duration = Math.round((itemsWidth / 100) * sleeveCount);
|
|
1673
|
+
for (let ii = 1; ii <= sleeveCount; ii++) {
|
|
1674
|
+
const sleeve = sleeves[ii - 1];
|
|
1675
|
+
if (sleeve) {
|
|
1676
|
+
sleeve.style.animationDuration = duration + 's';
|
|
1677
|
+
// https://stackoverflow.com/a/45847760
|
|
1678
|
+
sleeve.style.animationDelay = (duration * (ii - 1)) / sleeveCount + 's';
|
|
1679
|
+
sleeve.style.display = 'inline-flex';
|
|
1680
|
+
sleeve.style.animationName = 'ticker';
|
|
1681
|
+
}
|
|
1662
1682
|
}
|
|
1663
1683
|
}
|
|
1664
1684
|
componentDidRender() {
|
|
1665
|
-
var _a, _b;
|
|
1685
|
+
var _a, _b, _c, _d, _e;
|
|
1686
|
+
const wrapper = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.ticker-wrap');
|
|
1666
1687
|
const tickerItemsInternalWrapper = this.host.querySelector(`[slot="ticker-items"]`);
|
|
1667
|
-
const sleeve1 = (
|
|
1668
|
-
const sleeve2 = (
|
|
1669
|
-
|
|
1670
|
-
|
|
1688
|
+
const sleeve1 = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.ticker-wrap #sleeve_1');
|
|
1689
|
+
const sleeve2 = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.ticker-wrap #sleeve_2');
|
|
1690
|
+
const sleeve3 = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.ticker-wrap #sleeve_3');
|
|
1691
|
+
const sleeve4 = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.ticker-wrap #sleeve_4');
|
|
1692
|
+
if (!tickerItemsInternalWrapper || !sleeve1) {
|
|
1693
|
+
console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');
|
|
1671
1694
|
return;
|
|
1672
1695
|
}
|
|
1673
1696
|
// Clone all children of the ticker items internal wrapper and append them, so the ticker can show items without
|
|
1674
|
-
// a blank break. Sleeve 2 will animate on
|
|
1697
|
+
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
1675
1698
|
tickerItemsInternalWrapper.childNodes.forEach((child) => {
|
|
1676
|
-
sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
1699
|
+
sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.
|
|
1700
|
+
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
1701
|
+
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
1677
1702
|
});
|
|
1678
|
-
|
|
1679
|
-
tickerItemsInternalWrapper.style.display = 'inline-flex';
|
|
1680
|
-
tickerItemsInternalWrapper.style.flex = 'none';
|
|
1681
|
-
}
|
|
1682
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
1703
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
1683
1704
|
window.addEventListener('resize', () => {
|
|
1684
|
-
this.setSpeed(tickerItemsInternalWrapper.clientWidth);
|
|
1705
|
+
this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);
|
|
1685
1706
|
});
|
|
1686
1707
|
}
|
|
1687
1708
|
render() {
|
|
1688
|
-
return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }))))));
|
|
1709
|
+
return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", null, h("div", { class: "banner" }, h("div", { class: 'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour }, this.mainMessage), h("div", { class: 'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour }, h("div", { id: "sleeve_1", class: "sleeve" }, h("slot", { name: "ticker-items" })), h("div", { id: "sleeve_2", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_3", class: "sleeve sleeve-delayed-copy" }), h("div", { id: "sleeve_4", class: "sleeve sleeve-delayed-copy" }))))));
|
|
1689
1710
|
}
|
|
1690
1711
|
get host() { return getElement(this); }
|
|
1691
1712
|
};
|
|
1692
1713
|
BiggiveTotalizer.style = biggiveTotalizerCss;
|
|
1693
1714
|
|
|
1694
|
-
const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:
|
|
1715
|
+
const biggiveTotalizerTickerItemCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:contents}.ticker-item{margin-right:30px}";
|
|
1695
1716
|
|
|
1696
1717
|
const BiggiveTotalizerTickerItem = class {
|
|
1697
1718
|
constructor(hostRef) {
|