npm - @total_onion/onion-library - Versions diffs - 3.0.49 → 3.2.0 - Mend

@total_onion/onion-library 3.0.49 → 3.2.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.

Files changed (536) hide show

package/components/webc-responsive-image/index.html DELETED Viewed

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
-		<link rel="stylesheet" href="./ptfg-9000.css" />
-		<link rel="stylesheet" href="../webc-toggle-trigger/toggle-trigger.css" />
-		<link rel="stylesheet" href="../webc-text-input-trigger/text-input-trigger.css" />
-		<link rel="stylesheet" href="../webc-loadmore-trigger/loadmore-trigger.css" />
-		<link
-			rel="stylesheet"
-			href="../webc-post-filter-module/post-filter-module.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="../webc-post-carousel-display-module/post-carousel-display-module.css"
-		/>
-		<title>PTFG</title>
-	</head>
-	<body>
-		<ptfg-9000
-			class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
-			data-assetkey="ptfg-9000"
-		>
-			<post-filter-module
-				id="filter-module"
-				data-dataobjectid=""
-				data-dev="true"
-				data-devdatalocation="local"
-				class="post-filter-module__filter"
-				data-postsperpagedesktop="8"
-				data-postsperpagemobile="6"
-				data-loadmoretriggerclass="loadmore-trigger"
-				data-textinputclass="text-input-trigger"
-			>
-				<toggle-trigger
-					id="toggle-trigger"
-					data-toggletext="Toggle Text"
-					data-toggletarget="#filter-module"
-					data-toggleclass="active"
-					class="toggle-trigger"
-				>
-			</post-filter-module>
-			<text-input-trigger id="text-input-trigger" class="text-input-trigger"></text-input-trigger>
-			<toggle-trigger id="toggle-trigger" data-toggletext="Filter" data-toggletarget="#filter-module" data-toggleclass="active" class="toggle-trigger"></toggle-trigger>
-			<post-carousel-display-module
-	id="display-module"
-	data-posts=""
-	class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
->
-			</post-carousel-display-module>
-			<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
-		</ptfg-9000>
-		<script type="module">
-			//Run Component JS
-			import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
-			blockfilterjs();
-			import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
-			toggletriggerjs();
-			import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
-			textInputTrigger();
-			import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
-			loadmoreTrigger();
-			import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
-			blockcarouseljs();
-			import blockptfgjs from "./ptfg-9000.js";
-			blockptfgjs();
-		</script>
-	</body>
-</html>
-<!--
-<script type="module">
-	// Post filter module
-	const postfiltermoduletemplate = await fetch(
-		"../webc-post-filter-module/post-filter-module.html"
-	);
-	const postfiltermodulehtml = await postfiltermoduletemplate.text();
-	document
-		.querySelector("ptfg-9000")
-		.insertAdjacentHTML("beforeend", postfiltermodulehtml);
-		// toggle trigger
-	const toggletrigger = await fetch(
-		"../webc-toggle-trigger/toggle-trigger.html"
-	);
-	const toggletriggerhtml = await toggletrigger.text();
-	document
-		.querySelector("ptfg-9000")
-		.insertAdjacentHTML("beforeend", toggletriggerhtml);
-	// post grid display
-	const postgriddisplay = await fetch(
-		"../webc-post-grid-display-module/post-grid-display-module.html"
-	);
-	const postgriddisplayhtml = await postgriddisplay.text();
-	document
-		.querySelector("ptfg-9000")
-		.insertAdjacentHTML("beforeend", postgriddisplayhtml);
-</script> -->

package/components/webc-responsive-image/layout-container.css DELETED Viewed

@@ -1,9 +0,0 @@
-layout-container {
-	display: grid;
-	grid-template:
-		'filter ..'
-		'textinput toggleclass'
-		'display display'
-		'loadmore loadmore' / 1fr 1fr;
-	background-color: black;
-}

package/components/webc-responsive-image/layout-container.js DELETED Viewed

@@ -1,22 +0,0 @@
-export default function layoutContainerJs(options = {}) {
-	try {
-		if (!customElements.get('layout-container')) {
-			customElements.define(
-				'layout-container',
-				class extends HTMLElement {
-					constructor() {
-						super();
-						this.data = this.dataset;
-					}
-					connectedCallback() {
-						console.log('Layout container element added to page.');
-						this.classList.add('loaded');
-					}
-					attributeChangedCallback(name, oldValue, newValue) {}
-				}
-			);
-		}
-	} catch (error) {
-		console.error(error);
-	}
-}

package/components/webc-responsive-image/responsive-image.html DELETED Viewed

@@ -1,15 +0,0 @@
-<responsive-image class="responsive-image-v3" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
-	<picture class="responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
-			<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="responsive-image-v3__source responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
-			<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="responsive-image-v3__source responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
-			<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="responsive-image-v3__source responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
-		<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
-	</picture>
-</responsive-image>

package/components/webc-slot-test/slot-test.html DELETED Viewed

@@ -1,25 +0,0 @@
-<my-paragraph>
-    <span slot="my-text">Let's have some different text!</span>
-    <slot name="my-text">My default text</slot>
-</my-paragraph>
-<script>
-    class MyParagraph extends HTMLElement {
-        constructor() {
-            super();
-            const shadow = this.attachShadow({ mode: 'open' });
-            shadow.innerHTML = `
-                <style>
-                    p {
-                        color: blue;
-                        font-size: 18px;
-                    }
-                </style>
-                <p><slot name="my-text">My default text</slot></p>
-            `;
-        }
-    }
-    customElements.define('my-paragraph', MyParagraph);
-</script>

package/components/webc-text-input-trigger/index.html DELETED Viewed

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
-		<link rel="stylesheet" href="./text-input-trigger.css" />
-		<title>PTFG</title>
-		<style>
-			body {
-				background-color: #e7b8b8;
-			}
-			main {
-				max-width: 600px;
-				margin-inline: auto;
-				padding: 50px;
-			}
-		</style>
-	</head>
-	<body>
-		<main class="main-container"></main>
-		<script async type="module">
-			const template = await fetch("./text-input-trigger.html");
-			const html = await template.text();
-			document.querySelector(".main-container").innerHTML = html;
-			import blockjs from "./text-input-trigger.js";
-			blockjs();
-		</script>
-	</body>
-</html>

package/components/webc-text-input-trigger/text-input-trigger.css DELETED Viewed

@@ -1,6 +0,0 @@
-text-input-trigger {
-	grid-area: textinput;
-	display: grid;
-	width: 100%;
-	place-items: center;
-}

package/components/webc-text-input-trigger/text-input-trigger.html DELETED Viewed

@@ -1,4 +0,0 @@
-<text-input-trigger id="text-input-trigger" class="text-input-trigger">
-	{#
-	<input title="text-input" class="text-input-trigger__input" type="text" /> #}
-</text-input-trigger>

package/components/webc-text-input-trigger/text-input-trigger.js DELETED Viewed

@@ -1,33 +0,0 @@
-export default function loadmoreTriggerJs(options = {}) {
-	try {
-		if (!customElements.get('text-input-trigger')) {
-			customElements.define(
-				'text-input-trigger',
-				class extends HTMLElement {
-					constructor() {
-						super();
-						this.enableLogs = this.dataset.enablelogs;
-						this.textInput = document.createElement('input');
-						this.textInput.setAttribute('type', 'text');
-						this.textInput.className = 'text-input-trigger__input';
-						this.appendChild(this.textInput);
-						this.textInput.placeholder =
-							this.dataset.placeholdertext || 'Start typing...';
-						this.textInput.addEventListener('input', (e) => {
-							this.dispatchEvent(new CustomEvent('textinput'));
-						});
-					}
-					connectedCallback() {
-						console.log('text input module added to page.');
-						this.classList.add('loaded');
-					}
-					attributeChangedCallback(name, oldValue, newValue) {
-						// console.log(`Attribute ${name} has changed.`);
-					}
-				}
-			);
-		}
-	} catch (error) {
-		console.error(error);
-	}
-}

package/components/webc-toggle-trigger/index.html DELETED Viewed

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
-		<link rel="stylesheet" href="./toggle-trigger.css" />
-		<title>PTFG</title>
-		<style>
-			body {
-				background-color: #e7b8b8;
-			}
-			main {
-				max-width: 600px;
-				margin-inline: auto;
-				padding: 50px;
-			}
-		</style>
-	</head>
-	<body>
-		<main class="main-container"></main>
-		<script async type="module">
-			const template = await fetch("./toggle-trigger.html");
-			const html = await template.text();
-			document.querySelector(".main-container").innerHTML = html;
-			import blockjs from "./toggle-trigger.js";
-			blockjs();
-		</script>
-	</body>
-</html>

package/components/webc-toggle-trigger/toggle-trigger.css DELETED Viewed

@@ -1,13 +0,0 @@
-toggle-trigger {
-	grid-area: toggleclass;
-	display: grid;
-	width: 100%;
-	place-items: center;
-	.toggle-trigger__button {
-		display: block;
-		appearance: none;
-		color: var(--theme-primary-text-colour, white);
-		border: 1px solid transparent;
-		background-color: var(--theme-primary-background-colour, black);
-	}
-}

package/components/webc-toggle-trigger/toggle-trigger.html DELETED Viewed

@@ -1,8 +0,0 @@
-<toggle-trigger
-	id="toggle-trigger"
-	data-toggletext="Toggle Text"
-	data-toggletarget="#filter-module"
-	data-toggleclass="active"
-	class="toggle-trigger"
->
-</toggle-trigger>

package/components/webc-toggle-trigger/toggle-trigger.js DELETED Viewed

@@ -1,53 +0,0 @@
-export default function toggletriggerJs(options = {}) {
-	try {
-		if (!customElements.get('toggle-trigger')) {
-			customElements.define(
-				'toggle-trigger',
-				class extends HTMLElement {
-					constructor() {
-						super();
-						this.enableLogs = this.dataset.enablelogs;
-						this.toggleButton = document.createElement('button');
-						this.toggleButton.className = 'toggle-trigger__button';
-						this.appendChild(this.toggleButton);
-						this.toggleButton.innerText = this.dataset.toggletext;
-						this.toggleClass = this.dataset.toggleclass;
-						this.toggleTarget = document.querySelector(
-							this.dataset.toggletarget
-						);
-						this.toggleButton.addEventListener('click', () => {
-							this.toggleTarget.classList.toggle(
-								this.toggleClass
-							);
-						});
-						document.body.addEventListener('click', (e) => {
-							if (
-								(this.toggleTarget.classList.contains(
-									this.toggleClass
-								) &&
-									!this.toggleTarget.contains(e.target)) ||
-								e.target.classList.contains(
-									'toggle-trigger__button'
-								)
-							) {
-								this.toggleTarget.classList.toggle(
-									this.toggleClass
-								);
-							}
-						});
-					}
-					async connectedCallback() {
-						console.log('Toggle trigger element added to page.');
-						this.classList.add('loaded');
-					}
-					attributeChangedCallback(name, oldValue, newValue) {
-						// console.log(`Attribute ${name} has changed.`);
-					}
-				}
-			);
-		}
-	} catch (error) {
-		console.error(error);
-	}
-}

package/createDynamicBlockScss-v3.js DELETED Viewed

@@ -1,25 +0,0 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const path = require('path');
-const scssModulePath = path.join('./public');
-const scssFilePath = path.join(scssModulePath, 'dynamicBlockScss-v3.scss');
-fs.mkdirSync(scssModulePath, {recursive: true});
-// Write the initial content to the target file
-fs.writeFileSync(scssFilePath, '// This file is auto-generated.\n');
-const dynamicEntryPoints = globSync(`./components/block-*/*-v3.scss`).map(
-	(path) => {
-		const assetPath = path.replace('components/', '../components/');
-		return assetPath;
-	}
-);
-const stream = fs.createWriteStream(scssFilePath, {flags: 'a'});
-dynamicEntryPoints.forEach((entry) => {
-	stream.write(`@use '${entry}';\n`);
-});
-stream.end();

package/createJsAssets-v3.js DELETED Viewed

@@ -1,35 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const {globSync} = require('glob');
-const dynamicEntryPoints = globSync(`./components/block-*/*-v{3,4}.js`).map(
-	(filePath) => {
-		const assetKey = path.basename(filePath, '.js');
-		return assetKey;
-	}
-);
-const assetArray = dynamicEntryPoints.map((entry) => {
-	return {assetKey: entry};
-});
-// Create the directory path for the target file
-const jsModulePath = path.join('./public');
-const jsAssetsFilePath = path.join(jsModulePath, 'jsAssets.mjs');
-// Create directories if they don't exist
-fs.mkdirSync(jsModulePath, {recursive: true});
-// Write the initial content to the target file
-fs.writeFileSync(jsAssetsFilePath, '// This file is auto-generated.\n');
-// Create directories if they don't exist
-const dirPath = path.dirname(jsAssetsFilePath);
-fs.mkdirSync(dirPath, {recursive: true});
-const data = `
-const dynamicAssets = ${JSON.stringify(assetArray)};
-const api = {dynamicAssets};
-export default api;
-`;
-fs.writeFileSync(jsAssetsFilePath, data);

package/createJsAssets.js DELETED Viewed

@@ -1,31 +0,0 @@
-require('dotenv').config();
-const fs = require( 'fs' );
-const path = require( 'path' );
-const { globSync } = require( 'glob' );
-const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
-const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`)
-	.map((path) => {
-		const assetKey = path
-			.replace('assets/js/blocks/', '')
-			.replace('.js', '');
-		return assetKey;
-	});
-const assetArray = dynamicEntryPoints.map((entry) => {
-	return { assetKey: entry };
-});
-const jsAssetsFilePath = path.join(themePath, 'assets/js/modules/jsAssets.js'); // Create the absolute path to the destination file
-// Create directories if they don't exist
-const dirPath = path.dirname(jsAssetsFilePath);
-fs.mkdirSync(dirPath, { recursive: true });
-const data = `// This file is auto-generated. To include assets for the lazyloader, just add your .js file to Assets/js/blocks/ and it will be included here.
-const dynamicAssets = ${JSON.stringify(assetArray)};
-const api = {
-    dynamicAssets,
-};
-export default api;`;
-fs.writeFileSync(jsAssetsFilePath, data);

package/createNewBlock.js DELETED Viewed

@@ -1,131 +0,0 @@
-require('dotenv').config();
-const fs = require('fs');
-const {globSync} = require('glob');
-const yargs = require('yargs');
-const {exec} = require('child_process');
-const acfTemplate = require('./new-block-templates/template-block-json');
-const defaultTemplates = require('./new-block-templates/template-default');
-const themePath =
-	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
-let projectName = 'Global Theme';
-const projectJson = JSON.parse(fs.readFileSync('./package.json'));
-if (projectJson) {
-	projectName = projectJson.name;
-	if (projectName.slice(0, 3) === 'the') {
-		const prefix =
-			projectName.slice(0, 3).charAt(0).toUpperCase() +
-			projectName.slice(0, 3).slice(1);
-		projectName = `${prefix} ${
-			projectName.slice(3).charAt(0).toUpperCase() +
-			projectName.slice(3).slice(1)
-		}`;
-	} else {
-		projectName = `${
-			projectName.charAt(0).toUpperCase() + projectName.slice(1)
-		}`;
-	}
-}
-const templateOptions = yargs(process.argv.slice(2)).argv._;
-let swiper = false;
-let image = false;
-let content = false;
-let vue = false;
-templateOptions.forEach((option) => {
-	switch (option) {
-		case 'swiper':
-			swiper = true;
-			break;
-		case 'image':
-			image = true;
-			break;
-		case 'content':
-			content = true;
-			break;
-		case 'vue':
-			vue = true;
-			break;
-		default:
-			break;
-	}
-});
-const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`).map(
-	(path) => {
-		const assetKey = path
-			.replace('assets/js/blocks/', '')
-			.replace('.js', '');
-		return assetKey;
-	}
-);
-const newBlockName = process.argv[2]?.toLowerCase();
-const blockType = process.argv[3];
-if (!newBlockName) {
-	return console.log('Did you forget to give the new block a name?');
-}
-if (dynamicEntryPoints.indexOf(newBlockName) !== -1) {
-	return console.log(
-		`Alas! There is already a block called ${newBlockName} :( You'll have to try something else..`
-	);
-}
-const templateData = `
-{% set blockClassName = "${newBlockName}" %}
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.id}} lazy-fade" data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-</section>`;
-let jsData;
-if (swiper) {
-	jsData = swiperTemplates.templatejs(newBlockName);
-} else if (vue) {
-	jsData = vueTemplates.templatejs(newBlockName);
-} else {
-	jsData = defaultTemplates.defaultjs(newBlockName);
-}
-fs.writeFileSync(`${themePath}/assets/js/blocks/${newBlockName}.js`, jsData);
-fs.writeFileSync(
-	`${themePath}/assets/scss/blocks/${newBlockName}.scss`,
-	defaultTemplates.defaultscss(newBlockName)
-);
-if (!fs.existsSync(`${themePath}/assets/scss/blocks/${newBlockName}`)) {
-	fs.mkdirSync(`${themePath}/assets/scss/blocks/${newBlockName}`);
-}
-fs.writeFileSync(
-	`${themePath}/views/blocks/${newBlockName}.twig`,
-	templateData
-);
-// Create block directory inside acf-blocks if it doesn't exist
-if (!fs.existsSync(`${themePath}/inc/acf-blocks/${newBlockName}`)) {
-	fs.mkdirSync(`${themePath}/inc/acf-blocks/${newBlockName}`);
-}
-fs.writeFileSync(
-	`${themePath}/inc/acf-blocks/${newBlockName}/block.json`,
-	acfTemplate(newBlockName, projectName)
-);
-console.log(
-	`👑 👑 👑 Hurrah! You made a new block called ${newBlockName} 👑 👑 👑`
-);
-console.log(`...now running yarn dev...`);
-exec('yarn dev', (error, stdout, stderr) => {
-	if (error) {
-		console.log(`error: ${error.message}`);
-		return;
-	}
-	if (stderr) {
-		console.log(`stderr: ${stderr}`);
-		return;
-	}
-	console.log(`stdout: ${stdout}`);
-});