feat(form): submit

serifine · serifine · commit 0bc8799fe6d3 · 2017-03-31T16:49:40.000-05:00
add submit function on the form, add ux-submit directive to allow elements to trigger a forms submit.
diff --git a/src/form/ux-field.ts b/src/form/ux-field.ts
@@ -33,10 +33,6 @@ export class UxField implements Themable {
         }
     }
 
-    // public attached() { }
-
-    // public detached() { }
-
     public themeChanged(newValue: any) {
         this.styleEngine.applyTheme(this, newValue);
     }
diff --git a/src/form/ux-form-theme.css b/src/form/ux-form-theme.css
@@ -10,7 +10,8 @@ styles.form .form-row {
 }
 
 styles.form .form-row>* {    
-  margin: 0 8px;
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 styles.form .form-row>*:last-child {
diff --git a/src/form/ux-form.ts b/src/form/ux-form.ts
@@ -1,19 +1,21 @@
 import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
+import { DOM } from 'aurelia-pal';
 import { inject } from 'aurelia-dependency-injection';
 import { StyleEngine } from '../styles/style-engine';
 import { Themable } from '../styles/themable';
 import { processDesignAttributes } from '../designs/design-attributes';
 
-@inject(ViewResources, StyleEngine)
+@inject(Element, ViewResources, StyleEngine)
 @customElement('ux-form')
 @processAttributes(processDesignAttributes)
 
 export class UxForm implements Themable {
     @bindable public theme = null;
+    @bindable public submit: any;
 
     public view: View;
 
-    constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
+    constructor(private element: Element, public resources: ViewResources, private styleEngine: StyleEngine) { }
 
     public created(_: any, myView: View) {
         this.view = myView;
@@ -25,12 +27,15 @@ export class UxForm implements Themable {
         }
     }
 
-    // public attached() { }
-
-    // public detached() { }
-
-
     public themeChanged(newValue: any) {
         this.styleEngine.applyTheme(this, newValue);
     }
+
+    public submitForm() {
+        if (this.submit) {
+            const submitEvent = DOM.createCustomEvent('submit', { bubbles: true, target: this.element });
+
+            this.element.dispatchEvent(submitEvent);
+        }
+    }
 }
diff --git a/src/form/ux-submit-attribute.ts b/src/form/ux-submit-attribute.ts
@@ -0,0 +1,38 @@
+import { inject } from 'aurelia-dependency-injection';
+import { DOM } from 'aurelia-pal';
+
+@inject(Element)
+export class UxSubmitCustomAttribute {
+    public submitEvent: CustomEvent;
+    private canSubmit: boolean = false;
+
+    constructor(public element: Element) { }
+
+    public attached() {
+        let currentParent = this.element.parentElement;
+
+        while (currentParent != null) {
+            if (currentParent.tagName === 'UX-FORM') {
+
+                this.canSubmit = true;
+                this.submitEvent = DOM.createCustomEvent('submit', { bubbles: true });
+
+                this.element.addEventListener('mouseup', () => {
+                    this.element.dispatchEvent(this.submitEvent);
+                });
+
+                break;
+            }
+
+            currentParent = currentParent.parentElement;
+        }
+    }
+
+    public detached() {
+        if (this.canSubmit) {
+            this.element.removeEventListener('mouseup', () => {
+                this.element.dispatchEvent(this.submitEvent);
+            });
+        }
+    }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -23,7 +23,8 @@ export function configure(config: FrameworkConfiguration, callback?: (config: Au
     './input-info/ux-input-info',
     './textarea/ux-textarea',
     './form/ux-form',
-    './form/ux-field'
+    './form/ux-field',
+    './form/ux-submit-attribute'
   ]);
 
   const ux = config.container.get(AureliaUX) as AureliaUX;

Original file line number	Diff line number	Diff line change
`@@ -33,10 +33,6 @@ export class UxField implements Themable {`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`36`		`- // public attached() { }`
`37`		`-`
`38`		`- // public detached() { }`
`39`		`-`
`40`	`36`	`public themeChanged(newValue: any) {`
`41`	`37`	`this.styleEngine.applyTheme(this, newValue);`
`42`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,8 @@ styles.form .form-row {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`styles.form .form-row>* {`
`13`		`- margin: 0 8px;`
	`13`	`+ margin-left: 8px;`
	`14`	`+ margin-right: 8px;`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`styles.form .form-row>*:last-child {`