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-post-filter-module/dev-content/kai-selfie.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/kai.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/lulu-mad.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/lulu-serious.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/martha-on-the-mat.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/max-on-the-mat.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/mephy-dreams-of-mice.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/mr-business-doing-work.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/mr-business-on-top.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/peanut-keeping-an-eye.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/pete-at-work.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/pete-bath.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/pete-dinosaur.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/pete-lawn.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/pete-snacks.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/ramses-kitten.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/ramses-school-day.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/ramses-tired.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/remy-garden-contemplation.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-field.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-luxury-2.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-luxury.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-puppy-good-dog.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-puppy-pose.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/sky-security.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/vanille-asleep.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/vanille-bass.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/vanille-party.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/vanille-puppy-eyes.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/dev-content/vanille-puppy.webp ADDED Viewed

Binary file

package/components/webc-post-filter-module/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="./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 ADDED Viewed

@@ -0,0 +1,59 @@
+post-filter-module {
+	grid-area: filter;
+	transform: translateX(-100%);
+	@starting-style {
+		transform: translateX(-100%);
+	}
+	position: fixed;
+	inset: 0;
+	background-color: black;
+	right: unset;
+	display: block;
+	width: 100vw;
+	z-index: 99;
+	max-width: 414px;
+	transition: transform ease-in-out 0.3s;
+	&.active {
+		transform: translateX(0%);
+	}
+	@media (min-width: 768px) {
+		max-width: unset;
+		width: 475px;
+	}
+	.post-filter-module__clear-filters-button {
+		border: none;
+	}
+	.post-filter-module__grouping-category-button {
+		text-transform: uppercase;
+		border: none;
+		color: var(--theme-primary-text-colour);
+		font-family: var(--secondary-font-family);
+		font-size: 24;
+		&.active {
+		}
+	}
+	.post-filter-module__filter-category-container {
+		height: 0px;
+		overflow: hidden;
+		transition: height ease-out 0.3s;
+	}
+	.post-filter-module__filter-category-button {
+		color: var(--theme-primary-text-colour);
+		font-family: var(--primary-font-family);
+		border: 1px solid transparent;
+		font-size: 14;
+	}
+	.post-filter-module__filter-category-button.active-cat {
+		color: var(--primary-gold-100);
+	}
+	.post-filter-module__clear-filters-button {
+		color: var(--theme-primary-text-colour);
+	}
+}
+post-filter-module.active {
+	transform: translateX(0%);
+}

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

@@ -0,0 +1,13 @@
+<post-filter-module
+	id="filter-module"
+	data-dataobjectid=""
+	data-dev="true"
+	data-devdatalocation="local"
+	data-clearfilterstext="Reset All"
+	data-postsperpagedesktop="8"
+	data-postsperpagemobile="6"
+	data-loadmoretriggerclass="loadmore-trigger"
+	data-textinputclass="text-input-trigger"
+	class="post-filter-module"
+>
+</post-filter-module>

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

@@ -0,0 +1,359 @@
+export default function postfiltermoduleJs(options = {}) {
+	try {
+		if (!customElements.get('post-filter-module')) {
+			customElements.define(
+				'post-filter-module',
+				class extends HTMLElement {
+					static observedAttributes = ['data-devcontent'];
+					constructor() {
+						super();
+						this.enableLogs = true;
+						this.filterState = {
+							enableLogs: false,
+							allposts: [],
+							filteredposts: [],
+							activefilters: new Set(),
+							allcategories: [],
+							groupingcategories: [],
+							filtercategories: [],
+							postsperpagedesktop: 8,
+							postsperpagemobile: 6,
+							pagenumber: 1,
+							setActiveFilters: function (newState) {
+								Object.assign(this.filterState, newState);
+								this.filterPosts.bind(this)();
+							},
+							setFilteredPosts: function (newState) {
+								Object.assign(this.filterState, newState);
+								this.dispatchEvent(
+									new CustomEvent('filteredposts-updated')
+								);
+								this.enableLogs &&
+									console.log(
+										'🚀 filter state: ',
+										this.filterState
+									);
+							}
+						};
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 8;
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 6;
+						this.loadMoreTriggers = document.querySelectorAll(
+							`.${this.dataset.loadmoretriggerclass}`
+						);
+						this.loadMoreTriggers.forEach((trigger) => {
+							trigger.addEventListener('loadmore', () => {
+								this.filterState.pagenumber =
+									this.filterState.pagenumber + 1;
+								this.filterPosts();
+							});
+						});
+						this.textSearchTriggers = document.querySelectorAll(
+							`.${this.dataset.textinputclass}`
+						);
+						this.textSearchTriggers.forEach((trigger) => {
+							trigger.addEventListener('textinput', (e) => {
+								const inputText =
+									e.target.querySelector('input')?.value;
+								console.log(
+									'🚀 ~ constructor ~ inputEl:',
+									inputText
+								);
+								this.filterPosts();
+								const searchPosts =
+									this.filterState.filteredposts.filter(
+										(post) => {
+											if (
+												post.name
+													?.toLowerCase()
+													.includes(
+														inputText.toLowerCase()
+													)
+											) {
+												return post;
+											}
+										}
+									);
+								this.filterState.setFilteredPosts.bind(this)({
+									filteredposts: searchPosts
+								});
+							});
+						});
+						const postFilterContainer =
+							document.createElement('div');
+						postFilterContainer.className =
+							'post-filter-module__filter-container';
+						this.appendChild(postFilterContainer);
+						this.postFilterContainer = this.querySelector(
+							'.post-filter-module__filter-container'
+						);
+						const postFilterCatsDisplay =
+							document.createElement('div');
+						postFilterCatsDisplay.className =
+							'post-filter-module__filter-categories-display';
+						this.postFilterContainer.appendChild(
+							postFilterCatsDisplay
+						);
+						this.filterCategoriesDisplay = this.querySelector(
+							'.post-filter-module__filter-categories-display'
+						);
+						const clearFilters = document.createElement('button');
+						clearFilters.className =
+							'post-filter-module__clear-filters-button';
+						clearFilters.innerText =
+							this.dataset.clearfilterstext || 'Clear Filters';
+						this.postFilterContainer.appendChild(clearFilters);
+						this.clearFiltersButton = this.querySelector(
+							'.post-filter-module__clear-filters-button'
+						);
+						this.clearFiltersButton.addEventListener(
+							'click',
+							this.clearFilters.bind(this)
+						);
+						this.devModeContent = this.dataset.devcontent;
+					}
+					async connectedCallback() {
+						console.log('Filter Module element added to page.');
+						let data;
+						if (
+							this.dataset.dev === 'true' ||
+							this.dataset.devcontent === 'dev-petz' ||
+							this.classList.contains('dev-pets') //Easter Egg :D
+						) {
+							await this.getDevContent();
+						} else {
+							data = globalThis[this.dataset.dataobjectid];
+							this.enableLogs &&
+								console.log('🚀 dataobject: ', data);
+							if (data) {
+								this.filterState.allposts = data[`posts`];
+								this.filterState.allcategories =
+									data[`categories`];
+							}
+						}
+						if (this.filterState.allcategories.length > 0) {
+							this.filterState.allcategories.forEach(
+								(category) => {
+									if (category.parentid != '0') {
+										this.filterState.filtercategories.push(
+											category
+										);
+									} else {
+										this.filterState.groupingcategories.push(
+											category
+										);
+									}
+								}
+							);
+						}
+						if (this.filterState.groupingcategories.length > 0) {
+							this.filterState.groupingcategories.forEach(
+								(category) => {
+									const groupCategoryContainer =
+										document.createElement('div');
+									groupCategoryContainer.className =
+										'post-filter-module__grouping-category-container';
+									groupCategoryContainer.insertAdjacentHTML(
+										'beforeend',
+										`<button class="post-filter-module__grouping-category-button" data-categoryid="${category.id}">${category.name}</button>`
+									);
+									const filterCategoryContainer =
+										document.createElement('div');
+									filterCategoryContainer.className =
+										'post-filter-module__filter-category-container';
+									const groupedFilters =
+										this.filterState.filtercategories.filter(
+											(filtercat) => {
+												return (
+													filtercat.parentid ==
+													category.id
+												);
+											}
+										);
+									groupedFilters.forEach((filter) => {
+										filterCategoryContainer.insertAdjacentHTML(
+											'beforeend',
+											`<button class="post-filter-module__filter-category-button" data-categoryid="${filter.id}">${filter.name}</button>`
+										);
+									});
+									groupCategoryContainer.appendChild(
+										filterCategoryContainer
+									);
+									this.filterCategoriesDisplay.appendChild(
+										groupCategoryContainer
+									);
+								}
+							);
+						} else {
+							this.filterState.filtercategories.forEach(
+								(category) => {
+									if (category.parentid) {
+										this.filterCategoriesDisplay.insertAdjacentHTML(
+											'beforeend',
+											`<button class="post-filter-module__filter-category-button" data-categoryid="${category.id}">${category.name}</button>`
+										);
+									}
+								}
+							);
+						}
+						this.categorybuttons = this.querySelectorAll(
+							'.post-filter-module__filter-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
+									);
+									button.classList.remove('active-cat');
+									newActiveFilters.delete(
+										Number(button.dataset.categoryid)
+									);
+									this.filterState.setActiveFilters.bind(
+										this
+									)({
+										activefilters: newActiveFilters
+									});
+								} else {
+									const newActiveFilters = new Set(
+										this.filterState.activefilters
+									);
+									button.classList.add('active-cat');
+									newActiveFilters.add(
+										Number(button.dataset.categoryid)
+									);
+									this.filterState.setActiveFilters.bind(
+										this
+									)({
+										activefilters: newActiveFilters
+									});
+								}
+							});
+						});
+						const groupingButtons = this.querySelectorAll(
+							'.post-filter-module__grouping-category-button'
+						);
+						const categoryContainers = this.querySelectorAll(
+							'.post-filter-module__filter-category-container'
+						);
+						groupingButtons.forEach((button) => {
+							button.addEventListener('click', () => {
+								const container =
+									button.parentElement.querySelector(
+										'.post-filter-module__filter-category-container'
+									);
+								if (button.classList.contains('active')) {
+									button.classList.remove('active');
+									container.classList.remove('active');
+									container.style.height = '0px';
+								} else {
+									groupingButtons.forEach((btn) => {
+										btn.classList.remove('active');
+									});
+									categoryContainers.forEach(
+										(categoryContainer) => {
+											categoryContainer.style.height =
+												'0px';
+											categoryContainer.classList.remove(
+												'active'
+											);
+										}
+									);
+									container.style.height =
+										container.scrollHeight + 'px';
+									button.classList.add('active');
+									container.classList.add('active');
+								}
+							});
+						});
+						this.filterPosts();
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {
+						console.log(`Attribute ${name} has changed.`);
+						if (newValue) {
+							this.getDevContent();
+						}
+					}
+					async getDevContent() {
+						this.enableLogs && console.log('Getting dev content..');
+						const data = await import(
+							`./dev-content/dev-content${this.dataset.devdatalocation}.js`
+						);
+						this.filterState.allposts = data[`devContentPets`];
+						this.filterState.allcategories =
+							data[`devContentCategories`];
+						this.filterPosts();
+					}
+					filterPosts(event) {
+						if (this.filterState.allposts.length == 0) {
+							return;
+						}
+						if (this.filterState.activefilters.size === 0) {
+							const numberPosts =
+								Number(this.filterState.postsperpagedesktop) *
+								Number(this.filterState.pagenumber);
+							this.filterState.setFilteredPosts.bind(this)({
+								filteredposts: this.filterState.allposts.slice(
+									0,
+									numberPosts
+								)
+							});
+							if (
+								this.filterState.filteredposts.length >=
+								this.filterState.allposts.length
+							) {
+								this.loadMoreTriggers.forEach((trigger) => {
+									trigger.classList.add('hide');
+								});
+							}
+							return;
+						}
+						const newFilteredPosts =
+							this.filterState.allposts.filter((post) => {
+								return (
+									this.filterState.activefilters.intersection(
+										new Set(post.categories)
+									).size > 0
+								);
+							});
+						this.filterState.setFilteredPosts.bind(this)({
+							filteredposts: newFilteredPosts
+						});
+					}
+					clearFilters(event) {
+						this.categorybuttons.forEach((button) => {
+							button.classList.remove('active-cat');
+						});
+						this.filterState.setActiveFilters.bind(this)({
+							activefilters: new Set()
+						});
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

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

package/components/webc-post-filter-module-no-group/post-filter-module-no-group.css ADDED Viewed

@@ -0,0 +1,59 @@
+post-filter-module-no-group {
+	grid-area: filter;
+	transform: translateX(-100%);
+	@starting-style {
+		transform: translateX(-100%);
+	}
+	position: fixed;
+	inset: 0;
+	background-color: black;
+	right: unset;
+	display: block;
+	width: 100vw;
+	z-index: 99;
+	max-width: 414px;
+	transition: transform ease-in-out 0.3s;
+	&.active {
+		transform: translateX(0%);
+	}
+	@media (min-width: 768px) {
+		max-width: unset;
+		width: 475px;
+	}
+	.post-filter-module-no-group__clear-filters-button {
+		border: none;
+	}
+	.post-filter-module-no-group__grouping-category-button {
+		text-transform: uppercase;
+		border: none;
+		color: var(--theme-primary-text-colour);
+		font-family: var(--secondary-font-family);
+		font-size: 24;
+		&.active {
+		}
+	}
+	.post-filter-module-no-group__filter-category-container {
+		height: 0px;
+		overflow: hidden;
+		transition: height ease-out 0.3s;
+	}
+	.post-filter-module-no-group__filter-category-button {
+		color: var(--theme-primary-text-colour);
+		font-family: var(--primary-font-family);
+		border: 1px solid transparent;
+		font-size: 14;
+	}
+	.post-filter-module-no-group__filter-category-button.active-cat {
+		color: var(--primary-gold-100);
+	}
+	.post-filter-module-no-group__clear-filters-button {
+		color: var(--theme-primary-text-colour);
+	}
+}
+post-filter-module-no-group.active {
+	transform: translateX(0%);
+}

package/components/webc-post-filter-module-no-group/post-filter-module-no-group.html ADDED Viewed

@@ -0,0 +1,13 @@
+<post-filter-module-no-group
+	id="filter-module"
+	data-dataobjectid=""
+	data-dev=""
+	data-devdatalocation="local"
+	data-clearfilterstext="Reset All"
+	data-postsperpagedesktop="8"
+	data-postsperpagemobile="6"
+	data-loadmoretriggerclass="loadmore-trigger"
+	data-textinputclass="text-input-trigger"
+	class="post-filter-module-no-group"
+>
+</post-filter-module-no-group>