@total_onion/onion-library 2.0.229 → 2.0.231

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

@@ -57,7 +57,7 @@ export const devContentPets = [
 		categories: [13, 3, 9, 4]
 	},
 	{
-		name: `Waking up <span class='font-secondary'>Amber</span>`,
+		name: `Amber <span class='font-secondary'>Waking up</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: amberImage
@@ -75,7 +75,7 @@ export const devContentPets = [
 		categories: [12, 10, 4, 1]
 	},
 	{
-		name: `Kitten <span class='font-secondary'>Ramses</span>`,
+		name: `Ramses<span class='font-secondary'>Kitten</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: ramsesKittenImage
@@ -84,7 +84,7 @@ export const devContentPets = [
 		categories: [12, 2, 10, 4]
 	},
 	{
-		name: `Mad Face <span class='font-secondary'>Lulu</span>`,
+		name: `Lulu<span class='font-secondary'>Mad Face</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: luluMadImage
@@ -93,7 +93,7 @@ export const devContentPets = [
 		categories: [14, 10, 5, 1]
 	},
 	{
-		name: `Pete having a <span class='font-secondary'>Bath/Drink</span>`,
+		name: `Pete <span class='font-secondary'>having a Bath/Drink</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: peteBath
@@ -111,7 +111,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: `Dinosaur <span class='font-secondary'>Pete</span>`,
+		name: `Pete <span class='font-secondary'>Dinosaur</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: peteDinosaur
@@ -120,7 +120,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: `Is it dinner time? <span class='font-secondary'>Vanille</span>`,
+		name: `Vanille <span class='font-secondary'>Is it dinner time?</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePuppyFace
@@ -129,7 +129,7 @@ export const devContentPets = [
 		categories: [14, 10, 5, 3]
 	},
 	{
-		name: `Cutie <span class='font-secondary'>Fat Gigio</span>`,
+		name: `Fat Gigio <span class='font-secondary'>Cutie</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: fatGigioSleepy
@@ -156,7 +156,7 @@ export const devContentPets = [
 		categories: [2, 13, 8]
 	},
 	{
-		name: `Party Dress <span class='font-secondary'>Vanille</span>`,
+		name: `Vanille <span class='font-secondary'>Party Dress</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePartyDress
@@ -165,7 +165,7 @@ export const devContentPets = [
 		categories: [14, 10, 4, 1]
 	},
 	{
-		name: `Sky Puppy <span class='font-secondary'>Good Dog</span>`,
+		name: `Sky <span class='font-secondary'>Good Dog</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: skyPuppyGood
@@ -174,7 +174,7 @@ export const devContentPets = [
 		categories: [12, 10, 4, 1]
 	},
 	{
-		name: `Kitten <span class='font-secondary'>Fat Gigio</span>`,
+		name: `Fat Gigio <span class='font-secondary'>Kitten</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: fatGigioKitten
@@ -183,7 +183,7 @@ export const devContentPets = [
 		categories: [12, 10, 5, 1]
 	},
 	{
-		name: `Security Corps <span class='font-secondary'>Sky</span>`,
+		name: `Sky <span class='font-secondary'>Security Corps</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: skySecurity

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

@@ -70,7 +70,7 @@ export const devContentPets = [
 		categories: [13, 3, 9, 4]
 	},
 	{
-		name: `Waking up <span class='font-secondary'>Amber</span>`,
+		name: `Amber <span class='font-secondary'>Waking up</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: amberImage
@@ -88,7 +88,7 @@ export const devContentPets = [
 		categories: [12, 10, 4, 1]
 	},
 	{
-		name: `Kitten <span class='font-secondary'>Ramses</span>`,
+		name: `Ramses<span class='font-secondary'>Kitten</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: ramsesKittenImage
@@ -97,7 +97,7 @@ export const devContentPets = [
 		categories: [12, 2, 10, 4]
 	},
 	{
-		name: `Mad Face <span class='font-secondary'>Lulu</span>`,
+		name: `Lulu<span class='font-secondary'>Mad Face</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: luluMadImage
@@ -106,7 +106,7 @@ export const devContentPets = [
 		categories: [14, 10, 5, 1]
 	},
 	{
-		name: `Pete having a <span class='font-secondary'>Bath/Drink</span>`,
+		name: `Pete <span class='font-secondary'>having a Bath/Drink</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: peteBath
@@ -124,7 +124,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: `Dinosaur <span class='font-secondary'>Pete</span>`,
+		name: `Pete <span class='font-secondary'>Dinosaur</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: peteDinosaur
@@ -133,7 +133,7 @@ export const devContentPets = [
 		categories: [13, 10, 4, 1]
 	},
 	{
-		name: `Is it dinner time? <span class='font-secondary'>Vanille</span>`,
+		name: `Vanille <span class='font-secondary'>Is it dinner time?</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePuppyFace
@@ -142,7 +142,7 @@ export const devContentPets = [
 		categories: [14, 10, 5, 3]
 	},
 	{
-		name: `Cutie <span class='font-secondary'>Fat Gigio</span>`,
+		name: `Fat Gigio <span class='font-secondary'>Cutie</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: fatGigioSleepy
@@ -169,7 +169,7 @@ export const devContentPets = [
 		categories: [2, 13, 8]
 	},
 	{
-		name: `Party Dress <span class='font-secondary'>Vanille</span>`,
+		name: `Vanille <span class='font-secondary'>Party Dress</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: vanillePartyDress
@@ -178,7 +178,7 @@ export const devContentPets = [
 		categories: [14, 10, 4, 1]
 	},
 	{
-		name: `Sky Puppy <span class='font-secondary'>Good Dog</span>`,
+		name: `Sky <span class='font-secondary'>Good Dog</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: skyPuppyGood
@@ -187,7 +187,7 @@ export const devContentPets = [
 		categories: [12, 10, 4, 1]
 	},
 	{
-		name: `Kitten <span class='font-secondary'>Fat Gigio</span>`,
+		name: `Fat Gigio <span class='font-secondary'>Kitten</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: fatGigioKitten
@@ -196,7 +196,7 @@ export const devContentPets = [
 		categories: [12, 10, 5, 1]
 	},
 	{
-		name: `Security Corps <span class='font-secondary'>Sky</span>`,
+		name: `Sky <span class='font-secondary'>Security Corps</span>`,
 		link: 'https://totalonion.com',
 		images: {
 			post_image_src: skySecurity

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

@@ -4,7 +4,7 @@
 	data-dev="true"
 	data-devdatalocation="local"
 	data-clearfilterstext="Reset All"
-	data-loadmoretriggerclass="loadmore-trigger__button"
+	data-loadmoretriggerclass="loadmore-trigger"
 	class="post-filter-module"
 >
 </post-filter-module>

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

@@ -14,6 +14,9 @@ export default function postfiltermoduleJs(options = {}) {
 							allcategories: [],
 							groupingcategories: [],
 							filtercategories: [],
+							postsperpagedesktop: 8,
+							postsperpagemobile: 6,
+							pagenumber: 1,
 							setActiveFilters: function (newState) {
 								Object.assign(this.filterState, newState);
 								this.filterPosts.bind(this)();
@@ -31,9 +34,21 @@ export default function postfiltermoduleJs(options = {}) {
 							}
 						};
 
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 8;
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 6;
+
 						this.loadMoreTriggers = document.querySelectorAll(
-							`.${this.loadmoretriggerclass}`
+							`.${this.dataset.loadmoretriggerclass}`
 						);
+						this.loadMoreTriggers.forEach((trigger) => {
+							trigger.addEventListener('loadmore', () => {
+								this.filterState.pagenumber =
+									this.filterState.pagenumber + 1;
+								this.filterPosts();
+							});
+						});
 
 						const postFilterContainer =
 							document.createElement('div');
@@ -200,9 +215,6 @@ export default function postfiltermoduleJs(options = {}) {
 								}
 							});
 						});
-						this.filterState.setFilteredPosts.bind(this)({
-							filteredposts: this.filterState.allposts
-						});
 						const groupingButtons = this.querySelectorAll(
 							'.post-filter-module__grouping-category-button'
 						);
@@ -239,6 +251,8 @@ export default function postfiltermoduleJs(options = {}) {
 								}
 							});
 						});
+						this.filterPosts();
+
 						this.classList.add('loaded');
 					}
 
@@ -247,8 +261,14 @@ export default function postfiltermoduleJs(options = {}) {
 					}
 					filterPosts(event) {
 						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
+								filteredposts: this.filterState.allposts.slice(
+									0,
+									numberPosts
+								)
 							});
 							return;
 						}

package/package.json

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