added new Event for form handling

This commit is contained in:
Florian Bouillon 2020-06-16 15:43:07 +02:00
parent 228a565b8c
commit 267aba9c8f
2 changed files with 42 additions and 4 deletions

View File

@ -20,6 +20,7 @@ export default class AttributesManager {
for (const attr of attribute) { for (const attr of attribute) {
this.attributesArray.push(attr.identity) this.attributesArray.push(attr.identity)
} }
return this
} }
public trigger(event: AttributeListeners, data?: any): boolean { public trigger(event: AttributeListeners, data?: any): boolean {

View File

@ -70,9 +70,17 @@ export default class FormManager {
this.attributeManager = new AttributesManager(this) this.attributeManager = new AttributesManager(this)
//Prevent default submit action //Prevent default submit action
form.addEventListener("submit", (e: Event) => { form.addEventListener("submit", (e: Event & {submitter?: HTMLInputElement & {formmethod?: string, action?: string}}) => {
e.preventDefault() e.preventDefault()
onSubmit && onSubmit(this) form.dispatchEvent(new Event('submitStart'))
if (onSubmit) {
return onSubmit(this)
}
const submitUrl: string = e.submitter && e.submitter.action || form.action || window.location.toString()
const method: string = e.submitter && e.submitter.formmethod || form.getAttribute('method') || 'POST'
this.send(submitUrl, undefined, {
method: method
})
}) })
//assign default form interface //assign default form interface
@ -93,6 +101,7 @@ export default class FormManager {
for (const input of inter) { for (const input of inter) {
this.FMInputs.unshift(input.identity) this.FMInputs.unshift(input.identity)
} }
return this
} }
/** /**
@ -113,6 +122,7 @@ export default class FormManager {
if (el) this.inputs[el.getName()] = el if (el) this.inputs[el.getName()] = el
}); });
this.attributeManager.trigger(AttributeListeners.FORM_INIT) this.attributeManager.trigger(AttributeListeners.FORM_INIT)
return this
} }
/** /**
@ -198,7 +208,10 @@ export default class FormManager {
let datas = this.getJSON() let datas = this.getJSON()
// Verify datas // Verify datas
if ((options.verify === undefined || (typeof options.verify === "boolean" && options.verify)) && !this.verify()) return false if ((options.verify === undefined || (typeof options.verify === "boolean" && options.verify)) && !this.verify()) {
this.form.dispatchEvent(new Event('submitError'))
return false
}
// Trigger Event // Trigger Event
const ev = this.attributeManager.trigger(AttributeListeners.FORM_SUBMIT, datas) const ev = this.attributeManager.trigger(AttributeListeners.FORM_SUBMIT, datas)
@ -208,7 +221,10 @@ export default class FormManager {
const ajax = new XMLHttpRequest const ajax = new XMLHttpRequest
ajax.open(options.method || "POST", url) ajax.open(options.method || "POST", url)
ajax.setRequestHeader("Content-Type", "application/json") ajax.setRequestHeader("Content-Type", "application/json")
ajax.addEventListener("loadend", callback || (() => {})) callback && ajax.addEventListener("loadend", callback)
ajax.addEventListener('loadend', (ev) => {
this.form.dispatchEvent(new CustomEvent('submitEnd', {detail: ajax}))
})
ajax.send(JSON.stringify(datas)) ajax.send(JSON.stringify(datas))
return true return true
} }
@ -226,7 +242,28 @@ export default class FormManager {
} }
const input = this.inputs[name] const input = this.inputs[name]
input.setValue(value) input.setValue(value)
return this
} }
public setJSON(data: {[key:string]: any}) {
for (const key in data) {
if (!data.hasOwnProperty(key)) {
continue
}
const value = data[key]
this.setValue(key, value)
}
return this
}
public getValue(name: string): any {
if (!this.inputs.hasOwnProperty(name)) {
return
}
return this.inputs[name].getValue()
}
/** /**
* Return the JSON `{key: value}` sequence * Return the JSON `{key: value}` sequence
* *