@total_onion/onion-library 3.0.49 → 3.2.0

package/components/fields-core-typography-v3/core-typography-v3.scss

@@ -1,457 +0,0 @@
-@use '../fields-core-mixins-v3/core-mixins-v3';
-@use '../fields-core-typography-mixins-v3/core-typography-mixins-v3';
-@use '../fields-core-functions-v3/core-functions-v3';
-@use '../../breakpoints';
-@use 'sass:math';
-
-@mixin coreTypographyV3() {
-	.font-primary {
-		@include core-typography-mixins-v3.fontPrimary();
-	}
-	.font-secondary {
-		@include core-typography-mixins-v3.fontSecondary();
-	}
-	.font-tertiary {
-		@include core-typography-mixins-v3.fontTertiary();
-	}
-	.font-quaternary {
-		@include core-typography-mixins-v3.fontQuaternary();
-	}
-	.h1-l-sizing,
-	.h-xl-sizing {
-		@include core-typography-mixins-v3.h-xl();
-	}
-	.cmpl-text-editor-settings {
-		.h-xl-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-xl-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-xl-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-xl-size();
-				}
-			}
-		}
-	}
-	.h1-sizing,
-	.h-l-sizing {
-		@include core-typography-mixins-v3.h-l();
-	}
-	.cmpl-text-editor-settings {
-		.h-l-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-l-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-l-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-l-size();
-				}
-			}
-		}
-	}
-	.h2-sizing,
-	.h-m-sizing {
-		@include core-typography-mixins-v3.h-m();
-	}
-	.cmpl-text-editor-settings {
-		.h-m-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-m-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-m-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-m-size();
-				}
-			}
-		}
-	}
-	.h3-sizing,
-	.h-s-sizing {
-		@include core-typography-mixins-v3.h-s();
-	}
-	.cmpl-text-editor-settings {
-		.h-s-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-s-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-s-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-s-size();
-				}
-			}
-		}
-	}
-	.h4-sizing,
-	.h-xs-sizing {
-		@include core-typography-mixins-v3.h-xs();
-	}
-	.cmpl-text-editor-settings {
-		.h-xs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-xs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-xs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-xs-size();
-				}
-			}
-		}
-	}
-	.h5-sizing,
-	.h-xxs-sizing {
-		@include core-typography-mixins-v3.h-xxs();
-	}
-	.cmpl-text-editor-settings {
-		.h-xxs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-xxs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-xxs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-xxs-size();
-				}
-			}
-		}
-	}
-	.h6-sizing,
-	.h-xxxs-sizing {
-		@include core-typography-mixins-v3.h-xxxs();
-	}
-	.cmpl-text-editor-settings {
-		.h-xxxs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.h-xxxs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.h-xxxs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.h-xxxs-size();
-				}
-			}
-		}
-	}
-	.sh-xxxl-sizing {
-		@include core-typography-mixins-v3.sh-xxxl();
-	}
-	.sh-xxl-sizing {
-		@include core-typography-mixins-v3.sh-xxl();
-	}
-	.sh1-sizing,
-	.sh-xl-sizing {
-		@include core-typography-mixins-v3.sh-xl();
-	}
-	.cmpl-text-editor-settings {
-		.sh-xl-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-xl-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-xl-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-xl-size();
-				}
-			}
-		}
-	}
-	.sh2-sizing,
-	.sh-l-sizing {
-		@include core-typography-mixins-v3.sh-l();
-	}
-	.cmpl-text-editor-settings {
-		.sh-l-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-l-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-l-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-l-size();
-				}
-			}
-		}
-	}
-	.sh3-sizing,
-	.sh-m-sizing {
-		@include core-typography-mixins-v3.sh-m();
-	}
-	.cmpl-text-editor-settings {
-		.sh-m-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-m-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-m-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-m-size();
-				}
-			}
-		}
-	}
-	.sh4-sizing,
-	.sh-s-sizing {
-		@include core-typography-mixins-v3.sh-s();
-	}
-	.cmpl-text-editor-settings {
-		.sh-s-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-s-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-s-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-s-size();
-				}
-			}
-		}
-	}
-	.sh5-sizing,
-	.sh-xs-sizing {
-		@include core-typography-mixins-v3.sh-xs();
-	}
-	.cmpl-text-editor-settings {
-		.sh-xs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-xs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-xs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-xs-size();
-				}
-			}
-		}
-	}
-	.sh6-sizing,
-	.sh-xxs-sizing {
-		@include core-typography-mixins-v3.sh-xxs();
-	}
-	.cmpl-text-editor-settings {
-		.sh-xxs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-xxs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-xxs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.sh-xxs-size();
-				}
-			}
-		}
-	}
-	.p-l-sizing {
-		@include core-typography-mixins-v3.p-l();
-	}
-	.cmpl-text-editor-settings {
-		.p-l-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-l-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-l-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-l-size();
-				}
-			}
-		}
-	}
-	.p-sizing {
-		@include core-typography-mixins-v3.p();
-	}
-	.cmpl-text-editor-settings {
-		.p-m-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-size();
-				}
-			}
-		}
-	}
-	.p-s-sizing {
-		@include core-typography-mixins-v3.p-s();
-	}
-	.cmpl-text-editor-settings {
-		.p-s-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-s-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-s-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-s-size();
-				}
-			}
-		}
-	}
-	.p-xs-sizing {
-		@include core-typography-mixins-v3.p-xs();
-	}
-	.cmpl-text-editor-settings {
-		.p-xs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-xs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-xs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-xs-size();
-				}
-			}
-		}
-	}
-	.p-xxs-sizing {
-		@include core-typography-mixins-v3.p-xxs();
-	}
-	.cmpl-text-editor-settings {
-		.p-xxs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-xxs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-xxs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-xxs-size();
-				}
-			}
-		}
-	}
-	.p-xxxs-sizing {
-		@include core-typography-mixins-v3.p-xxxs();
-	}
-	.cmpl-text-editor-settings {
-		.p-xxs-fs {
-			&-mobile {
-				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.p-xxxs-size();
-				}
-			}
-			&-portrait {
-				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.p-xxxs-size();
-				}
-			}
-			&-desktop {
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					@include core-typography-mixins-v3.p-xxxs-size();
-				}
-			}
-		}
-	}
-}

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

@@ -1,270 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import lazyloader from '@total_onion/onion-loader/onion-loader';
-
-import jQuery from 'jquery';
-const $ = jQuery;
-
-function setPageBgColour(colourType) {
-	if (colourType !== 'custom') {
-		document
-			.querySelector('body')
-			.style.setProperty('--page-background-colour', colourType);
-	} else {
-		requestAnimationFrame(() => {
-			const customColour = $(`[data-name=page_background_colour]`).find(
-				'input[type=hidden]'
-			)[0]?.value;
-			document
-				.querySelector('body')
-				.style.setProperty('--page-background-colour', customColour);
-		});
-	}
-}
-$(document).ready(function ($) {
-	let colourTypeSelect = $(`[data-name=page_background_colour_type] select`);
-
-	if (colourTypeSelect.length !== 0) {
-		let colourType = colourTypeSelect
-			.find(':selected')[0]
-			.value.replace('__', '');
-
-		colourTypeSelect.on('select2:select', function (event) {
-			colourType = colourTypeSelect
-				.find(':selected')[0]
-				.value.replace('__', '');
-			setPageBgColour(colourType);
-		});
-
-		setPageBgColour(colourType);
-		// return;
-	}
-
-	// const themeSelectNames = ['page_theme'];
-	const colourData = globalThis.colourconfig;
-	colourSetup(colourData);
-	// coreEditorThemeSelect(themeSelectNames);
-	wordpressPreviewJs({lazyloaderFilepath: 'js/blocks/'});
-
-	document.documentElement.insertAdjacentHTML('afterbegin', previewvars[0]);
-	document.documentElement.insertAdjacentHTML(
-		'afterbegin',
-		coretypography[0]
-	);
-	document.documentElement.insertAdjacentHTML(
-		'afterbegin',
-		corefontmodifiers[0]
-	);
-	document.documentElement.insertAdjacentHTML('afterbegin', corethemes[0]);
-	document.documentElement.insertAdjacentHTML('afterbegin', corecta[0]);
-
-	// setTimeout(() => {
-	// 	const previewToggle = document.querySelector(
-	// 		'.editor-preview-dropdown__toggle'
-	// 	);
-	// 	previewToggle.addEventListener('click', () => {
-	// 		setTimeout(() => {
-	// 			const resizeButtons = document.querySelectorAll(
-	// 				'.components-menu-item__button'
-	// 			);
-	// 			resizeButtons.forEach((button) => {
-	// 				button.addEventListener('click', () => {
-	// 					setTimeout(() => {
-	// 						let frame = document.querySelector(
-	// 							'.edit-post-visual-editor iframe'
-	// 						);
-	// 						frame.contentWindow.document.documentElement.insertAdjacentHTML(
-	// 							'afterbegin',
-	// 							coretypography[0]
-	// 						);
-	// 						frame.contentWindow.document.documentElement.insertAdjacentHTML(
-	// 							'afterbegin',
-	// 							previewvars[0]
-	// 						);
-	// 						frame.contentWindow.document.documentElement.insertAdjacentHTML(
-	// 							'afterbegin',
-	// 							corefontmodifiers[0]
-	// 						);
-	// 						frame.contentWindow.document.documentElement.insertAdjacentHTML(
-	// 							'afterbegin',
-	// 							corecta[0]
-	// 						);
-	// 						frame.contentWindow.document.documentElement.insertAdjacentHTML(
-	// 							'afterbegin',
-	// 							corethemes[0]
-	// 						);
-	// 						let currentTheme =
-	// 							document.documentElement.getAttribute(
-	// 								'data-currentcolourpalette'
-	// 							);
-	// 						frame.contentWindow.document.documentElement.setAttribute(
-	// 							'data-currentcolourpalette',
-	// 							currentTheme
-	// 						);
-	// 					}, 1000);
-	// 				});
-	// 			});
-	// 		}, 1000);
-	// 	});
-	// }, 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') {
-			// 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');
-		});
-	}
-}