@total_onion/onion-library 2.0.201 → 2.0.202

package/assembleAssetList.js

@@ -8,20 +8,39 @@ const dynamicEntryPointsJs = globSync(`./components/block-*/*-v3.js`).map(
 		return assetKey;
 	}
 );
+const dynamicEntryPointsJsV4 = globSync(`./components/block-*/*-v4.js`).map(
+	(filePath) => {
+		const assetKey = path.basename(filePath, '.js');
+		return assetKey;
+	}
+);
 const dynamicEntryPointsScss = globSync(`./components/block-*/*-v3.scss`).map(
 	(filePath) => {
 		const assetKey = path.basename(filePath, '.js');
 		return assetKey;
 	}
 );
+const dynamicEntryPointsCss = globSync(`./components/block-*/*-v4.css`).map(
+	(filePath) => {
+		const assetKey = path.basename(filePath, '.js');
+		return assetKey;
+	}
+);
 const assetArrayJs = dynamicEntryPointsJs.map((entry) => {
 	return `./components/block-${entry}/${entry}.js`;
 });
+const assetArrayJsV4 = dynamicEntryPointsJsV4.map((entry) => {
+	return `./components/block-${entry}/${entry}.js`;
+});
 
 const assetArrayScss = dynamicEntryPointsScss.map((entry) => {
 	let filename = entry.replace('.scss', '');
 	return `./components/block-${filename}/${filename}.scss`;
 });
+const assetArrayCss = dynamicEntryPointsCss.map((entry) => {
+	let filename = entry.replace('.css', '');
+	return `./components/block-${filename}/${filename}.css`;
+});
 
 // Create the directory path for the target file
 const jsModulePath = path.join('./public');
@@ -40,9 +59,9 @@ fs.mkdirSync(dirPath, {recursive: true});
 const data = `
 const dynamicAssets = ${JSON.stringify([
 	...assetArrayScss,
+	...assetArrayCss,
 	...assetArrayJs,
-	'./public/dynamicBlockScss-v3.scss',
-	'./public/publicBundle.scss'
+	...assetArrayJsV4
 ])};
 export default dynamicAssets;
 `;

package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss

@@ -2,96 +2,124 @@
 @use '../fields-core-functions-v3/core-functions-v3';
 @use '../../breakpoints';
 @mixin coreCssSizingVarsV3() {
-	body {
-		--screen-width: var(--screen-width-mobile);
-		--font-reference: var(--font-reference-mobile);
-		--design-reference: var(--mobile-design-reference);
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			--screen-width: var(--screen-width-portrait);
-			--font-reference: var(--font-reference-portrait);
-			--design-reference: var(--portrait-design-reference);
+	@layer base-styles {
+		body {
+			--screen-width: var(--screen-width-mobile);
+			--font-reference: var(--font-reference-mobile);
+			--design-reference: var(--mobile-design-reference);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--screen-width: var(--screen-width-portrait);
+				--font-reference: var(--font-reference-portrait);
+				--design-reference: var(--portrait-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--screen-width: var(--screen-width-landscape);
+				--font-reference: var(--font-reference-landscape);
+				--design-reference: var(--landscape-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$desktop) {
+				--screen-width: var(--screen-width-desktop);
+				--font-reference: var(--font-reference-desktop);
+				--design-reference: var(--desktop-design-reference);
+			}
+			@include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
+				--screen-width: var(--screen-width-fullhd);
+				--font-reference: var(--font-reference-fullhd);
+				--design-reference: var(--fullhd-design-reference);
+			}
 		}
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			--screen-width: var(--screen-width-landscape);
-			--font-reference: var(--font-reference-landscape);
-			--design-reference: var(--landscape-design-reference);
-		}
-		@include core-mixins-v3.device(breakpoints.$desktop) {
-			--screen-width: var(--screen-width-desktop);
-			--font-reference: var(--font-reference-desktop);
-			--design-reference: var(--desktop-design-reference);
-		}
-		@include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
-			--screen-width: var(--screen-width-fullhd);
-			--font-reference: var(--font-reference-fullhd);
-			--design-reference: var(--fullhd-design-reference);
-		}
-	}
-	body {
-		--global-inline-spacing: #{core-functions-v3.fluidSize(
-				var(--mobile-inline),
-				'mobile'
-			)};
+		body {
+			//defaults (can be overridden by cms or block code later on)
+			--mobile-inline: 20;
+			--portrait-inline: 40;
+			--landscape-inline: 40;
+			--desktop-inline: 40;
+			--screen-width-fullhd: 1920px;
+			--font-reference-fullhd: 1920px;
+			--screen-width-desktop: 1440px;
+			--font-reference-desktop: 1440px;
+			--screen-width-landscape: 100vw;
+			--font-reference-landscape: 100vw;
+			--screen-width-portrait: 100vw;
+			--font-reference-portrait: 100vw;
+			--font-reference-mobile: 375px;
+			--screen-width-mobile: 375px;
+			--screen-width-static: 1440px;
+			--fullhd-design-reference: 1920;
+			--desktop-design-reference: 1440;
+			--landscape-design-reference: 1440;
+			--portrait-design-reference: 1440;
+			--mobile-design-reference: 375;
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 			--global-inline-spacing: #{core-functions-v3.fluidSize(
-					var(--portrait-inline),
-					'portrait'
+					var(--mobile-inline)
 				)};
-		}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			--global-inline-spacing: #{core-functions-v3.fluidSize(
-					var(--landscape-inline),
-					'landscape'
-				)};
-		}
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--portrait-inline, 40)
+					)};
+			}
 
-		@include core-mixins-v3.device(breakpoints.$desktop) {
-			--global-inline-spacing: #{core-functions-v3.fluidSize(
-					var(--desktop-inline),
-					'desktop'
-				)};
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--landscape-inline, 40)
+					)};
+			}
+
+			@include core-mixins-v3.device(breakpoints.$desktop) {
+				--global-inline-spacing: #{core-functions-v3.fluidSize(
+						var(--desktop-inline, 40)
+					)};
+			}
 		}
-	}
 
-	body {
-		--heading-block-spacing: var(--heading-block-spacing-mobile);
+		body {
+			--heading-block-spacing: var(--heading-block-spacing-mobile);
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			--heading-block-spacing: var(--heading-block-spacing-portrait);
-		}
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--heading-block-spacing: var(--heading-block-spacing-portrait);
+			}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			--heading-block-spacing: var(--heading-block-spacing-desktop);
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--heading-block-spacing: var(--heading-block-spacing-desktop);
+			}
 		}
-	}
-	body {
-		--paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
+		body {
+			--paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			--paragraph-block-spacing: var(--paragraph-block-spacing-portrait);
-		}
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--paragraph-block-spacing: var(
+					--paragraph-block-spacing-portrait
+				);
+			}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			--paragraph-block-spacing: var(--paragraph-block-spacing-desktop);
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--paragraph-block-spacing: var(
+					--paragraph-block-spacing-desktop
+				);
+			}
 		}
-	}
-	body {
-		--list-item-block-spacing: var(--list-item-block-spacing-mobile);
+		body {
+			--list-item-block-spacing: var(--list-item-block-spacing-mobile);
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			--list-item-block-spacing: var(--list-item-block-spacing-portrait);
-		}
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				--list-item-block-spacing: var(
+					--list-item-block-spacing-portrait
+				);
+			}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			--list-item-block-spacing: var(--list-item-block-spacing-desktop);
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--list-item-block-spacing: var(
+					--list-item-block-spacing-desktop
+				);
+			}
+		}
+		body {
+			--global-content-max-width: #{core-functions-v3.fluidSize(
+					var(--global-content-max-width-setting),
+					'static'
+				)};
 		}
-	}
-	body {
-		--global-content-max-width: #{core-functions-v3.fluidSize(
-				var(--global-content-max-width-setting),
-				'static'
-			)};
 	}
 } // End of mixin

package/components/fields-core-root-variables-v3/core-root-variables-v3.scss

@@ -2,43 +2,45 @@
 @use '../../breakpoints';
 
 @mixin coreRootVariablesV3() {
-	body {
-		//Font weights
-		--weight-thin: 100;
-		--weight-extra-light: 200;
-		--weight-light: 300;
-		--weight-medium: 400;
-		--weight-demi-bold: 500;
-		--weight-demi-bold-plus: 600;
-		--weight-bold: 700;
-		--weight-extra-bold: 800;
-		--weight-extra-bold-plus: 900;
-		--default-text-colour-mobile: var(--theme-primary-text-colour);
-		--default-text-colour-desktop: var(--theme-primary-text-colour);
-		// When you are in the WP preview - the screen width var now now needs to match the width of the WP editor preview box.
-		.wp-toolbar & {
-			--screen-width-mobile: 360px;
-			--font-reference-mobile: 360px;
-			--screen-width: 360px;
-			--font-reference: 360px;
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				--screen-width-portrait: 768px;
-				--screen-width-landscape: 768px;
-				--screen-width-desktop: 768px;
-				--screen-width-static: 768px;
-				--screen-width: 768px;
-				--font-reference: 768px;
-			}
-			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-				--screen-width-portrait: 840px;
-				--screen-width-landscape: 840px;
-				--screen-width-desktop: 840px;
-				--screen-width-static: 840px;
-				--screen-width: 840px;
-				--font-reference-portrait: 840px;
-				--font-reference-landscape: 840px;
-				--font-reference-desktop: 840px;
-				--font-reference: 840px;
+	@layer base-styles {
+		body {
+			//Font weights
+			--weight-thin: 100;
+			--weight-extra-light: 200;
+			--weight-light: 300;
+			--weight-medium: 400;
+			--weight-demi-bold: 500;
+			--weight-demi-bold-plus: 600;
+			--weight-bold: 700;
+			--weight-extra-bold: 800;
+			--weight-extra-bold-plus: 900;
+			--default-text-colour-mobile: var(--theme-primary-text-colour);
+			--default-text-colour-desktop: var(--theme-primary-text-colour);
+			// When you are in the WP preview - the screen width var now now needs to match the width of the WP editor preview box.
+			.wp-toolbar & {
+				--screen-width-mobile: 360px;
+				--font-reference-mobile: 360px;
+				--screen-width: 360px;
+				--font-reference: 360px;
+				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+					--screen-width-portrait: 768px;
+					--screen-width-landscape: 768px;
+					--screen-width-desktop: 768px;
+					--screen-width-static: 768px;
+					--screen-width: 768px;
+					--font-reference: 768px;
+				}
+				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+					--screen-width-portrait: 840px;
+					--screen-width-landscape: 840px;
+					--screen-width-desktop: 840px;
+					--screen-width-static: 840px;
+					--screen-width: 840px;
+					--font-reference-portrait: 840px;
+					--font-reference-landscape: 840px;
+					--font-reference-desktop: 840px;
+					--font-reference: 840px;
+				}
 			}
 		}
 	}

package/components/webc-loadmore-trigger/index.html

@@ -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="./loadmore-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("./loadmore-trigger.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./loadmore-trigger.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/components/webc-loadmore-trigger/loadmore-trigger.css

@@ -0,0 +1,20 @@
+post-grid-display-module-v4 {
+	--padding-block-multiplier-mobile-top: 1;
+	--padding-inline-multiplier-mobile-right: 1;
+	--padding-block-multiplier-mobile-bottom: 1;
+	--padding-inline-multiplier-mobile-left: 1;
+
+	display: grid;
+	background-color: hotpink;
+	.post-grid-display-module-v4__grid-container {
+		place-self: stretch;
+		display: grid;
+		padding: 10px;
+		gap: 10px;
+		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+	}
+	.post-grid-display-module-v4__post-image {
+		width: 100%;
+		height: auto;
+	}
+}

package/components/webc-loadmore-trigger/loadmore-trigger.html

@@ -0,0 +1,3 @@
+<loadmore-trigger id="loadmore-trigger" data-posts="" class="loadmore-trigger">
+	<button class="loadmore-trigger">Load More</button>
+</loadmore-trigger>

package/components/webc-loadmore-trigger/loadmore-trigger.js

@@ -0,0 +1,23 @@
+export default function loadmoreTriggerJs(options = {}) {
+	try {
+		customElements.define(
+			'loadmore-trigger',
+			class extends HTMLElement {
+				// static observedAttributes = ['data-posts'];
+				constructor() {
+					super();
+				}
+				connectedCallback() {
+					console.log('Display 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-post-filter-module/dev-content/dev-content.js

@@ -0,0 +1,38 @@
+export const devContentDogz = [
+	{
+		postname: 'Dogz-1',
+		'post-link': '#',
+		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
+		categories: new Set([1, 5])
+	},
+	{
+		postname: 'Dogz-2',
+		'post-link': '#',
+		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
+
+		categories: new Set([2])
+	},
+	{
+		postname: 'Dogz-3',
+		'post-link': '#',
+		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
+
+		categories: new Set([1, 3])
+	},
+	{
+		postname: 'Dogz-4',
+		'post-link': '#',
+		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
+
+		categories: new Set([4])
+	}
+];
+
+export const devContentCategories = [
+	{name: 'grumpy', id: '1', parentid: '6'},
+	{name: 'fluffy', id: '2', parentid: '6'},
+	{name: 'happy', id: '3', parentid: '6'},
+	{name: 'sleepy', id: '4', parentid: '6'},
+	{name: 'sweet', id: '5', parentid: '6'},
+	{name: 'hounds', id: '6', parentid: null}
+];

package/components/webc-post-filter-module/index.html

@@ -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="./post-filter-module.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("./post-filter-module.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./post-filter-module.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/components/webc-post-filter-module/post-filter-module.css

@@ -0,0 +1,4 @@
+post-filter-module {
+	display: block;
+	background-color: aquamarine;
+}

package/components/webc-post-filter-module/post-filter-module.html

@@ -0,0 +1,11 @@
+<post-filter-module
+	id="filter-module"
+	data-dev="true"
+	data-devcontent="Dogz"
+	data-enableclear="true"
+	class="post-filter-module__filter"
+>
+	<div class="post-filter-module__filter-container">
+		<div class="post-filter-module__filter-categories-display"></div>
+	</div>
+</post-filter-module>

package/components/webc-post-filter-module/post-filter-module.js

@@ -0,0 +1,147 @@
+export default function postfiltermoduleJs(options = {}) {
+	try {
+		customElements.define(
+			'post-filter-module',
+			class extends HTMLElement {
+				constructor() {
+					super();
+					this.enableLogs = this.dataset.enablelogs;
+					this.filterState = {
+						allposts: new Set(),
+						filteredposts: new Set(),
+						activefilters: new Set(),
+						setActiveFilters: function (newState) {
+							Object.assign(this.filterState, newState);
+							this.dispatchEvent(
+								new CustomEvent('activefilters-updated')
+							);
+						},
+						setFilteredPosts: function (newState) {
+							Object.assign(this.filterState, newState);
+							this.dispatchEvent(
+								new CustomEvent('filteredposts-updated')
+							);
+						}
+					};
+					this.filterCategoriesDisplay = this.querySelector(
+						'.post-filter-module__filter-categories-display'
+					);
+
+					if (this.dataset.enableclear) {
+						this.filterCategoriesDisplay.insertAdjacentHTML(
+							'beforeend',
+							`<button class="post-filter-module__clear-filters-button">Clear Filters</button>`
+						);
+						this.clearFiltersButton = this.querySelector(
+							'.post-filter-module__clear-filters-button'
+						);
+						this.clearFiltersButton.addEventListener(
+							'click',
+							this.clearFilters.bind(this)
+						);
+					}
+					this.setStateButton = this.querySelector(
+						'.post-filter-module__set-state-button'
+					);
+
+					this.addEventListener(
+						'activefilters-updated',
+						this.filterPosts.bind(this)
+					);
+					this.devMode = this.dataset.dev;
+					this.devModeContent = this.dataset.devcontent;
+				}
+				async connectedCallback() {
+					console.log('Filter Module element added to page.');
+					let data;
+					if (this.devMode) {
+						data = await import('./dev-content/dev-content.js');
+					}
+					this.filterState.allposts =
+						data[`devContent${this.devModeContent}`];
+					this.filterState.categories = data[`devContentCategories`];
+					this.filterState.categories.forEach((category) => {
+						if (category.parentid) {
+							this.filterCategoriesDisplay.insertAdjacentHTML(
+								'beforeend',
+								`<button class="post-filter-module__category-button" data-categoryid="${category.id}">${category.name}</button>`
+							);
+						}
+					});
+
+					this.categorybuttons = this.querySelectorAll(
+						'.post-filter-module__category-button'
+					);
+
+					this.categorybuttons.forEach((button) => {
+						button.addEventListener('click', () => {
+							if (
+								this.filterState.activefilters.has(
+									Number(button.dataset.categoryid)
+								)
+							) {
+								const newActiveFilters = new Set(
+									this.filterState.activefilters
+								);
+								newActiveFilters.delete(
+									Number(button.dataset.categoryid)
+								);
+								this.filterState.setActiveFilters.bind(this)({
+									activefilters: newActiveFilters
+								});
+							} else {
+								const newActiveFilters = new Set(
+									this.filterState.activefilters
+								);
+								newActiveFilters.add(
+									Number(button.dataset.categoryid)
+								);
+								this.filterState.setActiveFilters.bind(this)({
+									activefilters: newActiveFilters
+								});
+							}
+						});
+					});
+					this.filterState.setFilteredPosts.bind(this)({
+						filteredposts: this.filterState.allposts
+					});
+
+					this.classList.add('loaded');
+				}
+
+				attributeChangedCallback(name, oldValue, newValue) {
+					// console.log(`Attribute ${name} has changed.`);
+				}
+				filterPosts(event) {
+					if (this.filterState.activefilters.size === 0) {
+						this.filterState.setFilteredPosts.bind(this)({
+							filteredposts: this.filterState.allposts
+						});
+						return;
+					}
+
+					const newFilteredPosts = this.filterState.allposts.filter(
+						(post) => {
+							return (
+								this.filterState.activefilters.intersection(
+									post.categories
+								).size > 0
+							);
+						}
+					);
+
+					this.filterState.setFilteredPosts.bind(this)({
+						filteredposts: newFilteredPosts
+					});
+				}
+				clearFilters(event) {
+					this.filterState.setActiveFilters.bind(this)({
+						activefilters: new Set()
+					});
+				}
+			}
+		);
+	} catch (error) {
+		console.error(error);
+	}
+}