@total_onion/onion-library 3.0.4 → 3.0.7

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

@@ -1,4 +1,5 @@
 import ramsesImage from './ramses-tired.webp';
+import ramsesSchoolDay from './ramses-school-day.webp';
 import kaiImage from './kai.webp';
 import kaiSelfie from './kai-selfie.webp';
 import kaiLounging from './kai-lounging.webp';
@@ -309,6 +310,14 @@ export const devContentPets = [
 
 		categories: [14, 10, 4, 1]
 	}
+	{
+		name: `Ramses <span class='font-secondary'>School Day</span>`,
+		link: 'https://totalonion.com',
+		images: {
+			post_image_src: ramsesSchoolDay
+		},
+categories: [13, 3, 10, 5]
+	}
 ];
 
 export const devContentCategories = [

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

@@ -1,4 +1,6 @@
 const ramsesImage = '../webc-post-filter-module/dev-content/ramses-tired.webp';
+const ramsesSchoolDay =
+	'../webc-post-filter-module/dev-content/ramses-school-day.webp';
 const kaiImage = '../webc-post-filter-module/dev-content/kai.webp';
 const kaiSelfie = '../webc-post-filter-module/dev-content/kai-selfie.webp';
 const kaiLounging = '../webc-post-filter-module/dev-content/kai-lounging.webp';
@@ -321,6 +323,15 @@ export const devContentPets = [
 		},
 
 		categories: [14, 10, 3]
+	},
+	{
+		name: `Ramses <span class='font-secondary'>School Day</span>`,
+		link: 'https://totalonion.com',
+		images: {
+			post_image_src: ramsesSchoolDay
+		},
+
+		categories: [13, 3, 10, 5]
 	}
 ];
 

package/package.json

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

package/public/jsAssets.mjs

@@ -1,4 +1,40 @@
-
-const dynamicAssets = [{"assetKey":"video-content-v3"},{"assetKey":"sub-group-container-v3"},{"assetKey":"sticky-buy-cta-v3"},{"assetKey":"standard-content-v3"},{"assetKey":"spotify-embed-v3"},{"assetKey":"spacer-v3"},{"assetKey":"social-networks-v3"},{"assetKey":"smash-balloon-social-media-v3"},{"assetKey":"site-title-and-tagline-v3"},{"assetKey":"site-logo-container-v3"},{"assetKey":"site-copyright-notice-v3"},{"assetKey":"single-responsive-image-v3"},{"assetKey":"single-column-container-v3"},{"assetKey":"section-separator-v3"},{"assetKey":"scrolling-banner-v3"},{"assetKey":"responsive-table-v3"},{"assetKey":"raw-html-v3"},{"assetKey":"product-info-v3"},{"assetKey":"post-info-v3"},{"assetKey":"nav-menu-container-v3"},{"assetKey":"modal-form-v3"},{"assetKey":"market-selector-v3"},{"assetKey":"lottie-content-v3"},{"assetKey":"group-container-v3"},{"assetKey":"gradient-layer-v3"},{"assetKey":"form-selection-v3"},{"assetKey":"featured-image-gallery-v3"},{"assetKey":"divider-v3"},{"assetKey":"cover-link-v3"},{"assetKey":"cocktail-recipe-v3"},{"assetKey":"carousel-multi-layout-v3"},{"assetKey":"block-interactions-v3"},{"assetKey":"betterreviews-display-v3"},{"assetKey":"back-to-top-button-v3"},{"assetKey":"accordion-v3"},{"assetKey":"accent-image-v3"}];
-const api = {dynamicAssets};
+const dynamicAssets = [
+	{ assetKey: "video-content-v3" },
+	{ assetKey: "sub-group-container-v3" },
+	{ assetKey: "sticky-buy-cta-v3" },
+	{ assetKey: "standard-content-v3" },
+	{ assetKey: "spotify-embed-v3" },
+	{ assetKey: "spacer-v3" },
+	{ assetKey: "social-networks-v3" },
+	{ assetKey: "smash-balloon-social-media-v3" },
+	{ assetKey: "site-title-and-tagline-v3" },
+	{ assetKey: "site-logo-container-v3" },
+	{ assetKey: "site-copyright-notice-v3" },
+	{ assetKey: "single-responsive-image-v3" },
+	{ assetKey: "single-column-container-v3" },
+	{ assetKey: "section-separator-v3" },
+	{ assetKey: "scrolling-banner-v3" },
+	{ assetKey: "responsive-table-v3" },
+	{ assetKey: "raw-html-v3" },
+	{ assetKey: "product-info-v3" },
+	{ assetKey: "post-info-v3" },
+	{ assetKey: "nav-menu-container-v3" },
+	{ assetKey: "modal-form-v3" },
+	{ assetKey: "market-selector-v3" },
+	{ assetKey: "lottie-content-v3" },
+	{ assetKey: "group-container-v3" },
+	{ assetKey: "gradient-layer-v3" },
+	{ assetKey: "form-selection-v3" },
+	{ assetKey: "featured-image-gallery-v3" },
+	{ assetKey: "divider-v3" },
+	{ assetKey: "cover-link-v3" },
+	{ assetKey: "cocktail-recipe-v3" },
+	{ assetKey: "carousel-multi-layout-v3" },
+	{ assetKey: "block-interactions-v3" },
+	{ assetKey: "betterreviews-display-v3" },
+	{ assetKey: "back-to-top-button-v3" },
+	{ assetKey: "accordion-v3" },
+	{ assetKey: "accent-image-v3" },
+];
+const api = { dynamicAssets };
 export default api;

package/public/block-post-type-filter-grid-v4/dev-content/dev-content.js

@@ -1,38 +0,0 @@
-export const devContentDogz = [
-	{
-		postname: 'Dogz-1',
-		'post-link': '#',
-		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
-		categories: new Set([1, 5])
-	},
-	{
-		postname: 'Dogz-2',
-		'post-link': '#',
-		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
-
-		categories: new Set([2])
-	},
-	{
-		postname: 'Dogz-3',
-		'post-link': '#',
-		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
-
-		categories: new Set([1, 3])
-	},
-	{
-		postname: 'Dogz-4',
-		'post-link': '#',
-		'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
-
-		categories: new Set([4])
-	}
-];
-
-export const devContentCategories = [
-	{name: 'grumpy', id: '1', parentid: '6'},
-	{name: 'fluffy', id: '2', parentid: '6'},
-	{name: 'happy', id: '3', parentid: '6'},
-	{name: 'sleepy', id: '4', parentid: '6'},
-	{name: 'sweet', id: '5', parentid: '6'},
-	{name: 'hounds', id: '6', parentid: null}
-];

package/public/block-post-type-filter-grid-v4/post-type-filter-grid-v4.css

@@ -1,42 +0,0 @@
-post-type-filter-grid-v4 {
-  display: block;
-  background-color: hotpink;
-  --padding-block-multiplier-mobile-top: 1;
-  --padding-inline-multiplier-mobile-right: 1;
-  --padding-block-multiplier-mobile-bottom: 1;
-  --padding-inline-multiplier-mobile-left: 1;
-}
-post-filter-module-v4 {
-  display: block;
-  background-color: aquamarine;
-}
-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 .post-grid-display-module-v4__grid-container {
-  align-self: stretch;
-  justify-self: stretch;
-  place-self: stretch;
-  display: grid;
-  padding: 10px;
-  grid-gap: 10px;
-  gap: 10px;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-}
-post-grid-display-module-v4 .post-grid-display-module-v4__post-image {
-  width: 100%;
-  height: auto;
-}
-load-more-posts-trigger-v4 {
-  display: block;
-  padding: 10px;
-  background-color: #639;
-}
-load-more-posts-trigger-v4 .load-more-posts-trigger-v4__button-trigger {
-  color: antiquewhite;
-}

package/public/block-post-type-filter-grid-v4/post-type-filter-grid-v4.js

@@ -1,181 +0,0 @@
-export default function posttypefiltergridv4Js(options = {}) {
-  try {
-    const { block } = options;
-    customElements.define(
-      "post-filter-module-v4",
-      class extends HTMLElement {
-        constructor() {
-          super();
-          this.filterState = {
-            allposts: /* @__PURE__ */ new Set(),
-            filteredposts: /* @__PURE__ */ new Set(),
-            activefilters: /* @__PURE__ */ new Set(),
-            setActiveFilters: function(newState) {
-              Object.assign(this.filterState, newState);
-              this.dispatchEvent(
-                new CustomEvent("activefilters-updated")
-              );
-            },
-            setFilteredPosts: function(newState) {
-              Object.assign(this.filterState, newState);
-              this.dispatchEvent(
-                new CustomEvent("filteredposts-updated")
-              );
-            }
-          };
-          this.filterCategoriesDisplay = this.querySelector(
-            ".post-filter-module-v4__filter-categories-display"
-          );
-          this.clearFiltersButton = this.querySelector(
-            ".post-filter-module-v4__clear-filters-button"
-          );
-          this.setStateButton = this.querySelector(
-            ".post-filter-module-v4__set-state-button"
-          );
-          this.clearFiltersButton.addEventListener(
-            "click",
-            this.clearFilters.bind(this)
-          );
-          this.addEventListener(
-            "activefilters-updated",
-            this.filterPosts.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) {
-            data = await import("./dev-content/dev-content.js");
-          }
-          this.filterState.allposts = data[`devContent${this.devModeContent}`];
-          this.filterState.categories = data[`devContentCategories`];
-          this.filterState.categories.forEach((category) => {
-            if (category.parentid) {
-              this.filterCategoriesDisplay.insertAdjacentHTML(
-                "beforeend",
-                `<button class="post-filter-module-v4__category-button" data-categoryid="${category.id}">${category.name}</button>`
-              );
-            }
-          });
-          this.categorybuttons = this.querySelectorAll(
-            ".post-filter-module-v4__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
-                );
-                newActiveFilters.delete(
-                  Number(button.dataset.categoryid)
-                );
-                this.filterState.setActiveFilters.bind(this)({
-                  activefilters: newActiveFilters
-                });
-              } else {
-                const newActiveFilters = new Set(
-                  this.filterState.activefilters
-                );
-                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) {
-        }
-        filterPosts(event) {
-          if (this.filterState.activefilters.size === 0) {
-            this.filterState.setFilteredPosts.bind(this)({
-              filteredposts: this.filterState.allposts
-            });
-            return;
-          }
-          const newFilteredPosts = this.filterState.allposts.filter(
-            (post) => {
-              return this.filterState.activefilters.intersection(
-                post.categories
-              ).size > 0;
-            }
-          );
-          this.filterState.setFilteredPosts.bind(this)({
-            filteredposts: newFilteredPosts
-          });
-        }
-        clearFilters(event) {
-          this.filterState.setActiveFilters.bind(this)({
-            activefilters: /* @__PURE__ */ new Set()
-          });
-        }
-      }
-    );
-    customElements.define(
-      "post-type-filter-grid-v4",
-      class extends HTMLElement {
-        constructor() {
-          super();
-          this.data = this.dataset;
-          this.filterModule = this.querySelector("#filter-module");
-          this.displayModule = this.querySelector("#display-module");
-        }
-        connectedCallback() {
-          console.log("PTFG v4 element added to page.");
-          this.filterModule.addEventListener(
-            "filteredposts-updated",
-            () => {
-              this.displayModule.dataset.posts = JSON.stringify(
-                this.filterModule.filterState.filteredposts
-              );
-            }
-          );
-          this.classList.add("loaded");
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-        }
-      }
-    );
-    customElements.define(
-      "post-grid-display-module-v4",
-      class extends HTMLElement {
-        static observedAttributes = ["data-posts"];
-        constructor() {
-          super();
-          this.gridContainer = this.querySelector(
-            ".post-grid-display-module-v4__grid-container"
-          );
-        }
-        connectedCallback() {
-          console.log("Display module added to page.");
-          this.classList.add("loaded");
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-          this.gridContainer.innerHTML = "";
-          if (newValue) {
-            const posts = JSON.parse(newValue);
-            posts.forEach((post) => {
-              const postContent = `<div class="post-grid-display-module-v4__post-container"><h2>${post.postname}</h2><img class="post-grid-display-module-v4__post-image" src="${post["image-src"]}" alt="${post.postname}"></div>`;
-              this.gridContainer.insertAdjacentHTML(
-                "beforeend",
-                postContent
-              );
-            });
-          }
-        }
-      }
-    );
-  } catch (error) {
-    console.error(error);
-  }
-}