Support multiple classes for loading states.

Author: adamghill

django_unicorn/static/js/element.js

@@ -84,9 +84,9 @@ export class Element {
         if (attribute.modifiers.attr) {
           this.loading.attr = attribute.value;
         } else if (attribute.modifiers.class && attribute.modifiers.remove) {
-          this.loading.removeClass = attribute.value;
+          this.loading.removeClasses = attribute.value.split(" ");
         } else if (attribute.modifiers.class) {
-          this.loading.class = attribute.value;
+          this.loading.classes = attribute.value.split(" ");
         } else if (attribute.modifiers.remove) {
           this.loading.hide = true;
         } else {
@@ -237,11 +237,15 @@ export class Element {
   handleLoading() {
     if (hasValue(this.loading)) {
       if (this.loading.attr) {
-        this.el[this.loading.attr] = this.loading.attr;
-      } else if (this.loading.class) {
-        this.el.classList.add(this.loading.class);
-      } else if (this.loading.removeClass) {
-        this.el.classList.remove(this.loading.removeClass);
+        this.el.setAttribute(this.loading.attr, this.loading.attr);
+      }
+
+      if (this.loading.classes) {
+        this.el.classList.add(...this.loading.classes);
+      }
+
+      if (this.loading.removeClasses) {
+        this.el.classList.remove(...this.loading.removeClasses);
       }
     }
   }

tests/js/element/loading.test.js

@@ -5,14 +5,37 @@ 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");
+  t.is(element.loading.classes.length, 1);
+  t.is(element.loading.classes[0], "loading");
+});
+
+test("loading multiple classes", (t) => {
+  const html =
+    "<div u:click='update()' u:loading.class='loading another'></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.classes.length, 2);
+  t.is(element.loading.classes[0], "loading");
+  t.is(element.loading.classes[1], "another");
 });
 
 test("loading remove class", (t) => {
-  const html = "<div u:click='update()' u:loading.class.remove='unloading'></div>";
+  const html =
+    "<div u:click='update()' u:loading.class.remove='unloading'></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.removeClasses.length, 1);
+  t.is(element.loading.removeClasses[0], "unloading");
+});
+
+test("loading multiple remove classes", (t) => {
+  const html =
+    "<div u:click='update()' u:loading.class.remove='unloading great'></div>";
   const element = getElement(html);
 
-  t.is(element.loading.removeClass, "unloading");
+  t.is(element.loading.removeClasses.length, 2);
+  t.is(element.loading.removeClasses[0], "unloading");
+  t.is(element.loading.removeClasses[1], "great");
 });
 
 test("loading attr", (t) => {