Add attr, class, remove class loading.

Author: adamghill

django_unicorn/static/js/attribute.js

@@ -12,6 +12,7 @@ export class Attribute {
     this.isModel = false;
     this.isField = false;
     this.isPoll = false;
+    this.isLoading = false;
     this.isKey = false;
     this.isPK = false;
     this.isError = false;
@@ -37,6 +38,8 @@ export class Attribute {
         this.isDb = true;
       } else if (contains(this.name, ":poll")) {
         this.isPoll = true;
+      } else if (contains(this.name, ":loading")) {
+        this.isLoading = true;
       } else if (this.name === "unicorn:key" || this.name === "u:key") {
         this.isKey = true;
       } else if (this.name === "unicorn:pk" || this.name === "u:pk") {

django_unicorn/static/js/element.js

@@ -26,6 +26,7 @@ export class Element {
 
     this.model = {};
     this.poll = {};
+    this.loading = {};
     this.actions = [];
     this.db = {};
     this.field = {};
@@ -74,6 +75,14 @@ export class Element {
         if (pollArgs.length > 0) {
           this.poll.timing = parseInt(pollArgs[0], 10) || 2000;
         }
+      } else if (attribute.isLoading) {
+        if (attribute.modifiers.attr) {
+          this.loading.attr = attribute.value;
+        } else if (attribute.modifiers.class && attribute.modifiers.remove) {
+          this.loading.removeClass = attribute.value;
+        } else if (attribute.modifiers.class) {
+          this.loading.class = attribute.value;
+        }
       } else if (attribute.eventType) {
         const action = {};
         action.name = attribute.value;

django_unicorn/static/js/eventListeners.js

@@ -123,6 +123,20 @@ export function addActionEventListener(component, eventType) {
             }
           });
 
+          if (targetElement.loading) {
+            if (targetElement.loading.attr) {
+              targetElement.el[targetElement.loading.attr] = targetElement.loading.attr;
+            }
+
+            if (targetElement.loading.class) {
+              targetElement.el.classList.add(targetElement.loading.class);
+            }
+
+            if (targetElement.loading.removeClass) {
+              targetElement.el.classList.remove(targetElement.loading.removeClass);
+            }
+          }
+
           if (action.key) {
             if (action.key === toKebabCase(event.key)) {
               component.callMethod(action.name);

tests/js/element/loading.test.js

@@ -0,0 +1,23 @@
+import test from "ava";
+import { getElement } from "../utils.js";
+
+test("loading class", (t) => {
+  const html = "<div u:click='update()' u:loading.class='loading'></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.class, "loading");
+});
+
+test("loading remove class", (t) => {
+  const html = "<div u:click='update()' u:loading.class.remove='unloading'></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.removeClass, "unloading");
+});
+
+test("loading attr", (t) => {
+  const html = "<div u:click='update()' u:loading.attr='disabled'></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.attr, "disabled");
+});