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

@total_onion/onion-library 3.2.0 → 3.2.2

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 (527) hide show

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

@@ -0,0 +1,108 @@
+<!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 ADDED Viewed

@@ -0,0 +1,9 @@
+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 ADDED Viewed

@@ -0,0 +1,22 @@
+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 ADDED Viewed

@@ -0,0 +1,15 @@
+<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 ADDED Viewed

@@ -0,0 +1,25 @@
+<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 ADDED Viewed

@@ -0,0 +1,30 @@
+<!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 ADDED Viewed

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

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

@@ -0,0 +1,4 @@
+<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 ADDED Viewed

@@ -0,0 +1,33 @@
+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 ADDED Viewed

@@ -0,0 +1,30 @@
+<!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 ADDED Viewed

@@ -0,0 +1,13 @@
+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 ADDED Viewed

@@ -0,0 +1,8 @@
+<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 ADDED Viewed

@@ -0,0 +1,53 @@
+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 ADDED Viewed

@@ -0,0 +1,25 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import path from 'node: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 ADDED Viewed

@@ -0,0 +1,35 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from '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 ADDED Viewed

@@ -0,0 +1,31 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from '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 ADDED Viewed

@@ -0,0 +1,131 @@
+import 'dotenv/config';
+import fs from 'node:fs';
+import {globSync} from 'glob';
+import yargs from 'yargs/yargs';
+import {exec} from 'node:child_process';
+import acfTemplate from './new-block-templates/template-block-json.js';
+import defaultTemplates from './new-block-templates/template-default.js';
+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) {
+	console.log('Did you forget to give the new block a name?');
+	process.exit(1);
+}
+if (dynamicEntryPoints.indexOf(newBlockName) !== -1) {
+	console.log(
+		`Alas! There is already a block called ${newBlockName} :( You'll have to try something else..`
+	);
+	process.exit(1);
+}
+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 || vue || image || content) {
+	jsData = defaultTemplates.defaultjs(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}`);
+});