Added onClick and onEvent shorthand event handlers to reduce duplicate code.

src/ignite-template.js

@@ -139,6 +139,59 @@ class IgniteTemplate {
         return this;
     }
 
+    onClick(func) {
+        this.on("click", func);
+
+        return this;
+    }
+
+    onEnter(func) {
+        var eventName = "keydown";
+
+        if (!this.events[eventName]) {
+            this.events[eventName] = [];
+        }
+
+        if (func instanceof IgniteProperty) {
+            this.callbacks.push(func.attach((oldValue, newValue) => {
+                //Create a new wrapped function to check for the enter key being pressed.
+                var wrapped = (e) => {
+                    if (e.key === 'Enter') {
+                        newValue(e);
+                    }
+                };
+
+                //Store the wrapped functino so that it's the old value next time around
+                //and the old event can be removed in the future
+                func._value = wrapped;
+
+                //Invoke the on event changed with the old value and our wrapped value.
+                this.onEventChanged(oldValue, wrapped, eventName)
+            }));
+
+            //Create the initial wrapper
+            var old = func._value;
+            var wrapped = (e) => {
+                if (e.key === 'Enter') {
+                    old(e);
+                }
+            };
+
+            //Store the wrapped so that it's the old value next time around.
+            func._value = wrapped;
+
+            this.events[eventName].push(wrapped);
+        } else {
+            this.on(eventName, (e) => {
+                if (e.key === 'Enter') {
+                    func(e);
+                }
+            });
+        }
+
+        return this;
+    }
+
     /**
      * Sets a css style on this template and adds it to the element
      * once it's constructed.
@@ -414,6 +467,14 @@ class a extends IgniteTemplate {
     }
 }
 
+class input extends IgniteTemplate {
+    constructor(...items) {
+        super(items);
+
+        this.tagName = "input";
+    }
+}
+
 class html extends IgniteTemplate {
     constructor(code) {
         super([]);
@@ -583,5 +644,6 @@ export {
     html,
     list,
     a,
+    input,
     slot
 };

src/sheet.js

@@ -1,5 +1,5 @@
 import { IgniteElement } from './ignite-element.js';
-import { IgniteTemplate, div, html, list, a, slot } from './ignite-template.js';
+import { IgniteTemplate, div, html, list, a, slot, input } from './ignite-template.js';
 
 class Sheet extends IgniteElement {
     constructor() {
@@ -14,7 +14,8 @@ class Sheet extends IgniteElement {
             name: "default content",
             color: "red",
             linkClick: this.onClick1,
-            linkClick2: this.onClick2
+            linkClick2: this.onClick2,
+            enter: this.onEnter,
         };
     }
 
@@ -32,6 +33,7 @@ class Sheet extends IgniteElement {
             .class(this.show)
             .child(
                 new div(
+                    new input().attribute("type", "text").onEnter(this.enter),
                     new html("<h2>this is before</h2>"),
                     new list(this.items, (item) => {
                         return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
@@ -54,6 +56,10 @@ class Sheet extends IgniteElement {
     onClick2(event) {
         console.log("Element was clicked 2!");
     }
+
+    onEnter(event) {
+        console.log("Enter was pressed!");
+    }
 }
 
 class SheetTemplate extends IgniteTemplate {