Add ability to target loading elements.

Author: adamghill

django_unicorn/static/js/attribute.js

@@ -13,6 +13,7 @@ export class Attribute {
     this.isField = false;
     this.isPoll = false;
     this.isLoading = false;
+    this.isTarget = false;
     this.isKey = false;
     this.isPK = false;
     this.isError = false;
@@ -40,14 +41,18 @@ export class Attribute {
         this.isPoll = true;
       } else if (contains(this.name, ":loading")) {
         this.isLoading = true;
+      } else if (contains(this.name, ":target")) {
+        this.isTarget = true;
       } else if (this.name === "unicorn:key" || this.name === "u:key") {
         this.isKey = true;
       } else if (this.name === "unicorn:pk" || this.name === "u:pk") {
         this.isPK = true;
       } else if (contains(this.name, ":error:")) {
         this.isError = true;
       } else {
-        const actionEventType = this.name.replace("unicorn:", "").replace("u:", "");
+        const actionEventType = this.name
+          .replace("unicorn:", "")
+          .replace("u:", "");
 
         if (
           actionEventType !== "id" &&

django_unicorn/static/js/component.js

@@ -32,6 +32,8 @@ export class Component {
     this.root = undefined;
     this.modelEls = [];
     this.dbEls = [];
+    this.loadingEls = [];
+    this.keyEls = [];
     this.errors = {};
     this.poll = {};
 
@@ -104,6 +106,17 @@ export class Component {
           if (!this.modelEls.some((e) => e.isSame(element))) {
             this.modelEls.push(element);
           }
+        } else if (hasValue(element.loading)) {
+          this.loadingEls.push(element);
+
+          // Hide loading elements that are shown when an action happens
+          if (element.loading.show) {
+            element.hide();
+          }
+        }
+
+        if (hasValue(element.key)) {
+          this.keyEls.push(element);
         }
 
         element.actions.forEach((action) => {

django_unicorn/static/js/element.js

@@ -30,7 +30,7 @@ export class Element {
     this.actions = [];
     this.db = {};
     this.field = {};
-
+    this.target = null;
     this.key = null;
     this.errors = [];
 
@@ -82,7 +82,13 @@ export class Element {
           this.loading.removeClass = attribute.value;
         } else if (attribute.modifiers.class) {
           this.loading.class = attribute.value;
+        } else if (attribute.modifiers.remove) {
+          this.loading.hide = true;
+        } else {
+          this.loading.show = true;
         }
+      } else if (attribute.isTarget) {
+        this.target = attribute.value;
       } else if (attribute.eventType) {
         const action = {};
         action.name = attribute.value;
@@ -171,6 +177,20 @@ export class Element {
     this.el.focus();
   }
 
+  /**
+   * Hide the element.
+   */
+  hide() {
+    this.el.hidden = "hidden";
+  }
+
+  /**
+   * Show the element.
+   */
+  show() {
+    this.el.hidden = null;
+  }
+
   /**
    * A key that takes into consideration the db name and pk.
    */

django_unicorn/static/js/eventListeners.js

@@ -1,4 +1,5 @@
 import {
+  $,
   args,
   generateDbKey,
   hasValue,
@@ -86,15 +87,18 @@ export function addActionEventListener(component, eventType) {
             if (eventArg.startsWith("$event")) {
               // Remove any extra whitespace, everything before and including "$event", and the ending paren
               // let eventArg = action.name.trim();
-              eventArg = eventArg.trim().slice(eventArg.indexOf("$event") + 6).trim();
-  
+              eventArg = eventArg
+                .trim()
+                .slice(eventArg.indexOf("$event") + 6)
+                .trim();
+
               const originalSpecialVariable = `$event${eventArg}`;
               let data = event;
               let invalidPiece = false;
-  
+
               eventArg.split(".").forEach((piece) => {
                 piece = piece.trim();
-  
+
                 if (piece) {
                   // TODO: Handle method calls with args
                   if (piece.endsWith("()")) {
@@ -108,34 +112,67 @@ export function addActionEventListener(component, eventType) {
                   }
                 }
               });
-  
+
               if (invalidPiece) {
-                console.error(`${originalSpecialVariable} could not be retrieved`)
+                console.error(
+                  `'${originalSpecialVariable}' could not be retrieved`
+                );
                 action.name = action.name.replace(originalSpecialVariable, "");
               } else if (data) {
                 if (typeof data === "string") {
                   // Wrap strings in quotes
                   data = `"${data}"`;
                 }
-  
-                action.name = action.name.replace(originalSpecialVariable, data);
+
+                action.name = action.name.replace(
+                  originalSpecialVariable,
+                  data
+                );
               }
             }
           });
 
           if (targetElement.loading) {
             if (targetElement.loading.attr) {
-              targetElement.el[targetElement.loading.attr] = targetElement.loading.attr;
-            }
-
-            if (targetElement.loading.class) {
+              targetElement.el[targetElement.loading.attr] =
+                targetElement.loading.attr;
+            } else if (targetElement.loading.class) {
               targetElement.el.classList.add(targetElement.loading.class);
+            } else if (targetElement.loading.removeClass) {
+              targetElement.el.classList.remove(
+                targetElement.loading.removeClass
+              );
             }
+          }
+
+          // Look at all elements with a loading attribute
+          component.loadingEls.forEach((loadingElement) => {
+            if (loadingElement.target) {
+              let targetedEl = $(`#${loadingElement.target}`, component.root);
 
-            if (targetElement.loading.removeClass) {
-              targetElement.el.classList.remove(targetElement.loading.removeClass);
+              if (!targetedEl) {
+                component.keyEls.forEach((keyElement) => {
+                  if (!targetedEl && keyElement.key === loadingElement.target) {
+                    targetedEl = keyElement.el;
+                  }
+                });
+              }
+
+              if (targetedEl) {
+                if (targetElement.el.isSameNode(targetedEl)) {
+                  if (loadingElement.loading.hide) {
+                    loadingElement.hide();
+                  } else if (loadingElement.loading.show) {
+                    loadingElement.show();
+                  }
+                }
+              }
+            } else if (loadingElement.loading.hide) {
+              loadingElement.hide();
+            } else if (loadingElement.loading.show) {
+              loadingElement.show();
             }
-          }
+          });
 
           if (action.key) {
             if (action.key === toKebabCase(event.key)) {

django_unicorn/static/js/utils.js

@@ -113,9 +113,8 @@ export function walk(el, callback) {
   }
 }
 
-
 export function args(func) {
-  func = func.trim()
+  func = func.trim();
 
   if (!contains(func, "(") || !func.endsWith(")")) {
     return [];
@@ -136,7 +135,7 @@ export function args(func) {
   for (let idx = 0; idx < func.length; idx++) {
     const c = func.charAt(idx);
     currentArg += c;
-    
+
     if (c === "[") {
       bracketCount++;
     } else if (c === "]") {
@@ -151,10 +150,15 @@ export function args(func) {
       curlyCount--;
     } else if (c === "'") {
       inSingleQuote = !inSingleQuote;
-    } else if (c === "\"") {
+    } else if (c === '"') {
       inDoubleQuote = !inDoubleQuote;
     } else if (c === ",") {
-      if (!inSingleQuote && !inDoubleQuote && bracketCount === 0 && parenthesisCount === 0) {
+      if (
+        !inSingleQuote &&
+        !inDoubleQuote &&
+        bracketCount === 0 &&
+        parenthesisCount === 0
+      ) {
         // Remove the trailing comma
         currentArg = currentArg.slice(0, currentArg.length - 1);
 
@@ -164,7 +168,12 @@ export function args(func) {
     }
 
     if (idx === func.length - 1) {
-      if (!inSingleQuote && !inDoubleQuote && bracketCount === 0 && parenthesisCount === 0) {
+      if (
+        !inSingleQuote &&
+        !inDoubleQuote &&
+        bracketCount === 0 &&
+        parenthesisCount === 0
+      ) {
         functionArgs.push(currentArg.trim());
         currentArg = "";
       }