@total_onion/onion-library 1.1.7 → 1.1.8

package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.js

@@ -1,7 +1,9 @@
-// import wppreview from '@pernod-ricard-global-cms/wordpresspreview';
-import colourPalettes from '@pernod-ricard-global-cms/cblcolourpalettes';
-// import ctaStyles from 'Assets/js/modules/library-modules/core-editor-cta-style-select/core-editor-cta-style-select.js';
-// import themeNames from 'Assets/js/modules/library-modules/core-editor-theme-select/core-editor-theme-select.js';
+/* eslint-disable no-restricted-syntax */
+import lazyloader from '@total_onion/onion-loader/onion-loader';
+import(
+	'../fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss'
+);
+
 import jQuery from 'jquery';
 const $ = jQuery;
 
@@ -40,21 +42,11 @@ $(document).ready(function ($) {
 		// return;
 	}
 
-	const ctaSelectNames = [
-		'cta_style',
-		'load_more_button_style',
-		'category_button_style',
-		'active_category_button_style',
-		'top_level_category_button_style',
-		'show_all_button_style',
-		'toggle_filter_button_style'
-	];
 	const themeSelectNames = ['page_theme'];
 	const colourData = globalThis.colourconfig;
-	colourPalettes(colourData);
-	// ctaStyles(ctaSelectNames);
-	// themeNames(themeSelectNames);
-	wppreview({lazyloaderFilepath: 'js/blocks/'});
+	colourSetup(colourData);
+	coreEditorThemeSelect(themeSelectNames);
+	wordpressPreviewJs({lazyloaderFilepath: 'js/blocks/'});
 
 	document.documentElement.insertAdjacentHTML('afterbegin', previewvars[0]);
 	document.documentElement.insertAdjacentHTML(
@@ -118,3 +110,165 @@ $(document).ready(function ($) {
 		});
 	}, 2000);
 });
+
+function wordpressPreviewJs(
+	options = {lazyloaderFilepath: '', enableLazyloading: true}
+) {
+	function launchLazyloader(elements) {
+		lazyloader.options.assetArray = [];
+		elements.forEach((el) => {
+			lazyloader.options.assetArray.push({
+				assetKey: el.dataset.assetkey ?? ''
+			});
+		});
+		lazyloader.options.ignoreCss = true; // the css for the preview is all in the preview.scss file
+		lazyloader.options.lazy = options.enableLazyloading;
+		if (options.lazyloaderFilepath) {
+			lazyloader.options.filePath = options.lazyloaderFilepath;
+		}
+		lazyloader.options.debugLogMessages = false;
+		lazyloader.lazyloaderInit();
+	}
+
+	function observeContainer(element) {
+		const targetNode = element;
+		const config = {
+			childList: true,
+			subtree: true
+		};
+		let notLoaded = targetNode.querySelectorAll('section:not(.loaded)');
+		launchLazyloader(notLoaded);
+
+		const observer = new MutationObserver(() => {
+			notLoaded = targetNode.querySelectorAll('section:not(.loaded)');
+			if (notLoaded && notLoaded.length > 0) {
+				launchLazyloader(notLoaded);
+			}
+		});
+		observer.observe(targetNode, config);
+	}
+
+	function waitForContainer() {
+		const containerCheck = setInterval(() => {
+			const container = document.querySelector(
+				'.block-editor-block-list__layout.is-root-container'
+			);
+			if (container) {
+				observeContainer(container);
+				clearInterval(containerCheck);
+			}
+		}, 300);
+	}
+	waitForContainer();
+}
+
+function coreEditorThemeSelect(selectNames) {
+	if (typeof acf != 'undefined') {
+		acf.addAction(
+			'select2_init',
+			function ($select, args, settings, field) {
+				if (selectNames.find((name) => name === field.data.name)) {
+					const selected = $select.find(':selected').val()
+						? $select.find(':selected').val().replace('__', '')
+						: null;
+					$select.val(selected);
+				}
+			}
+		);
+	}
+}
+
+function colourSetup(colourData) {
+	try {
+		let paletteSelect = getPaletteSelect(['page_theme']);
+		let colourPalette = getColourPalette(paletteSelect, colourData);
+		if (!colourPalette) return;
+		let acfPaletteFields = [];
+
+		if (typeof acf != 'undefined') {
+			import('./colour-picker-styles.scss');
+			// This runs only once when the colour pickers initialize
+			acf.add_filter('color_picker_args', function (args, field) {
+				acfPaletteFields.push(field);
+				args.palettes = colourPalette.colours;
+				return args;
+			});
+		}
+
+		// Listener for when you change palette in the admin
+		if (paletteSelect) {
+			jQuery(paletteSelect).on('select2:select', function (event) {
+				let colourPalette = getColourPalette(paletteSelect, colourData);
+				updatePickerInputs(colourPalette, acfPaletteFields);
+			});
+		}
+	} catch (error) {
+		console.log(error);
+	}
+
+	/**
+	 * getPaletteSelect
+	 *
+	 * @param {array} selectFieldNames An array containing the names of the acf pickers
+	 * @returns {HTMLElement} The current picker to listen for changes
+	 */
+	function getPaletteSelect(selectFieldNames) {
+		let selectElement;
+		selectFieldNames.forEach((name) => {
+			document.querySelector(`[data-name=${name}] select`)
+				? (selectElement = document.querySelector(
+						`[data-name=${name}] select`
+				  ))
+				: false;
+		});
+		return selectElement;
+	}
+
+	/**
+	 * getColourPalette
+	 *
+	 * @param {HTMLElement} select
+	 * @param {object} paletteData
+	 * @returns {array} An array of colours as hex strings.
+	 */
+	function getColourPalette(select, paletteData) {
+		let coloursArray = [];
+		const defaultTheme = paletteData['default-theme'];
+		if (
+			select &&
+			select.value &&
+			Number(paletteData['enable-custom-theme'] > 0)
+		) {
+			document.querySelector(
+				'html'
+			).dataset.currentcolourpalette = `theme-${select.value.replace(
+				'__',
+				''
+			)}`;
+			coloursArray =
+				paletteData[`theme-${select.value.replace('__', '')}`];
+		} else {
+			coloursArray = paletteData[`theme-${defaultTheme}`];
+			document.querySelector(
+				'html'
+			).dataset.currentcolourpalette = `theme-${defaultTheme}`;
+		}
+
+		return coloursArray;
+	}
+
+	/**
+	 * updatePickerInputs
+	 *
+	 * @param {array} colourData The current colour palette to apply to the acf pickers.
+	 * @param {array} fields The acf picker elements to apply the palettes to.
+	 */
+	function updatePickerInputs(colourData = [], fields = []) {
+		fields.forEach((field) => {
+			jQuery(field).find('input.wp-color-picker').iris({
+				palettes: colourData.colours
+			});
+			jQuery(field).find('input.wp-picker-clear').trigger('click');
+		});
+	}
+}

package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss

@@ -29,6 +29,24 @@ html :where([style*='border-width'][data-assetkey]) {
 	border-style: initial;
 }
 
+.iris-square {
+  display: none;
+}
+.iris-slider {
+  display: none;
+}
+.iris-picker {
+  max-height: 15px;
+  transform: translate(0px, -210%);
+}
+
+.block-editor-block-list__block {
+  background-color: var(--palette-default-1);
+  .edit-post-visual-editor__post-title-wrapper & {
+    background-color: transparent;
+  }
+}
+
 .acf-block-component.acf-block-body .acf-block-preview {
 	.swiper {
 		&::before {

package/package.json

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