@total_onion/onion-library 2.0.215 → 2.0.217

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

@@ -1,224 +1,246 @@
 export default function postfiltermoduleJs(options = {}) {
 	try {
-		customElements.define(
-			'post-filter-module',
-			class extends HTMLElement {
-				constructor() {
-					super();
-					this.enableLogs = this.dataset.enablelogs;
-					this.filterState = {
-						allposts: [],
-						filteredposts: [],
-						activefilters: new Set(),
-						allcategories: [],
-						groupingcategories: [],
-						filtercategories: [],
-						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
+		if (!customElements.get('post-filter-module')) {
+			customElements.define(
+				'post-filter-module',
+				class extends HTMLElement {
+					constructor() {
+						super();
+						this.enableLogs = this.dataset.enablelogs;
+						this.filterState = {
+							allposts: [],
+							filteredposts: [],
+							activefilters: new Set(),
+							allcategories: [],
+							groupingcategories: [],
+							filtercategories: [],
+							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')
 								);
-						}
-					};
-
-					const postFilterContainer = document.createElement('div');
-					postFilterContainer.className =
-						'post-filter-module__filter-container';
-					this.appendChild(postFilterContainer);
-					this.postFilterContainer = this.querySelector(
-						'.post-filter-module__filter-container'
-					);
+								this.enableLogs &&
+									console.log(
+										'🚀 filter state: ',
+										this.filterState
+									);
+							}
+						};
 
-					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 postFilterContainer =
+							document.createElement('div');
+						postFilterContainer.className =
+							'post-filter-module__filter-container';
+						this.appendChild(postFilterContainer);
+						this.postFilterContainer = this.querySelector(
+							'.post-filter-module__filter-container'
+						);
 
-					const clearFilters = document.createElement('button');
-					clearFilters.className =
-						'post-filter-module__clear-filters-button';
-					clearFilters.innerText = 'Clear Filters';
-					this.postFilterContainer.appendChild(clearFilters);
-					this.clearFiltersButton = this.querySelector(
-						'.post-filter-module__clear-filters-button'
-					);
-					this.clearFiltersButton.addEventListener(
-						'click',
-						this.clearFilters.bind(this)
-					);
+						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'
+						);
 
-					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 == 'true') {
-						data = await import('./dev-content/dev-content.js');
-						this.filterState.allposts =
-							data[`devContent${this.devModeContent}`];
+						const clearFilters = document.createElement('button');
+						clearFilters.className =
+							'post-filter-module__clear-filters-button';
+						clearFilters.innerText = '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.filterState.allcategories =
-							data[`devContentCategories`];
-					} else {
-						data = globalThis[this.dataset.dataobjectid];
-						this.enableLogs && console.log('🚀 dataobject: ', data);
-						this.filterState.allposts = data[`posts`];
-						this.filterState.allcategories = data[`categories`];
+						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 == 'true' ||
+							this.classList.contains('dev-petz') //Easter Egg :D
+						) {
+							const devdatalocation =
+								this.dataset.devdatalocation;
+							console.log(
+								'🚀 ~ connectedCallback ~ devdatalocation:',
+								devdatalocation
+							);
+							data = await import(
+								`./dev-content/dev-content${devdatalocation}.js`
+							);
+							this.filterState.allposts = data[`devContentPets`];
 
-					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(
+							this.filterState.allcategories =
+								data[`devContentCategories`];
+						} else {
+							data = globalThis[this.dataset.dataobjectid];
+							this.enableLogs &&
+								console.log('🚀 dataobject: ', 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__filter-category-button" data-categoryid="${filter.id}">${filter.name}</button>`
+										`<button class="post-filter-module__grouping-category-button" data-categoryid="${category.id}">${category.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>`
+									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 = 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
-								});
-							}
+						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
+									});
+								}
+							});
 						});
-					});
-					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;
+						this.classList.add('loaded');
 					}
 
-					const newFilteredPosts = this.filterState.allposts.filter(
-						(post) => {
-							return (
-								this.filterState.activefilters.intersection(
-									new Set(post.categories)
-								).size > 0
-							);
+					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;
 						}
-					);
 
-					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()
-					});
+						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-grid-display-module/post-grid-display-module.js

@@ -1,45 +1,47 @@
 export default function postFilterDisplayJS(options = {}) {
 	try {
-		customElements.define(
-			'post-grid-display-module',
-			class extends HTMLElement {
-				static observedAttributes = ['data-posts'];
-				constructor() {
-					super();
-					const gridContainer = document.createElement('div');
-					gridContainer.className =
-						'post-grid-display-module__grid-container';
-					this.appendChild(gridContainer);
-					this.gridContainer = this.querySelector(
-						'.post-grid-display-module__grid-container'
-					);
-				}
-				connectedCallback() {
-					console.log('Display module added to page.');
-					this.classList.add('loaded');
-				}
+		if (!customElements.get('post-grid-display-module')) {
+			customElements.define(
+				'post-grid-display-module',
+				class extends HTMLElement {
+					static observedAttributes = ['data-posts'];
+					constructor() {
+						super();
+						const gridContainer = document.createElement('div');
+						gridContainer.className =
+							'post-grid-display-module__grid-container';
+						this.appendChild(gridContainer);
+						this.gridContainer = this.querySelector(
+							'.post-grid-display-module__grid-container'
+						);
+					}
+					connectedCallback() {
+						console.log('Display module added to page.');
+						this.classList.add('loaded');
+					}
 
-				attributeChangedCallback(name, oldValue, newValue) {
-					// console.log(`Attribute ${name} has changed.`);
-					this.gridContainer.innerHTML = '';
-					if (newValue) {
-						const posts = JSON.parse(newValue);
+					attributeChangedCallback(name, oldValue, newValue) {
+						// console.log(`Attribute ${name} has changed.`);
+						this.gridContainer.innerHTML = '';
+						if (newValue) {
+							const posts = JSON.parse(newValue);
 
-						posts.forEach((post) => {
-							const postContent = `
+							posts.forEach((post) => {
+								const postContent = `
 							<div class="post-grid-display-module__post-container">
 							<h2 class="post-grid-display-module__post-title">${post.name}</h2>
 							<img loading="lazy" class="post-grid-display-module__post-image" src="${post.images?.post_image_src}" alt="${post.name}"></div>
 							`;
-							this.gridContainer.insertAdjacentHTML(
-								'beforeend',
-								postContent
-							);
-						});
+								this.gridContainer.insertAdjacentHTML(
+									'beforeend',
+									postContent
+								);
+							});
+						}
 					}
 				}
-			}
-		);
+			);
+		}
 	} catch (error) {
 		console.error(error);
 	}

package/components/webc-ptfg-9000/index.html

@@ -5,6 +5,7 @@
 		<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-post-filter-module/post-filter-module.css"
@@ -20,29 +21,74 @@
 			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"
+			>	<toggle-trigger
+				id="toggle-trigger"
+				data-toggletext="Toggle Text"
+				data-toggletarget="#filter-module"
+				data-toggleclass="active"
+				class="toggle-trigger"
+			>
+			</post-filter-module>
+			<toggle-trigger
+				id="toggle-trigger"
+				data-toggletext="Toggle Text"
+				data-toggletarget="#filter-module"
+				data-toggleclass="active"
+				class="toggle-trigger"
+			>
+			</toggle-trigger>
+			<post-grid-display-module
+				id="display-module"
+				data-posts=""
+				class="post-grid-display-module cmpl-block-padding cmpl-block-settings"
+			>
+			</post-grid-display-module>
 		</ptfg-9000>
 
 		<script type="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);
+			// 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);
 
-			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);
+			//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);
+
+			//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 blockgridjs from "../webc-post-grid-display-module/post-grid-display-module.js";
 			blockgridjs();
+
 			import blockptfgjs from "./ptfg-9000.js";
 			blockptfgjs();
 		</script>

package/components/webc-ptfg-9000/ptfg-9000.html

@@ -1,5 +1 @@
-<ptfg-9000
-	class="ptfg-9000 ptfg-9000__main-container"
-	data-assetkey="ptfg-9000"
->
-</ptfg-9000>
+<ptfg-9000 class="ptfg-9000 ptfg-9000__main-container"> </ptfg-9000>