saasufy-components 2.8.0 → 2.9.0

package/README.md

@@ -223,10 +223,15 @@ A general purpose modal component.
 
 A component which can be used to guarantee that certain children components are always rendered at the same time (once they are loaded) to provide a smooth user experience.
 
+### 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.
+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.
+
 ### 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.
-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.
+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/conditional-group.js

@@ -23,7 +23,16 @@ class ConditionalGroup extends HTMLElement {
 
   render() {
     let showContent = this.getAttribute('show-content');
-    this.shadowRoot.innerHTML = showContent != null && showContent !== 'false' ? '<slot></slot>' : '';
+    if (
+      !showContent ||
+      showContent === 'false' ||
+      showContent === 'null' ||
+      showContent === 'undefined'
+    ) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+    this.shadowRoot.innerHTML = '<slot></slot>';
   }
 }
 

package/if-group.js

@@ -0,0 +1,58 @@
+import { debouncer } from './utils.js';
+
+const DEBOUNCE_DELAY = 0;
+
+class IfGroup 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 showContent = this.getAttribute('show-content');
+      if (
+        !showContent ||
+        showContent === 'false' ||
+        showContent === 'null' ||
+        showContent === 'undefined'
+      ) return;
+
+      let contentSlot = this.shadowRoot.querySelector('slot[name="content"]');
+      let contentNodes = contentSlot.assignedNodes();
+      if (!contentNodes.length) return;
+
+      let contentList = [];
+      for (let node of contentNodes) {
+        contentList.push(node.innerHTML);
+      }
+      viewportNode.innerHTML = contentList.join('');
+    };
+
+    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
+    this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
+  }
+
+  static get observedAttributes() {
+    return [
+      'show-content'
+    ];
+  }
+
+  attributeChangedCallback() {
+    if (!this.isReady) return;
+    this.processTemplates();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+  }
+}
+
+window.customElements.define('if-group', IfGroup);

package/package.json

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

package/utils.js

@@ -18,6 +18,12 @@ export function toSafeHTML(text) {
   return text;
 }
 
+export function toExpression(html) {
+  return html.replace(/&/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+}
+
 export function debouncer() {
   let debounceTimeout = null;
   return function (callback, duration) {
@@ -213,7 +219,7 @@ export function renderTemplate(templateString, data, socket) {
     try {
       return toSafeHTML(
         execExpression(
-          expString,
+          toExpression(expString),
           options
         )
       );