github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-23 23:29:59 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Converted image-manager to be component/HTML based

Browse Source 
Instead of vue based.
This commit is contained in:
Dan Brown
2020-07-25 00:20:58 +01:00
parent b6aa232205
commit 02dc3154e3
23 changed files with 483 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
resources/js/components/ajax-form.js
View File

@ -5,52 +5,76 @@ import {onEnterPress, onSelect} from "../services/dom";
* Will handle button clicks or input enter press events and submit
* the data over ajax. Will always expect a partial HTML view to be returned.
* Fires an 'ajax-form-success' event when submitted successfully.
*
* Will handle a real form if that's what the component is added to
* otherwise will act as a fake form element.
*
* @extends {Component}
*/
class AjaxForm {
setup() {
this.container = this.$el;
this.responseContainer = this.container;
this.url = this.$opts.url;
this.method = this.$opts.method || 'post';
this.successMessage = this.$opts.successMessage;
this.submitButtons = this.$manyRefs.submit || [];
if (this.$opts.responseContainer) {
this.responseContainer = this.container.closest(this.$opts.responseContainer);
}
this.setupListeners();
}
setupListeners() {
if (this.container.tagName === 'FORM') {
this.container.addEventListener('submit', this.submitRealForm.bind(this));
return;
}
onEnterPress(this.container, event => {
this.submit();
this.submitFakeForm();
event.preventDefault();
});
this.submitButtons.forEach(button => onSelect(button, this.submit.bind(this)));
this.submitButtons.forEach(button => onSelect(button, this.submitFakeForm.bind(this)));
}
async submit() {
submitFakeForm() {
const fd = new FormData();
const inputs = this.container.querySelectorAll(`[name]`);
console.log(inputs);
for (const input of inputs) {
fd.append(input.getAttribute('name'), input.value);
}
this.submit(fd);
}
submitRealForm(event) {
event.preventDefault();
const fd = new FormData(this.container);
this.submit(fd);
}
async submit(formData) {
this.responseContainer.style.opacity = '0.7';
this.responseContainer.style.pointerEvents = 'none';
this.container.style.opacity = '0.7';
this.container.style.pointerEvents = 'none';
try {
const resp = await window.$http[this.method.toLowerCase()](this.url, fd);
this.container.innerHTML = resp.data;
this.$emit('success', {formData: fd});
const resp = await window.$http[this.method.toLowerCase()](this.url, formData);
this.$emit('success', {formData});
this.responseContainer.innerHTML = resp.data;
if (this.successMessage) {
window.$events.emit('success', this.successMessage);
}
} catch (err) {
this.container.innerHTML = err.data;
this.responseContainer.innerHTML = err.data;
}
window.components.init(this.container);
this.container.style.opacity = null;
this.container.style.pointerEvents = null;
window.components.init(this.responseContainer);
this.responseContainer.style.opacity = null;
this.responseContainer.style.pointerEvents = null;
}
}