@total_onion/onion-library 3.0.49 → 3.2.0

package/index.js

@@ -0,0 +1,10 @@
+import VideoController from './onion-videocontroller/onion-videocontroller.js';
+import ModalController from './onion-modalcontroller/onion-modalcontroller.js';
+export * from './onion-utils.mjs';
+export * from './entry-animation-observer.js';
+
+export default VideoController;
+export { VideoController, ModalController };
+export { default as modalController } from './onion-modalcontroller/onion-modalcontroller.js';
+export { default as videoController } from './onion-videocontroller/onion-videocontroller.js';
+export { default as onionLoader } from './onion-loader.js';

package/onion-loader.js

@@ -52,27 +52,35 @@ function lazyloaderInit() {
 	options.debugLogMessages && console.log('Lazy Loader initialized!');
 	options.lazyBlocksToSearchFor = [];
 	assetArray.forEach((asset) => {
-		if (
-			options.filePrefix === 'nodemodules' &&
-			asset.assetKey.includes('-v3')
-		) {
+		// if (
+		// 	asset.assetKey.includes('-v3') &&
+		// 	!asset.assetKey.includes('sub-block')
+		// ) {
+		// 	options.assetMap[asset.assetKey] = {
+		// 		js: () =>
+		// 			import(
+		// 				`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 			),
+		// 		// import(
+		// 		// 	`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 		// ),
+		// 		css: options.ignoreCss === true
+		// 	};
+		// }
+		if (asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/sub-blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
-				css: options.ignoreCss === true
+				css: options.ignoreCss === false
 			};
-		} else {
 		}
-		if (
-			options.filePrefix === 'nodemodules' &&
-			!asset.assetKey.includes('-v3')
-		) {
+		if (!asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
 				css: options.ignoreCss === false
 			};
@@ -236,7 +244,7 @@ export function loadCss(assetKey) {
 				assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/sub-blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else if (
 				options.css === true &&
@@ -244,7 +252,7 @@ export function loadCss(assetKey) {
 				!assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else {
 				return resolve(true);

package/onion-modalcontroller/README.md

@@ -0,0 +1,2 @@
+# onion-modalcontroller
+Pop up modal controller

package/onion-modalcontroller/onion-modalcontroller.js

@@ -0,0 +1,183 @@
+export default class modalController {
+  constructor(settings = {}) {
+    let defaultGlobalSettings = {
+      bodyClass: "modal-active",
+      activeStateClass: "modal-active",
+      enableDebugLogs: true,
+      userInteracted: false,
+      addCloseButton: true,
+      closeSelector: "#modal-controller-popup__close-btn",
+      closeDelay: 1,
+      closingClass: "something",
+      activateDelay: 0,
+      lenis: false,
+    };
+    this.scanForNewTriggers();
+
+    console.log("hello!");
+
+    if (modalController.instance instanceof modalController) {
+      return modalController.instance;
+    }
+    modalController.instance = this;
+    this.globalSettings = { ...defaultGlobalSettings, ...settings };
+    this.enableDebugLogs = this.globalSettings.enableDebugLogs;
+    this.handleModalTriggers();
+    this.handleBgClicks();
+  }
+
+  scanForNewTriggers() {
+    this.globalModalTriggers = document.body.querySelectorAll(
+      "[data-modalpopuptrigger]",
+    );
+  }
+  handleBgClicks() {
+    window.addEventListener("click", (event) => {
+      const modalPopup = document.getElementById("modal-controller-popup");
+      this.closePopupOnClickOutside(event, modalPopup);
+    });
+  }
+  handleCloseButtonClicks() {
+    const modalPopup = document.getElementById("modal-controller-popup");
+    if (!modalPopup) {
+      return;
+    }
+    const closeButtons = modalPopup.querySelectorAll(
+      this.globalSettings.closeSelector || "#modal-controller-popup__close-btn",
+    );
+    closeButtons.forEach((closeButton) => {
+      if (closeButton.dataset.modalpopupCloseBound === "true") {
+        return;
+      }
+      closeButton.dataset.modalpopupCloseBound = "true";
+      closeButton.addEventListener("click", () => {
+        const modalPopup = document.getElementById("modal-controller-popup");
+        this.closePopup(modalPopup);
+      });
+    });
+  }
+  handleModalTriggers() {
+    this.globalModalTriggers.forEach((trigger) => {
+      trigger.addEventListener("click", () => {
+        this.triggerModalPopup(trigger.dataset.modalpopuptrigger);
+      });
+    });
+  }
+  triggerModalPopup(triggerName) {
+    let modalPopup = document.getElementById("modal-controller-popup");
+    if (!modalPopup) {
+      const modalPopupHtml = `<div class="modal-controller-popup" id="modal-controller-popup">
+      <div class="modal-controller-popup__container">
+      ${this.globalSettings.addCloseButton ? '<span class="modal-controller-popup__close-btn" id="modal-controller-popup__close-btn"></span>' : ""}
+      <div class="modal-controller-popup__content"></div>
+      </div>
+      </div>`;
+      document.body.insertAdjacentHTML("beforeend", modalPopupHtml);
+      modalPopup = document.getElementById("modal-controller-popup");
+    }
+
+    if (!modalPopup) {
+      return;
+    }
+
+    const popupContent = document.querySelector(
+      ".modal-controller-popup__content",
+    );
+
+    if (!popupContent) {
+      return;
+    }
+
+    let templateContent;
+
+    const modalPopupContent = document.querySelector(
+      `[data-modalpopupcontent=${triggerName}]`,
+    );
+
+    if (!modalPopupContent) {
+      this.closePopup(modalPopup);
+      return;
+    }
+
+    //Check if the actual content element is already in the popup content container, if not - move it there.
+    if (
+      !popupContent.querySelector(`[data-modalpopupcontent=${triggerName}]`)
+    ) {
+      if (modalPopupContent) {
+        templateContent = modalPopupContent;
+      }
+
+      if (modalPopupContent.nodeName === "TEMPLATE") {
+        templateContent = modalPopupContent.content;
+      }
+
+      popupContent.appendChild(templateContent);
+    } else {
+      templateContent = popupContent.querySelector(
+        `[data-modalpopupcontent=${triggerName}]`,
+      );
+    }
+
+    const activateDelay = Number(this.globalSettings.activateDelay) || 0;
+    if (activateDelay > 0) {
+      templateContent.classList.remove("active");
+      window.setTimeout(() => {
+        templateContent.classList.add("active");
+      }, activateDelay);
+    } else {
+      templateContent.classList.add("active");
+    }
+    requestAnimationFrame(() => {
+      modalPopup.classList.add("open");
+      document.documentElement.classList.add("lock-position");
+      if (this.globalSettings.lenis) {
+        document.body.dataset.lenisPrevent = "true";
+      }
+    });
+    this.handleCloseButtonClicks();
+  }
+  closePopup(modalPopup) {
+    if (!modalPopup) {
+      return;
+    }
+    modalPopup.classList.remove("open");
+    document.documentElement.classList.remove("lock-position");
+    if (this.globalSettings.lenis) {
+      delete document.body.dataset.lenisPrevent;
+    }
+    const popupContent = modalPopup.querySelector(
+      ".modal-controller-popup__content",
+    );
+
+    if (popupContent) {
+      const activeContents = popupContent.querySelectorAll(
+        "[data-modalpopupcontent].active",
+      );
+      const closeDelay = Number(this.globalSettings.closeDelay) || 0;
+      const closingClass = this.globalSettings.closingClass;
+
+      if (closeDelay > 0 && closingClass) {
+        activeContents.forEach((activeContent) => {
+          activeContent.classList.add(closingClass);
+        });
+        setTimeout(() => {
+          activeContents.forEach((activeContent) => {
+            activeContent.classList.remove(closingClass);
+          });
+        }, closeDelay);
+      }
+
+      activeContents.forEach((activeContent) => {
+        activeContent.classList.remove("active");
+      });
+    }
+  }
+  closePopupOnClickOutside(event, modalPopup) {
+    if (event.target === modalPopup) {
+      this.closePopup(modalPopup);
+    }
+  }
+  setGlobalSettings(settings = {}) {
+    this.globalSettings = { ...this.globalSettings, ...settings };
+  }
+}

package/onion-utils.mjs

@@ -88,24 +88,24 @@ export function inCriticalCssConfig(assetKey) {
 	return true;
 }
 
-/**
- * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
- * @param {string} assetKey The assetkey string of the block.
- * @param {object} options The options object which will at the very least contain the css property set to true.
- * @returns {promise}
- */
-export function loadCss(assetKey, options = { css: true }) {
-	const promise = new Promise((resolve) => {
-		if (options.css === true && !inCriticalCssConfig(assetKey)) {
-			import(
-				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
-			).then(() => resolve(true));
-		} else {
-			return resolve(true);
-		}
-	});
-	return promise;
-}
+// /**
+//  * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
+//  * @param {string} assetKey The assetkey string of the block.
+//  * @param {object} options The options object which will at the very least contain the css property set to true.
+//  * @returns {promise}
+//  */
+// export function loadCss(assetKey, options = { css: true }) {
+// 	const promise = new Promise((resolve) => {
+// 		if (options.css === true && !inCriticalCssConfig(assetKey)) {
+// 			import(
+// 				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
+// 			).then(() => resolve(true));
+// 		} else {
+// 			return resolve(true);
+// 		}
+// 	});
+// 	return promise;
+// }
 
 /**
  * Checks for browser, device and OS and then adds the relevant classes to the html tag.
@@ -680,7 +680,6 @@ const api = {
 	isEmailValid,
 	isInViewport,
 	isTablet,
-	loadCss,
 	mobileCheck,
 	resizeDebouncer,
 	supportsWebp,

package/onion-videocontroller/README.md

@@ -0,0 +1,89 @@
+# onion-videocontroller
+
+Multi format video player with optional modal pop up.
+The videocontroller houses multiple video implementations as modules which it calls upon depending on the type of video the user wishes to play. This way all the necessary code plus lazyloading optimisations can be implemented separately for each video type.
+Given that the videocontroller builds a dictionary of all the video containers and video triggers that have been passed to it, it can do things like stop currently playing videos when a new video is started, regardless of which type of video they might be.
+
+## Install via npm or yarn with:
+
+`npm install @pernod-ricard-global-cms/onion-videocontroller`
+or
+`yarn add @pernod-ricard-global-cms/onion-videocontroller`
+
+## Import the module in your js file with:
+
+`import onion-videocontroller from '@pernod-ricard-global-cms/onion-videocontroller';`
+
+Instantiate the class in your js file and pass a reference to an html element that is a parent of the video container.
+In a typical cbl block js file this would be the block element, so it might look something like this.
+
+`const videoController = new onion-videocontroller(block);`
+
+## HTML/Twig
+
+To get the most functionality out of the box, this package should be installed along with the the cbl component library.
+
+https://github.com/Chivas-Brothers/cbl-component-library
+
+If you install the fields: video from the component library you will receive 2 twig files with the standardized selection of variables already wired up to attributes in the html. By default they will be copied to the views/components folder but you can choose to not run the install command for the video fields and copy the twigs to wherever you would prefer.
+
+`video-component.twig`
+`video-trigger-button.twig`
+
+You can then call the twig snippets with an include like this.
+
+`<section>`
+
+    {{ include("components/video-trigger-button.twig", {fields : fields, block : block, blockClassName: blockClassName}, with_context = false) }}
+
+    {{ include("components/video-component.twig", {fields : fields, block : block, blockClassName: blockClassName}, with_context = false) }}
+
+`</section>`
+
+The snippets don't need to be positioned in any special relationship to each other except that you need to put them somewhere within the container you intend to pass to the video controller.
+
+The included twig files will receive the acf fields that are being passed to the block. Although it can work fine as it is, it is advisable to pass another variable with the classname of your block which will make handling the styling a little easier. You can do this by assigning the string of the classname to the blockClassName twig variable.
+eg:
+
+`<section>`
+
+    {% set blockClassName = 'simple-video-block' %}
+
+    {{ include("components/video-trigger-button.twig", {fields : fields, block : block, blockClassName: blockClassName}, with_context = false) }}
+
+    {{ include("components/video-component.twig", {fields : fields, block : block, blockClassName: blockClassName}, with_context = false) }}
+
+`</section>`
+
+## Styling
+
+You can choose to do all the styling yourself in which case there is nothing left to import. However, there are some basic styles exported as mixins which are very easy to override and can get you to a workable result very quickly. You can import them directly from the package folder into your scss file and then include the mixin in the scope of your parent block class.
+
+`@use 'NodeModules/@pernod-ricard-global-cms/onion-videocontroller/vc-styles';`
+
+`.parent-block-class { @include vc-styles.basic(); }`
+
+There is also a mixin for adding default styling to the pop up modal which can be very handy. You can import that in a similar way, only this time it should be scoped to the html. The modal will be added and removed from the body tag, but overflow will need to added to the html in order to prevent scrolling. This is all build in to the modal styles
+
+`@use 'NodeModules/@pernod-ricard-global-cms/onion-videocontroller/vc-styles';`
+
+`html { @include vc-styles.modal(); }`
+
+## ACF Fields
+
+All the fields in the twig video-component template are intended to correspond to the fields in the generic video field group in the acf custom field groups. This video group can be injected into blocks within a tab or cloned into more nested sections of blocks.
+It is recommended to use this field group as otherwise some of the features of the controller may not work. If you can't use the acf field group for some reason you can still hard code all the variables into the html attribute slots on the video component and trigger. It won't be dynamic but it can still work.
+
+## Other useful features
+
+Because it works as a singleton you can instantiate the videocontroller anywhere in your site and access some global methods.
+Eg. Anywhere in the javascript on the page you can do,
+
+`const videoController = new videcontroller();`
+`videoController.stopAllVideos();`
+
+These methods include:
+
+- stopAllVideos(): This will stop all the videos on the page except for ones that have been assigned to autoplay.
+- getGlobalSettings(): Returns the global videcontroller settings.
+- getObjects(): Returns the collection of video containers and triggers that have been found by the controller.

package/{components/fields-core-functions-v3 → onion-videocontroller}/core-functions-v3.scss

@@ -1,4 +1,4 @@
-@use '../../breakpoints';
+@use './breakpoints';
 @use 'sass:math';
 
 @function fontSize($size-px, $screen: '') {

package/{components/fields-core-mixins-v3 → onion-videocontroller}/core-mixins-v3.scss

@@ -1,5 +1,5 @@
-@use '../../breakpoints';
-@use '../fields-core-functions-v3/core-functions-v3';
+@use './breakpoints';
+@use './core-functions-v3';
 @use 'sass:math';
 
 @mixin textStyle() {

package/onion-videocontroller/onion-videocontroller.js

@@ -0,0 +1,240 @@
+import youtubeVideo from './youtube-video.mjs';
+import uploadVideo from './upload-video.mjs';
+import vimeoVideo from './vimeo-video.mjs';
+import {revealVideoElement, stopVideos, isWpAdmin} from './vcUtils.mjs';
+
+export default class videoController {
+	constructor(parentContainer) {
+		const SRC_BREAKPOINT = 768;
+		let defaultGlobalSettings = {
+			srcBreakpoint: SRC_BREAKPOINT,
+			bodyClass: 'video-playing',
+			playingState: false,
+			playingStateClass: 'video-playing',
+			originDomain: globalThis.location?.origin,
+			enableDebugLogs: false,
+			isMobileSize: window.innerWidth < SRC_BREAKPOINT
+		};
+		if (parentContainer) {
+			this.videoContainers =
+				parentContainer.querySelectorAll('[data-videoid]');
+		}
+		this.videoReadyState = false;
+		if (videoController.instance instanceof videoController) {
+			videoController.instance.setVideoObjects(
+				this.videoReadyState,
+				this.videoContainers,
+				parentContainer
+			);
+			return videoController.instance;
+		}
+		videoController.instance = this;
+		this.globalSettings = defaultGlobalSettings;
+		this.enableDebugLogs = this.globalSettings.enableDebugLogs;
+		this.containerCollection = {};
+		this.setVideoObjects(
+			this.videoReadyState,
+			this.videoContainers,
+			this.triggers,
+			parentContainer
+		);
+	}
+	/**
+	 * Method for setting up the video container objects and adding the listeners to the triggers
+	 * @param {array} videoContainers - The video containers you want to add to the controller
+	 * @param {array} triggers - The triggers you want to add to the controller
+	 * @param {HTMLElement} parentContainer - The parent container of the video containers/triggers
+	 */
+	setVideoObjects(videoReadyState, videoContainers, parentContainer) {
+		this.enableDebugLogs && console.log('Setting video Objects');
+		if (!videoContainers) {
+			this.enableDebugLogs &&
+				console.info(`Did not look for video containers`);
+			return;
+		}
+		if (videoContainers.length === 0) {
+			this.enableDebugLogs &&
+				console.info(
+					`could not find any video containers in ${parentContainer}`
+				);
+			return;
+		}
+
+		videoContainers.forEach((container) => {
+			if (!container) {
+				return;
+			}
+			const videoObject = {
+				videocontainer: container,
+				videotype: container.dataset?.videotype,
+				videoid: container.dataset?.videoid,
+				videoReadyState: videoReadyState,
+				videoplayer: false,
+				youtubeplayer: false,
+				vimeoplayer: false,
+				parentcontainer: parentContainer,
+				modalcontainer: '',
+				dataLayerPush: container.dataset.datalayerpush,
+				modal: Number(container.dataset?.modal),
+				isAdmin: isWpAdmin(),
+				fullscreen: Number(container.dataset?.fullscreen),
+				autoplay: this.setVideoAutoplay(container),
+				controls: Number(container.dataset?.controls),
+				loop: Number(container.dataset?.loop) || 0,
+				muted: Number(container.dataset?.muted) || 0,
+				sources: {
+					desktop: container.dataset?.desktopvideo,
+					mobile: container.dataset?.mobilevideo
+				},
+				instance: this,
+				globalSettings: this.getGlobalSettings()
+			};
+
+			if (this.containerCollection[videoObject.videoid]) {
+				let suffix = 1;
+				while (this.containerCollection[videoObject.videoid]) {
+					videoObject.videoid = videoObject.videoid + '-' + suffix;
+					suffix++;
+				}
+			}
+
+			let scopeEl = container.parentElement;
+			while (scopeEl && !scopeEl.hasAttribute('parentcontainer')) {
+				scopeEl = scopeEl.parentElement;
+			}
+
+			const triggerScope = scopeEl ?? document;
+			const triggers = triggerScope.querySelectorAll(
+				`[data-triggerid='${container.dataset?.videoid}']`
+			);
+
+			videoObject.triggerScope = triggerScope;
+
+			if (triggers.length === 0) {
+				this.enableDebugLogs &&
+					console.log(
+						`could not find any triggers in ${parentContainer}`
+					);
+			}
+
+			triggers.forEach((trigger) => {
+				if (trigger?.dataset?.triggerid) {
+					trigger.dataset.triggerid = videoObject.videoid;
+					trigger.addEventListener('click', () => {
+						this.triggerVideo(
+							this.containerCollection[trigger.dataset.triggerid]
+						);
+					});
+				} else {
+					this.enableDebugLogs &&
+						console.log(
+							trigger,
+							`was missing an id so the listener could not be attached`
+						);
+				}
+			});
+			videoObject.trigger = triggers;
+			this.containerCollection[videoObject.videoid] = videoObject;
+
+			if (!videoObject.videoReadyState) {
+				if (videoObject.autoplay == 1) {
+					this.loadingSpinner(videoObject);
+				}
+				if (videoObject.videotype === 'upload') {
+					console.log('id', videoObject.videoid);
+
+					uploadVideo.uploadedVideoInit(videoObject);
+				}
+				if (videoObject.videotype === 'youtube') {
+					youtubeVideo.youtubeInit(videoObject);
+				}
+				if (videoObject.videotype === 'vimeo') {
+					vimeoVideo.vimeoInit(videoObject);
+				}
+			}
+		});
+	}
+	setVideoReadyState(videoObject, isLoaded) {
+		videoObject.videoReadyState = isLoaded;
+	}
+	setVideoAutoplay(container) {
+		if (document.body.classList.contains('wp-admin')) {
+			return 0;
+		}
+
+		return this.globalSettings.isMobileSize
+			? Number(container.dataset?.autoplayMobile) || 0
+			: Number(container.dataset?.autoplay) || 0;
+	}
+	/**
+	 * Method to return the global settings for the video controller.
+	 * @returns {Object} - the global settings object.
+	 */
+	getGlobalSettings() {
+		return this.globalSettings;
+	}
+	/**
+	 * Method to add or override the global controller settings.
+	 * @param {Object} settings - Settings object that will be merged with the controller's existing settings.
+	 */
+	setGlobalSettings(settings = {}) {
+		this.globalSettings = {...this.globalSettings, ...settings};
+	}
+	/**
+	 * Method for getting the current collection of containers and triggers.
+	 * @returns {Object} - Object container the container and triggers collections.
+	 */
+	getObjects() {
+		const data = {
+			videos: this.containerCollection,
+			triggers: this.triggers
+		};
+		return data;
+	}
+	/**
+	 * Method to determine which video to play and what type it is.
+	 * @param {Object} videoObject - The video/trigger object that is used to identify which video element is being triggered.
+	 */
+	triggerVideo(videoObject) {
+		if (!videoObject.instance) {
+			videoObject.instance = this;
+		}
+		if (!videoObject.globalSettings) {
+			videoObject.globalSettings = this.getGlobalSettings();
+		}
+		this.loadingSpinner(videoObject);
+		stopVideos(videoObject);
+		switch (videoObject.videotype) {
+			case 'upload':
+				uploadVideo.triggerUploadedVideo(videoObject);
+				break;
+			case 'youtube':
+				youtubeVideo.triggerYoutube(videoObject);
+				break;
+			case 'vimeo':
+				vimeoVideo.triggerVimeo(videoObject);
+				break;
+			default:
+				break;
+		}
+	}
+	stopAllVideos() {
+		stopVideos({videoid: '', instance: this}, true);
+	}
+	loadingSpinner(videoObject) {
+		const loadingWrapper = document.createElement('div');
+		loadingWrapper.className = 'loading-wrapper';
+		if (!videoObject.videocontainer) {
+			return;
+		}
+		videoObject.videocontainer.appendChild(loadingWrapper);
+		revealVideoElement(videoObject);
+
+		const checkVideoReadyState = setInterval(() => {
+			if (videoObject.videoReadyState === true) {
+				clearInterval(checkVideoReadyState);
+				videoObject.videocontainer.removeChild(loadingWrapper);
+			}
+		}, 100);
+	}
+}