@biggive/components 202401021340.0.0 → 202401021355.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-a02ae381.entry.js → p-dbb99ab7.entry.js} +2 -2
- package/dist/biggive/p-dbb99ab7.entry.js.map +1 -0
- package/dist/cjs/biggive-accordion_42.cjs.entry.js +3 -6
- package/dist/cjs/biggive-accordion_42.cjs.entry.js.map +1 -1
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js +3 -6
- package/dist/collection/components/biggive-totalizer/biggive-totalizer.js.map +1 -1
- package/dist/components/biggive-totalizer.js +3 -6
- package/dist/components/biggive-totalizer.js.map +1 -1
- package/dist/esm/biggive-accordion_42.entry.js +3 -6
- package/dist/esm/biggive-accordion_42.entry.js.map +1 -1
- package/hydrate/index.js +3 -6
- package/package.json +1 -1
- package/dist/biggive/p-a02ae381.entry.js.map +0 -1
|
@@ -64,12 +64,9 @@ export class BiggiveTotalizer {
|
|
|
64
64
|
// Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without
|
|
65
65
|
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
66
66
|
setTimeout(() => {
|
|
67
|
-
tickerItemsInternalWrapper.
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
71
|
-
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
72
|
-
});
|
|
67
|
+
sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
68
|
+
sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
69
|
+
sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
73
70
|
}, 800);
|
|
74
71
|
setTimeout(() => {
|
|
75
72
|
// In Angular contexts, it seems like we need to leave a little time before the calculations work.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biggive-totalizer.js","sourceRoot":"","sources":["../../../src/components/biggive-totalizer/biggive-totalizer.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"biggive-totalizer.js","sourceRoot":"","sources":["../../../src/components/biggive-totalizer/biggive-totalizer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,gBAAgB;;QACnB,qBAAgB,GAAW,CAAC,CAAC;0BAMR,CAAC;6BAIE,SAAS;iCAKL,OAAO;+BAKT,WAAW;mCAKP,OAAO;;;IAOrC,QAAQ,CAAC,UAAkB,EAAE,cAAsB;;QACzD,OAAO,CAAC,GAAG,CAAC,oCAAoC,GAAG,UAAU,GAAG,mBAAmB,GAAG,cAAc,CAAC,CAAC;QAEtG,IAAI,cAAc,KAAK,IAAI,CAAC,gBAAgB,EAAE;YAC5C,sGAAsG;YACtG,oBAAoB;YACpB,OAAO;SACR;QAED,IAAI,OAAO,GAAqB,EAAE,CAAC;QACnC,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,GAAG,EAAE,CAA0B,CAAC;YAC1G,IAAI,MAAM,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACrB,+EAA+E;gBAC/E,+CAA+C;gBAC/C,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;aACrC;SACF;QAED,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;QAEvC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACxB,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;YACpD,OAAO;SACR;QAED,6FAA6F;QAC7F,4FAA4F;QAC5F,4FAA4F;QAC5F,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAClG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,IAAI,WAAW,GAAG,GAAG,GAAG,CAAC,CAAC;QAE3E,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QAE9D,KAAK,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,WAAW,EAAE,EAAE,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAC/B,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,CAAC,iBAAiB,GAAG,QAAQ,GAAG,GAAG,CAAC;gBAChD,uCAAuC;gBACvC,MAAM,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,QAAQ,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBAC9E,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;aACvC;SACF;IACH,CAAC;IAED,gBAAgB;;QACd,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAmB,CAAC;QAEtF,MAAM,0BAA0B,GAA0B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC3G,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACjH,MAAM,OAAO,GAAsC,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAEjH,IAAI,CAAC,0BAA0B,IAAI,CAAC,OAAO,EAAE;YAC3C,OAAO,CAAC,GAAG,CAAC,sFAAsF,CAAC,CAAC;YACpG,OAAO;SACR;QAED,uHAAuH;QACvH,kGAAkG;QAClG,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3E,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3E,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,0BAA0B,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7E,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,UAAU,CAAC,GAAG,EAAE;YACd,kGAAkG;YAClG,6BAA6B;YAC7B,IAAI,CAAC,QAAQ,CAAC,0BAA0B,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7E,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,0BAA0B,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAE,wBAAwB,GAAG,IAAI,CAAC,UAAU;YACpD;gBACE,WAAK,KAAK,EAAC,QAAQ;oBACjB,WAAK,KAAK,EAAE,sCAAsC,GAAG,IAAI,CAAC,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAO;oBAChJ,WAAK,KAAK,EAAE,gCAAgC,GAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,iBAAiB;wBAC1G,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ;4BAC/B,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;wBACN,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAE/C;wBACN,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAAO;wBAC5D,WAAK,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,GAAO,CACxD,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);\n\n const duration = Math.round((itemsWidth / 100) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -70,12 +70,9 @@ const BiggiveTotalizer$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTotaliz
|
|
|
70
70
|
// Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without
|
|
71
71
|
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
72
72
|
setTimeout(() => {
|
|
73
|
-
tickerItemsInternalWrapper.
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
77
|
-
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
78
|
-
});
|
|
73
|
+
sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
74
|
+
sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
75
|
+
sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
79
76
|
}, 800);
|
|
80
77
|
setTimeout(() => {
|
|
81
78
|
// In Angular contexts, it seems like we need to leave a little time before the calculations work.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n\n --ticker-end-left: -100%;\n}\n\n@keyframes ticker {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--ticker-end-left), 0, 0);\n }\n}\n\n.container {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n\n .main-message-wrap {\n position: absolute;\n z-index: 1;\n padding: $spacer-2 $spacer-4;\n left: 0;\n top: 0;\n @include font-size-large();\n font-weight: 600;\n max-width: 33.3%;\n }\n\n .ticker-wrap {\n @include font-size-medium();\n padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n min-height: 17px;\n overflow: hidden;\n position: relative;\n\n .sleeve {\n will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n display: inline-flex;\n position: absolute;\n top: 4px;\n height: 24px;\n min-width: 100%;\n left: 100%;\n white-space: nowrap;\n\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n animation-name: ticker;\n // TS overrides the specific timings once the width of ticker elements is known.\n animation-duration: 10s;\n\n @media (prefers-reduced-motion) {\n animation-name: none !important; // Turn off movement when needed for a11y.\n }\n }\n\n .sleeve-delayed-copy {\n // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n // of the items and container.\n display: none;\n white-space: nowrap;\n max-height: 24px;\n }\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .main-message-wrap {\n @include font-size-medium();\n padding: $spacer-2;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);\n\n const duration = Math.round((itemsWidth / 100) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n tickerItemsInternalWrapper.childNodes.forEach((child: HTMLElement) => {\n console.log('Child element for cloning: ', child);\n\n sleeve2 && sleeve2.appendChild(child.cloneNode(true)); // Deep clone all items.\n sleeve3 && sleeve3.appendChild(child.cloneNode(true));\n sleeve4 && sleeve4.appendChild(child.cloneNode(true));\n });\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"biggive-totalizer.js","mappings":"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","names":["BiggiveTotalizer"],"sources":["src/components/biggive-totalizer/biggive-totalizer.scss?tag=biggive-totalizer&encapsulation=shadow","src/components/biggive-totalizer/biggive-totalizer.tsx"],"sourcesContent":["@include backgrounds();\n@include spacers();\n@include text-colours();\n\n:host {\n display: contents;\n @include standard-font();\n\n --ticker-end-left: -100%;\n}\n\n@keyframes ticker {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(var(--ticker-end-left), 0, 0);\n }\n}\n\n.container {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n\n .main-message-wrap {\n position: absolute;\n z-index: 1;\n padding: $spacer-2 $spacer-4;\n left: 0;\n top: 0;\n @include font-size-large();\n font-weight: 600;\n max-width: 33.3%;\n }\n\n .ticker-wrap {\n @include font-size-medium();\n padding: calc($spacer-2 - 4px) $spacer-4 $spacer-2 0;\n min-height: 17px;\n overflow: hidden;\n position: relative;\n\n .sleeve {\n will-change: transform; // https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/\n display: inline-flex;\n position: absolute;\n top: 4px;\n height: 24px;\n min-width: 100%;\n left: 100%;\n white-space: nowrap;\n\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n animation-name: ticker;\n // TS overrides the specific timings once the width of ticker elements is known.\n animation-duration: 10s;\n\n @media (prefers-reduced-motion) {\n animation-name: none !important; // Turn off movement when needed for a11y.\n }\n }\n\n .sleeve-delayed-copy {\n // We set between 0 and 3 copies to `display: inline-flex` in TS, depending on the size\n // of the items and container.\n display: none;\n white-space: nowrap;\n max-height: 24px;\n }\n }\n}\n\n@media screen and (max-width: $screen-tablet-max) {\n .container {\n .main-message-wrap {\n @include font-size-medium();\n padding: $spacer-2;\n }\n }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-totalizer',\n styleUrl: 'biggive-totalizer.scss',\n shadow: true,\n})\nexport class BiggiveTotalizer {\n private lastWrapperWidth: number = 0;\n\n @Element() host: HTMLBiggiveTotalizerElement;\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Primary banner colour\n */\n @Prop() primaryColour: string = 'primary';\n\n /**\n * Primary text colour\n */\n @Prop() primaryTextColour: string = 'white';\n\n /**\n * Secondary banner colour\n */\n @Prop() secondaryColour: string = 'secondary';\n\n /**\n * Secondary text colour\n */\n @Prop() secondaryTextColour: string = 'black';\n\n /**\n * Primary message\n */\n @Prop() mainMessage: string;\n\n private setSpeed(itemsWidth: number, containerWidth: number) {\n console.log('setSpeed() called with itemsWidth=' + itemsWidth + ', containerWidth=' + containerWidth);\n\n if (containerWidth === this.lastWrapperWidth) {\n // Some browsers fire 'resize' overzealously on scroll; we don't want to cause extra paints if nothing\n // relevant changed.\n return;\n }\n\n let sleeves: HTMLDivElement[] = [];\n for (const ii in [1, 2, 3, 4]) {\n const sleeve = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_' + ii) as HTMLDivElement | null;\n if (sleeve) {\n sleeves.push(sleeve);\n // Restart the animation(s) on window resize to reduce the chance of jankiness.\n // https://stackoverflow.com/a/45036752/2803757\n sleeve.style.animationName = 'none';\n }\n }\n\n this.lastWrapperWidth = containerWidth;\n\n if (sleeves.length === 0) {\n console.log('sleeves missing, skipping setSpeed()');\n return;\n }\n\n // We've seen the initial calculation exclude the ~30px per set of values end padding before,\n // and it's safe to err on the side of more copies to reduce the chance of abrupt early loop\n // ends, so we add a buffer of 40px to the calculation when deciding how many copies to use.\n const sleeveCount = Math.max(1, Math.min(4, Math.ceil((2 * (40 + itemsWidth)) / containerWidth)));\n this.host.style.setProperty('--ticker-end-left', `-${sleeveCount * 100}%`);\n\n const duration = Math.round((itemsWidth / 100) * sleeveCount);\n\n for (let ii = 1; ii <= sleeveCount; ii++) {\n const sleeve = sleeves[ii - 1];\n if (sleeve) {\n sleeve.style.animationDuration = duration + 's';\n // https://stackoverflow.com/a/45847760\n sleeve.style.animationDelay = (duration / (sleeveCount - 1)) * (ii - 1) + 's';\n sleeve.style.display = 'inline-flex';\n sleeve.style.animationName = 'ticker';\n }\n }\n }\n\n componentDidLoad() {\n const wrapper = this.host.shadowRoot?.querySelector('.ticker-wrap') as HTMLDivElement;\n\n const tickerItemsInternalWrapper: HTMLDivElement | null = this.host.querySelector(`[slot=\"ticker-items\"]`);\n const sleeve1: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_1');\n const sleeve2: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_2');\n const sleeve3: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_3');\n const sleeve4: HTMLDivElement | null | undefined = this.host.shadowRoot?.querySelector('.ticker-wrap #sleeve_4');\n\n if (!tickerItemsInternalWrapper || !sleeve1) {\n console.log('tickerItemsInternalWrapper or sleeve1 is missing, skipping totalizer animation setup');\n return;\n }\n\n // Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without\n // a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.\n setTimeout(() => {\n sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));\n }, 800);\n\n setTimeout(() => {\n // In Angular contexts, it seems like we need to leave a little time before the calculations work.\n // Not totally clear why yet.\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n }, 300);\n\n window.addEventListener('resize', () => {\n this.setSpeed(tickerItemsInternalWrapper.clientWidth, wrapper.clientWidth);\n });\n }\n\n render() {\n return (\n <div class={'container space-below-' + this.spaceBelow}>\n <div>\n <div class=\"banner\">\n <div class={'main-message-wrap background-colour-' + this.secondaryColour + ' text-colour-' + this.secondaryTextColour}>{this.mainMessage}</div>\n <div class={'ticker-wrap background-colour-' + this.primaryColour + ' text-colour-' + this.primaryTextColour}>\n <div id=\"sleeve_1\" class=\"sleeve\">\n <slot name=\"ticker-items\"></slot>\n </div>\n <div id=\"sleeve_2\" class=\"sleeve sleeve-delayed-copy\">\n {/* Contents for these 3 are copied in TS and copies shown or hidden based on available space */}\n </div>\n <div id=\"sleeve_3\" class=\"sleeve sleeve-delayed-copy\"></div>\n <div id=\"sleeve_4\" class=\"sleeve sleeve-delayed-copy\"></div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1698,12 +1698,9 @@ const BiggiveTotalizer = class {
|
|
|
1698
1698
|
// Deep clone [all children of] the ticker items internal wrapper and append them, so the ticker can show items without
|
|
1699
1699
|
// a blank break. Sleeve 2 and up will animate on delays per https://stackoverflow.com/a/45847760.
|
|
1700
1700
|
setTimeout(() => {
|
|
1701
|
-
tickerItemsInternalWrapper.
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
sleeve3 && sleeve3.appendChild(child.cloneNode(true));
|
|
1705
|
-
sleeve4 && sleeve4.appendChild(child.cloneNode(true));
|
|
1706
|
-
});
|
|
1701
|
+
sleeve2 && sleeve2.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
1702
|
+
sleeve3 && sleeve3.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
1703
|
+
sleeve4 && sleeve4.appendChild(tickerItemsInternalWrapper.cloneNode(true));
|
|
1707
1704
|
}, 800);
|
|
1708
1705
|
setTimeout(() => {
|
|
1709
1706
|
// In Angular contexts, it seems like we need to leave a little time before the calculations work.
|