@total_onion/onion-library 2.0.30 → 2.0.33

package/README.md

@@ -1,33 +1,3 @@
-# cbl-component-library
+# Onion Library
 
-Front end components for gcms sites
-
-## Installation
-
-Install with npm or yarn..
-
-`npm install --save-dev @pernod-ricard-global-cms/cbl-component-library`
-
-`yarn add -D @pernod-ricard-global-cms/cbl-component-library`
-
-If you don't have the scripts already in your package.json you can add these and use them to install and update components.
-
-`"install-component": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/install-component.js", "upgrade-component": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/upgrade-component.js", "list-components": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/list-components.js",`
-
-eg you can list the available components with
-
-`yarn list-components`
-
-and then you can install and component with
-
-`yarn install-component <name-of-component>`
-
-## Run unit tests
-
-Go to the folder
-
-`yarn install`
-
-then, to run unit tests, 
-
-`yarn test`
+Front end component library

package/components/block-group-container-v3/group-container-v3.js

@@ -6,7 +6,7 @@ export default function groupcontainerv3Js(options = {}) {
 			import(
 				'Assets/js/blocks/group-container-v3/group-container-v3-extra.js'
 			).then((result) => {
-				result.default();
+				result.default({block: block});
 			});
 		}
 	} catch (error) {

package/components/block-scrolling-banner-v3/scrolling-banner-v3.js

@@ -1,4 +1,3 @@
-import scrollingbannerJs from 'Assets/js/modules/library-modules/scrolling-banner/scrolling-banner';
 export default function scrollingbannerv3Js(options = {}) {
 	try {
 		const {block} = options;
@@ -7,3 +6,124 @@ export default function scrollingbannerv3Js(options = {}) {
 		console.error(error);
 	}
 }
+//import {resizeDebouncer} from '@pernod-ricard-global-cms/jsutils';
+const initializedBanners = new WeakMap(); // key = element, value = { animations } //cleaner way
+function scrollingbannerJs(block) {
+	if (!block) {
+		return;
+	}
+
+	const bannerElement = block.querySelector('.scrolling-banner');
+	if (!bannerElement) {
+		return;
+	}
+
+	try {
+		// only if it is not already done
+		if (!initializedBanners.has(bannerElement)) {
+			bannerInit(bannerElement);
+		}
+
+		// resize observer instead of resizeDebouncer because the later
+		// caused the issue mentionned in MLDB-7
+		const wrapper = bannerElement.querySelector(
+			'.scrolling-banner__wrapper'
+		);
+		if (wrapper) {
+			if (window.ResizeObserver) {
+				const resizeObserver = new ResizeObserver(() => {
+					resetBanner(bannerElement);
+					bannerInit(bannerElement);
+				});
+				resizeObserver.observe(wrapper);
+			} else {
+				// Fallback simple
+				window.addEventListener('resize', () => {
+					resetBanner(bannerElement);
+					bannerInit(bannerElement);
+				});
+			}
+		}
+	} catch (error) {
+		console.error(error);
+	}
+
+	function bannerInit(bannerElement) {
+		if (initializedBanners.has(bannerElement)) {
+			return;
+		}
+		// console.log('bannerInit');
+
+		const container = bannerElement.querySelector(
+			'.scrolling-banner__container'
+		);
+		const wrapper = bannerElement.querySelector(
+			'.scrolling-banner__wrapper'
+		);
+		const inner = bannerElement.querySelector('.scrolling-banner__inner');
+		const speed = bannerElement.dataset.speed ?? 5;
+
+		const wrapperWidth = wrapper.clientWidth;
+		const innerContentWidth = inner.clientWidth;
+		const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
+
+		for (let index = 0; index < multiplier; index++) {
+			const newInner = inner.cloneNode(true);
+			newInner.classList.add('clone');
+			container.appendChild(newInner);
+		}
+
+		const containerHeight = inner.clientHeight;
+		wrapper.setAttribute('style', `min-height: ${containerHeight}px`);
+
+		const newTickerContainer = container.cloneNode(true);
+		newTickerContainer.classList.add('clone');
+		wrapper.appendChild(newTickerContainer);
+
+		const animation = [
+			{transform: `translateX(0%)`},
+			{transform: `translateX(-200%)`}
+		];
+
+		const time = 100000 / speed;
+
+		let timing = {
+			duration: time,
+			iterations: Infinity
+		};
+		let timing2 = {
+			duration: time,
+			delay: time / 2,
+			iterations: Infinity
+		};
+		const containers = bannerElement.querySelectorAll(
+			'.scrolling-banner__container'
+		);
+
+		const anim1 = containers[0].animate(animation, timing);
+		const anim2 = containers[1].animate(animation, timing2);
+
+		// set as initialized and store animation for a possible cleanup
+		initializedBanners.set(bannerElement, {anim1, anim2});
+	}
+
+	function resetBanner(bannerElement) {
+		// if already initialized, anims get reset
+		const data = initializedBanners.get(bannerElement);
+		if (data) {
+			data.anim1?.cancel();
+			data.anim2?.cancel();
+			initializedBanners.delete(bannerElement);
+		}
+
+		bannerElement
+			.querySelectorAll(
+				'.scrolling-banner__container.clone, .scrolling-banner__inner.clone'
+			)
+			.forEach((el) => el.remove());
+
+		bannerElement
+			.querySelector('.scrolling-banner__wrapper')
+			.removeAttribute('style');
+	}
+}

package/components/block-scrolling-banner-v3/scrolling-banner-v3.scss

@@ -1,6 +1,6 @@
-@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
-@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
-@use 'NodeModules/@total_onion/onion-library/breakpoints';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
 
 .scrolling-banner-v3 {
 	position: relative;
@@ -14,7 +14,6 @@
 	text-transform: uppercase;
 	height: auto;
 	z-index: 99;
-	grid-area: main;
 	place-self: var(--position);
 
 	&__wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.30",
+	"version": "2.0.33",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {