Added code editor changes mobile design handling

[bookstack] / resources / js / components / ajax-form.js

diff --git a/resources/js/components/ajax-form.js b/resources/js/components/ajax-form.js
index 92b19dcffd67ae2deea43aecb9ebfbc2d46a5d33..91029d04221247cbc4b079fd3d807a4eb25cb93f 100644 (file)
--- a/resources/js/components/ajax-form.js
+++ b/resources/js/components/ajax-form.js
@@ -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;
     }
 
 }