Add support for multiple actions. #50

Author: adamghill

django_unicorn/static/js/component.js

@@ -82,7 +82,7 @@ export class Component {
     document.addEventListener(eventType, (event) => {
       const targetElement = new Element(event.target);
 
-      if (targetElement && targetElement.isUnicorn && !isEmpty(targetElement.action)) {
+      if (targetElement && targetElement.isUnicorn && targetElement.actions.length > 0) {
         this.actionEvents[eventType].forEach((element) => {
           // Use isSameNode (not isEqualNode) because we want to check the nodes reference the same object
           if (targetElement.el.isSameNode(element.el)) {
@@ -91,21 +91,23 @@ export class Component {
               this.actionQueue.push(action);
             }
 
-            if (element.action.isPrevent) {
-              event.preventDefault();
-            }
+            element.actions.forEach((action) => {
+              if (action.isPrevent) {
+                event.preventDefault();
+              }
 
-            if (element.action.isStop) {
-              event.stopPropagation();
-            }
+              if (action.isStop) {
+                event.stopPropagation();
+              }
 
-            if (element.action.key) {
-              if (element.action.key === toKebabCase(event.key)) {
-                this.callMethod(element.action.name);
+              if (action.key) {
+                if (action.key === toKebabCase(event.key)) {
+                  this.callMethod(action.name);
+                }
+              } else {
+                this.callMethod(action.name);
               }
-            } else {
-              this.callMethod(element.action.name);
-            }
+            });
           }
         });
       }
@@ -174,18 +176,18 @@ export class Component {
           }
         }
 
-        if (!isEmpty(element.action)) {
-          if (this.actionEvents[element.action.eventType]) {
-            this.actionEvents[element.action.eventType].push(element);
+        element.actions.forEach((action) => {
+          if (this.actionEvents[action.eventType]) {
+            this.actionEvents[action.eventType].push(element);
           } else {
-            this.actionEvents[element.action.eventType] = [element];
+            this.actionEvents[action.eventType] = [element];
 
-            if (this.attachedEventTypes.filter((et) => et === element.action.eventType).length === 0) {
-              this.attachedEventTypes.push(element.action.eventType);
-              this.addActionEventListener(element.action.eventType);
+            if (this.attachedEventTypes.filter((et) => et === action.eventType).length === 0) {
+              this.attachedEventTypes.push(action.eventType);
+              this.addActionEventListener(action.eventType);
             }
           }
-        }
+        });
       }
     });
   }

django_unicorn/static/js/element.js

@@ -20,7 +20,7 @@ export class Element {
 
     this.model = {};
     this.poll = {};
-    this.action = {};
+    this.actions = [];
 
     this.key = undefined;
     this.errors = [];
@@ -47,23 +47,26 @@ export class Element {
         this.poll.method = attribute.value ? attribute.value : "refresh";
         this.poll.timing = parseInt(Object.keys(attribute.modifiers)[0], 10) || 2000;
       } else if (attribute.eventType) {
-        this.action.name = attribute.value;
-        this.action.eventType = attribute.eventType;
-        this.action.isPrevent = false;
-        this.action.isStop = false;
+        const action = {};
+        action.name = attribute.value;
+        action.eventType = attribute.eventType;
+        action.isPrevent = false;
+        action.isStop = false;
 
         if (attribute.modifiers) {
           Object.keys(attribute.modifiers).forEach((modifier) => {
             if (modifier === "prevent") {
-              this.action.isPrevent = true;
+              action.isPrevent = true;
             } else if (modifier === "stop") {
-              this.action.isStop = true;
+              action.isStop = true;
             } else {
               // Assume the modifier is a keycode
-              this.action.key = modifier;
+              action.key = modifier;
             }
           });
         }
+
+        this.actions.push(action);
       }
 
       if (attribute.isKey) {

example/unicorn/templates/unicorn/text-inputs.html

@@ -30,6 +30,9 @@
     <label>Chained lazy and debounce-500</label>
     <input unicorn:model.lazy.debounce-500="name" type="text" id="lazyDebounceName">
 
+    <label>Multiple actions</label>
+    <input unicorn:model="name" type="text" unicorn:keyup.enter="name='enter'" unicorn:keydown.escape="name=''"></input>
+
     <br />
     <button unicorn:click="set_name">set_name</button>
     <button unicorn:click="set_name()">set_name()</button>

tests/js/element/action.test.js

@@ -5,33 +5,46 @@ test("click", (t) => {
   const html = "<button unicorn:click='test()'></button>";
   const element = getElement(html);
 
-  t.is(element.action.name, "test()");
-  t.is(element.action.eventType, "click");
+  const action = element.actions[0];
+  t.is(action.name, "test()");
+  t.is(action.eventType, "click");
 });
 
 test("keydown.enter", (t) => {
   const html = "<input unicorn:keydown.enter='test()'></input>";
   const element = getElement(html);
 
-  t.is(element.action.name, "test()");
-  t.is(element.action.eventType, "keydown");
-  t.is(element.action.key, "enter");
+  const action = element.actions[0];
+  t.is(action.name, "test()");
+  t.is(action.eventType, "keydown");
+  t.is(action.key, "enter");
 });
 
 test("click.prevent", (t) => {
   const html = "<a href='#' unicorn:click.prevent='test()'>Test()</a>";
   const element = getElement(html);
 
-  t.true(element.action.isPrevent);
-  t.is(element.action.eventType, "click");
-  t.is(element.action.key, undefined);
+  const action = element.actions[0];
+  t.true(action.isPrevent);
+  t.is(action.eventType, "click");
+  t.is(action.key, undefined);
 });
 
 test("click.stop", (t) => {
   const html = "<a href='#' unicorn:click.stop='test()'>Test()</a>";
   const element = getElement(html);
 
-  t.true(element.action.isStop);
-  t.is(element.action.eventType, "click");
-  t.is(element.action.key, undefined);
+  const action = element.actions[0];
+  t.true(action.isStop);
+  t.is(action.eventType, "click");
+  t.is(action.key, undefined);
+});
+
+test("multiple actions", (t) => {
+  const html = "<input unicorn:keyup.enter='add' unicorn:keydown.escape='clear'></input>";
+  const element = getElement(html);
+
+  t.true(element.actions.length === 2);
+  t.true(element.actions[0].eventType === "keyup");
+  t.true(element.actions[1].eventType === "keydown");
 });

tests/js/element/init.test.js

@@ -27,21 +27,21 @@ test("unicorn:id is not an action", (t) => {
   const element = getElement(html);
 
   t.true(element.isUnicorn);
-  t.deepEqual(element.action, {});
+  t.is(element.actions.length, 0);
 });
 
 test("unicorn:key is not an action", (t) => {
   const html = "<div unicorn:key='hjkl'></div>";
   const element = getElement(html);
 
   t.true(element.isUnicorn);
-  t.deepEqual(element.action, {});
+  t.is(element.actions.length, 0);
 });
 
 test("unicorn:checksum is not an action", (t) => {
   const html = "<div unicorn:checksum='fghj'></div>";
   const element = getElement(html);
 
   t.true(element.isUnicorn);
-  t.deepEqual(element.action, {});
+  t.is(element.actions.length, 0);
 });

tests/js/utils/morphdom.test.js

@@ -10,7 +10,7 @@ test("contains", (t) => {
   Name: 
 </div>
   `;
-  let componentRoot = getEl(componentRootHtml);
+  const componentRoot = getEl(componentRootHtml);
 
   const rerenderedComponentHtml = `
 <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">

tests/js/utils/toKebobCase.test.js renamed to tests/js/utils/toKebabCase.test.js

@@ -12,3 +12,7 @@ test("Escape to kebab case", (t) => {
 test("Null to empty string", (t) => {
   t.is(toKebabCase(null), "");
 });
+
+test("Empty string to empty string", (t) => {
+  t.is(toKebabCase(""), "");
+});