@total_onion/onion-library 2.0.216 → 2.0.218

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>

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

@@ -1,40 +1,39 @@
 export default function ptfg9000js(options = {}) {
 	try {
-		const {block} = options;
-
-		customElements.define(
-			'ptfg-9000',
-			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 element added to page.');
-					if (this.filterModule) {
-						this.filterModule.addEventListener(
-							'filteredposts-updated',
-							() => {
-								console.log('Filters updated!');
-
-								this.displayModule.dataset.posts =
-									JSON.stringify(
-										this.filterModule.filterState
-											.filteredposts
-									);
-							}
-						);
+		if (!customElements.get('ptfg-9000')) {
+			customElements.define(
+				'ptfg-9000',
+				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 element added to page.');
+						if (this.filterModule) {
+							this.filterModule.addEventListener(
+								'filteredposts-updated',
+								() => {
+									this.displayModule.dataset.posts =
+										JSON.stringify(
+											this.filterModule.filterState
+												.filteredposts
+										);
+								}
+							);
+						}
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {
+						// console.log(`Attribute ${name} has changed.`);
 					}
-					this.classList.add('loaded');
-				}
-
-				attributeChangedCallback(name, oldValue, newValue) {
-					// console.log(`Attribute ${name} has changed.`);
 				}
-			}
-		);
+			);
+		}
 	} catch (error) {
 		console.error(error);
 	}

package/components/webc-toggle-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="./toggle-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("./toggle-trigger.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./toggle-trigger.js";
+			blockjs();
+		</script>
+	</body>
+</html>

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

@@ -0,0 +1,10 @@
+toggle-trigger {
+	display: block;
+	.toggle-trigger__button {
+		display: block;
+		appearance: none;
+		color: var(--theme-primary-text-colour, white);
+		border: 1px solid transparent;
+		background-color: var(--theme-primary-background-colour, black);
+	}
+}

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

@@ -0,0 +1,8 @@
+<toggle-trigger
+	id="toggle-trigger"
+	data-toggletext="Toggle Text"
+	data-toggletarget="#filter-module"
+	data-toggleclass="active"
+	class="toggle-trigger"
+>
+</toggle-trigger>

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

@@ -0,0 +1,45 @@
+export default function toggletriggerJs(options = {}) {
+	try {
+		if (!customElements.get('toggle-trigger')) {
+			customElements.define(
+				'toggle-trigger',
+				class extends HTMLElement {
+					constructor() {
+						super();
+						this.enableLogs = this.dataset.enablelogs;
+						this.toggleButton = document.createElement('button');
+						this.toggleButton.className = 'toggle-trigger__button';
+						this.appendChild(this.toggleButton);
+						this.toggleButton.innerText = this.dataset.toggletext;
+						this.toggleTarget = document.querySelector(
+							this.dataset.toggletarget
+						);
+						this.toggleClass = this.dataset.toggleclass;
+						document.body.addEventListener('click', (e) => {
+							if (
+								(this.toggleTarget.classList.contains(
+									this.toggleClass
+								) &&
+									!this.toggleTarget.contains(e.target)) ||
+								e.target == this.querySelector('button')
+							) {
+								this.toggleTarget.classList.toggle(
+									this.toggleClass
+								);
+							}
+						});
+					}
+					async connectedCallback() {
+						console.log('Toggle trigger element added to page.');
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {
+						// console.log(`Attribute ${name} has changed.`);
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/package.json

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