@total_onion/onion-library 2.0.222 → 2.0.224

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

@@ -1,20 +1,2 @@
-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;
-	}
+loadmore-trigger {
 }

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

@@ -9,9 +9,13 @@ export default function loadmoreTriggerJs(options = {}) {
 						super();
 						this.enableLogs = this.dataset.enablelogs;
 						this.toggleButton = document.createElement('button');
-						this.toggleButton.className = 'loadmore-trigger';
+						this.toggleButton.className =
+							'loadmore-trigger__button';
 						this.appendChild(this.toggleButton);
-						this.toggleButton.innerText = this.dataset.toggletext;
+						this.toggleButton.innerText = this.dataset.buttontext;
+						this.toggleButton.addEventListener('click', () => {
+							this.dispatchEvent(new CustomEvent('loadmore'));
+						});
 					}
 					connectedCallback() {
 						console.log('Display module added to page.');

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

@@ -120,7 +120,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: 'Puppy eyes Vanille',
+		name: 'Is it dinner time? Vanille',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePuppyFace
@@ -189,7 +189,7 @@ export const devContentPets = [
 			post_image_src: skySecurity
 		},
 
-		categories: [12, 10, 4, 1]
+		categories: [13, 10, 4, 3]
 	},
 	{
 		name: 'Kai Selfie',
@@ -216,7 +216,7 @@ export const devContentPets = [
 			post_image_src: skyLuxury
 		},
 
-		categories: [12, 10, 5, 1]
+		categories: [13, 10, 5, 1]
 	},
 	{
 		name: 'Pete rules her lawn',
@@ -237,13 +237,13 @@ export const devContentPets = [
 		categories: [13, 10, 5, 1]
 	},
 	{
-		name: 'Vanille having a nap',
+		name: 'Vanille hard day',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanilleNap
 		},
 
-		categories: [14, 10, 5, 1]
+		categories: [14, 10, 5]
 	},
 	{
 		name: 'Fat Gigio Basket Life',
@@ -291,7 +291,7 @@ export const devContentPets = [
 		categories: [13, 9, 5, 1]
 	},
 	{
-		name: 'Vanille only likes Bass',
+		name: 'Vanille likes woofers',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanilleBass

package/components/webc-post-filter-module/dev-content/dev-contentlocal.js

@@ -133,7 +133,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: 'Puppy eyes Vanille',
+		name: 'Is it dinner time? Vanille',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePuppyFace
@@ -202,7 +202,7 @@ export const devContentPets = [
 			post_image_src: skySecurity
 		},
 
-		categories: [12, 10, 4, 1]
+		categories: [13, 10, 4, 3]
 	},
 	{
 		name: 'Kai Selfie',
@@ -229,7 +229,7 @@ export const devContentPets = [
 			post_image_src: skyLuxury
 		},
 
-		categories: [12, 10, 5, 1]
+		categories: [13, 10, 5, 1]
 	},
 	{
 		name: 'Pete rules her lawn',
@@ -250,13 +250,13 @@ export const devContentPets = [
 		categories: [13, 10, 5, 1]
 	},
 	{
-		name: 'Vanille having a nap',
+		name: 'Vanille hard day',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanilleNap
 		},
 
-		categories: [14, 10, 5, 1]
+		categories: [14, 10, 5]
 	},
 	{
 		name: 'Fat Gigio Basket Life',
@@ -304,7 +304,7 @@ export const devContentPets = [
 		categories: [13, 9, 5, 1]
 	},
 	{
-		name: 'Vanille only likes Bass',
+		name: 'Vanille likes woofers',
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanilleBass

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

@@ -3,6 +3,8 @@
 	data-dataobjectid=""
 	data-dev="true"
 	data-devdatalocation="local"
-	class="post-filter-module__filter"
+	data-clearfilterstext="Reset All"
+	data-loadmoretriggerclass="loadmore-trigger__button"
+	class="post-filter-module"
 >
 </post-filter-module>

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

@@ -31,6 +31,10 @@ export default function postfiltermoduleJs(options = {}) {
 							}
 						};
 
+						this.loadMoreTriggers = document.querySelectorAll(
+							`.${this.loadmoretriggerclass}`
+						);
+
 						const postFilterContainer =
 							document.createElement('div');
 						postFilterContainer.className =
@@ -54,7 +58,8 @@ export default function postfiltermoduleJs(options = {}) {
 						const clearFilters = document.createElement('button');
 						clearFilters.className =
 							'post-filter-module__clear-filters-button';
-						clearFilters.innerText = 'Clear Filters';
+						clearFilters.innerText =
+							this.dataset.clearfilterstext || 'Clear Filters';
 						this.postFilterContainer.appendChild(clearFilters);
 						this.clearFiltersButton = this.querySelector(
 							'.post-filter-module__clear-filters-button'
@@ -76,10 +81,6 @@ export default function postfiltermoduleJs(options = {}) {
 						) {
 							const devdatalocation =
 								this.dataset.devdatalocation;
-							console.log(
-								'🚀 ~ connectedCallback ~ devdatalocation:',
-								devdatalocation
-							);
 							data = await import(
 								`./dev-content/dev-content${devdatalocation}.js`
 							);
@@ -164,7 +165,6 @@ export default function postfiltermoduleJs(options = {}) {
 						this.categorybuttons = this.querySelectorAll(
 							'.post-filter-module__filter-category-button'
 						);
-
 						this.categorybuttons.forEach((button) => {
 							button.addEventListener('click', () => {
 								if (
@@ -203,6 +203,42 @@ export default function postfiltermoduleJs(options = {}) {
 						this.filterState.setFilteredPosts.bind(this)({
 							filteredposts: this.filterState.allposts
 						});
+						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.classList.add('loaded');
 					}
 

package/package.json

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