BookStack Code Mirror - bookstack/blob - resources/js/editor/menu/DialogForm.js

   1 // ::- Represents a submenu wrapping a group of elements that start
   2 // hidden and expand to the right when hovered over or tapped.
   3 import {prefix, renderItems} from "./menu-utils";
   4 import crel from "crelt";
   5
   6 class DialogForm {
   7     // :: ([MenuElement], ?Object)
   8     // The following options are recognized:
   9     //
  10     // **`action`**`: function(FormData)`
  11     //   : The submission action to run when the form is submitted.
  12     // **`canceler`**`: function`
  13     //   : The cancel action to run when the form is cancelled.
  14     constructor(content, options) {
  15         this.options = options || {};
  16         this.content = Array.isArray(content) ? content : [content];
  17     }
  18
  19     // :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
  20     // Renders the submenu.
  21     render(view) {
  22         const items = renderItems(this.content, view)
  23
  24         const formButtonCancel = crel("button", {class: prefix + "-dialog-button", type: "button"}, "Cancel");
  25         const formButtonSave = crel("button", {class: prefix + "-dialog-button", type: "submit"}, "Save");
  26         const footer = crel("div", {class: prefix + "-dialog-footer"}, formButtonCancel, formButtonSave);
  27         const form = crel("form", {class: prefix + "-dialog-form", action: '#'}, items.dom, footer);
  28
  29         form.addEventListener('submit', event => {
  30             event.preventDefault();
  31             if (this.options.action) {
  32                 this.options.action(new FormData(form));
  33             }
  34         });
  35
  36         formButtonCancel.addEventListener('click', event => {
  37             if (this.options.canceler) {
  38                 this.options.canceler();
  39             }
  40         });
  41
  42         function update(state) {
  43             return items.update(state);
  44         }
  45
  46         return {dom: form, update}
  47     }
  48
  49 }
  50
  51 export default DialogForm;