@total_onion/onion-library 2.0.232 → 2.0.234

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

@@ -1,2 +1,20 @@
 loadmore-trigger {
+	grid-area: loadmore;
+	display: grid;
+	width: 100%;
+	place-items: center;
+	.loadmore-trigger__button {
+		background-color: black;
+		padding: 20px;
+		color: var(--theme-primary-text-colour, white);
+		width: max-content;
+	}
+	.loadmore-trigger__button:hover {
+		cursor: pointer;
+		background-color: greenyellow;
+	}
+}
+loadmore-trigger.hide {
+	opacity: 0.3;
+	pointer-events: none;
 }

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

@@ -1,2 +1,6 @@
-<loadmore-trigger id="loadmore-trigger" class="loadmore-trigger">
+<loadmore-trigger
+	id="loadmore-trigger"
+	data-buttontext="Load More"
+	class="loadmore-trigger"
+>
 </loadmore-trigger>

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

@@ -1,36 +1,57 @@
 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;
-	transform: translateX(-100%);
+	z-index: 99;
 	max-width: 414px;
-	z-index: 10;
 	transition: transform ease-in-out 0.3s;
 
-	@starting-style {
-		transform: translateX(-100%);
+	&.active {
+		transform: translateX(0%);
 	}
-
 	@media (min-width: 768px) {
 		max-width: unset;
 		width: 475px;
 	}
 
-	.post-filter-module__grouping-category-button {
+	.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 {
-		appearance: none;
-		color: var(--theme-primary-text-colour, white);
+		color: var(--theme-primary-text-colour);
+		font-family: var(--primary-font-family);
 		border: 1px solid transparent;
-		background-color: var(--theme-primary-background-colour, black);
+		font-size: 14;
 	}
 	.post-filter-module__filter-category-button.active-cat {
-		color: gold;
-		border: 1px solid gold;
+		color: var(--primary-gold-100);
+	}
+	.post-filter-module__clear-filters-button {
+		color: var(--theme-primary-text-colour);
 	}
 }
 post-filter-module.active {

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

@@ -7,6 +7,7 @@
 	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

@@ -4,10 +4,12 @@ export default function postfiltermoduleJs(options = {}) {
 			customElements.define(
 				'post-filter-module',
 				class extends HTMLElement {
+					static observedAttributes = ['data-devcontent'];
 					constructor() {
 						super();
-						this.enableLogs = this.dataset.enablelogs;
+						this.enableLogs = true;
 						this.filterState = {
+							enableLogs: false,
 							allposts: [],
 							filteredposts: [],
 							activefilters: new Set(),
@@ -50,6 +52,40 @@ export default function postfiltermoduleJs(options = {}) {
 							});
 						});
 
+						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 =
@@ -84,31 +120,26 @@ export default function postfiltermoduleJs(options = {}) {
 							this.clearFilters.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 == 'true' ||
-							this.classList.contains('dev-petz') //Easter Egg :D
+							this.dataset.dev === 'true' ||
+							this.dataset.devcontent === 'dev-petz' ||
+							this.classList.contains('dev-pets') //Easter Egg :D
 						) {
-							const devdatalocation =
-								this.dataset.devdatalocation;
-							data = await import(
-								`./dev-content/dev-content${devdatalocation}.js`
-							);
-							this.filterState.allposts = data[`devContentPets`];
-
-							this.filterState.allcategories =
-								data[`devContentCategories`];
+							await this.getDevContent();
 						} else {
 							data = globalThis[this.dataset.dataobjectid];
 							this.enableLogs &&
 								console.log('🚀 dataobject: ', data);
-							this.filterState.allposts = data[`posts`];
-							this.filterState.allcategories = data[`categories`];
+							if (data) {
+								this.filterState.allposts = data[`posts`];
+								this.filterState.allcategories =
+									data[`categories`];
+							}
 						}
 
 						if (this.filterState.allcategories.length > 0) {
@@ -251,15 +282,31 @@ export default function postfiltermoduleJs(options = {}) {
 								}
 							});
 						});
-						this.filterPosts();
 
+						this.filterPosts();
 						this.classList.add('loaded');
 					}
 
 					attributeChangedCallback(name, oldValue, newValue) {
-						// console.log(`Attribute ${name} has changed.`);
+						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) *
@@ -270,9 +317,10 @@ export default function postfiltermoduleJs(options = {}) {
 									numberPosts
 								)
 							});
+
 							if (
-								this.filterState.allposts.length ==
-								this.filterState.filteredposts.length
+								this.filterState.filteredposts.length >=
+								this.filterState.allposts.length
 							) {
 								this.loadMoreTriggers.forEach((trigger) => {
 									trigger.classList.add('hide');

package/components/webc-post-grid-display-module/post-grid-display-module.css

@@ -1,16 +1,37 @@
 post-grid-display-module {
+	grid-area: display;
 	display: grid;
-	background-color: hotpink;
+
 	.post-grid-display-module__grid-container {
 		place-self: stretch;
 		display: grid;
 		padding: 10px;
-		gap: 10px;
-		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+		gap: 30px;
+		grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
 	}
-	.post-grid-display-module__post-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
+	.post-grid-display-module__post-container {
+		display: grid;
+		place-items: stretch;
+		grid-template-rows: max-content;
+		.post-grid-display-module__post-title {
+			color: white;
+			grid-row: 2;
+			text-box-edge: unset;
+			line-height: 120%;
+			text-transform: uppercase;
+			text-align: center;
+			font-size: 36px;
+			.font-secondary {
+				display: block;
+			}
+		}
+		.post-grid-display-module__post-image {
+			grid-row: 1;
+			width: 100%;
+			height: auto;
+			place-self: stretch;
+			object-fit: cover;
+			aspect-ratio: 9 / 11;
+		}
 	}
 }

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

@@ -6,6 +6,8 @@
 		<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"
@@ -27,58 +29,30 @@
 				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"
-			>
+				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>
-			<toggle-trigger
-				id="toggle-trigger"
-				data-toggletext="Toggle Text"
-				data-toggletarget="#filter-module"
-				data-toggleclass="active"
-				class="toggle-trigger"
-			>
-			</toggle-trigger>
+			<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-grid-display-module
 				id="display-module"
 				data-posts=""
 				class="post-grid-display-module cmpl-block-padding cmpl-block-settings"
-			>
-			</post-grid-display-module>
+			></post-grid-display-module>
+			<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
 		</ptfg-9000>
 
 		<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);
-
 			//Run Component JS
 			import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
 			blockfilterjs();
@@ -86,6 +60,12 @@
 			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 blockgridjs from "../webc-post-grid-display-module/post-grid-display-module.js";
 			blockgridjs();
 
@@ -94,3 +74,34 @@
 		</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-ptfg-9000/ptfg-9000.css

@@ -1,6 +1,12 @@
 ptfg-9000 {
-	display: block;
-	background-color: rebeccapurple;
+	display: grid;
+	grid-template:
+		'filter ..'
+		'textinput toggleclass'
+		'display display'
+		'loadmore loadmore' / 1fr 1fr;
+	background-color: black;
+
 	--padding-block-multiplier-mobile-top: 1;
 	--padding-inline-multiplier-mobile-right: 1;
 	--padding-block-multiplier-mobile-bottom: 1;

package/components/webc-text-input-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="./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

@@ -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

@@ -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

@@ -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/toggle-trigger.css

@@ -1,5 +1,8 @@
 toggle-trigger {
-	display: block;
+	grid-area: toggleclass;
+	display: grid;
+	width: 100%;
+	place-items: center;
 	.toggle-trigger__button {
 		display: block;
 		appearance: none;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.232",
+	"version": "2.0.234",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {