saasufy-components 2.10.0 → 2.11.0

package/README.md

@@ -225,12 +225,17 @@ A component which can be used to guarantee that certain children components are
 
 ### if-group
 
-A modal component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
 It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `conditional-group`, this component requires a template and a viewport to be slotted in. The content of the template will not be processed unless the `show-content` condition is met.
 
+### switch-group
+
+A component which exposes a `show-cases` property which can be set to key-value pairs in the format `key1=true,key2=false`. It can be used to conditionally display multiple slotted elements based on multiple conditions. It helps to keep HTML clean when the conditions are complex.
+This element is intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false values of the `show-cases` attribute can be computed using template `{{expression}}` placeholders. This component requires one or more templates and a viewport to be slotted in. The content of the templates will not be processed unless the `show-cases` condition is met. All templates must have a `slot="content"` attribute and a name attribute in the format `name="key1"` where the value `key1` corresponds to the key specified inside the `show-cases` attribute of the `switch-group`.
+
 ### conditional-group
 
-A modal component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
 It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `if-group`, this component does not require a template, however, the trade-off is that the slotted content will be pre-processed by the browser even when the expression is false. This may not be suitable if you want to (for example) render child images conditionally because the browser will preload images based on their `src` attributes, even if they are not shown.
 
 ### collection-adder-group

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/switch-group.js

@@ -0,0 +1,71 @@
+import { debouncer } from './utils.js';
+
+const DEBOUNCE_DELAY = 0;
+
+class SwitchGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = '<slot name="content"></slot><slot name="viewport"></slot>';
+
+    let debounce = debouncer();
+
+    this.processTemplates = () => {
+      let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+      let viewportNode = viewportSlot.assignedNodes()[0];
+      if (!viewportNode) return;
+
+      let showCases = this.getAttribute('show-cases');
+      if (!showCases) return;
+
+      let caseEntries = showCases.split(',').map((caseString) => {
+        let sanitizedCase = caseString.trim();
+        return sanitizedCase.split('=').map(part => part.trim());
+      });
+
+      let contentList = [];
+
+      for (let [ caseName, showContent ] of caseEntries) {
+        if (
+          !showContent ||
+          showContent === 'false' ||
+          showContent === 'null' ||
+          showContent === 'undefined'
+        ) continue;
+
+        let contentSlot = this.shadowRoot.querySelector('slot[name="content"]');
+
+        let contentElements = contentSlot.assignedElements().filter((element) => {
+          return element.getAttribute('name') === caseName;
+        });
+
+        for (let element of contentElements) {
+          contentList.push(element.innerHTML);
+        }
+      }
+
+      viewportNode.innerHTML = contentList.join('');
+    };
+
+    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
+    this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
+  }
+
+  static get observedAttributes() {
+    return [
+      'show-cases'
+    ];
+  }
+
+  attributeChangedCallback() {
+    if (!this.isReady) return;
+    this.processTemplates();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+  }
+}
+
+window.customElements.define('switch-group', SwitchGroup);