63 lines
No EOL
2.2 KiB
JavaScript
63 lines
No EOL
2.2 KiB
JavaScript
// ::- Represents a submenu wrapping a group of elements that start
|
|
// hidden and expand to the right when hovered over or tapped.
|
|
import {prefix, renderItems} from "./menu-utils";
|
|
import crel from "crelt";
|
|
import {getIcon, icons} from "./icons";
|
|
|
|
class DialogBox {
|
|
// :: ([MenuElement], ?Object)
|
|
// The following options are recognized:
|
|
//
|
|
// **`label`**`: string`
|
|
// : The label to show on the dialog.
|
|
// **`closer`**`: function`
|
|
// : The function to run when the dialog should close.
|
|
constructor(content, options) {
|
|
this.options = options || {};
|
|
this.content = Array.isArray(content) ? content : [content];
|
|
|
|
this.closeMouseDownListener = null;
|
|
this.wrap = null;
|
|
}
|
|
|
|
// :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
|
|
// Renders the submenu.
|
|
render(view) {
|
|
const items = renderItems(this.content, view)
|
|
|
|
const titleText = crel("div", {class: prefix + "-dialog-title-text"}, this.options.label);
|
|
const titleClose = crel("button", {class: prefix + "-dialog-title-close primary-background", type: "button"}, getIcon(icons.close));
|
|
const titleContent = crel("div", {class: prefix + "-dialog-title"}, titleText, titleClose);
|
|
const dialog = crel("div", {class: prefix + "-dialog"}, titleContent,
|
|
crel("div", {class: prefix + "-dialog-content"}, items.dom));
|
|
const wrap = crel("div", {class: prefix + "-dialog-wrap"}, dialog);
|
|
this.wrap = wrap;
|
|
|
|
this.closeMouseDownListener = (event) => {
|
|
if (!dialog.contains(event.target) || titleClose.contains(event.target)) {
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
wrap.addEventListener("click", this.closeMouseDownListener);
|
|
|
|
function update(state) {
|
|
let inner = items.update(state)
|
|
wrap.style.display = inner ? "" : "none"
|
|
return inner;
|
|
}
|
|
return {dom: wrap, update}
|
|
}
|
|
|
|
close() {
|
|
if (this.options.closer) {
|
|
this.options.closer();
|
|
}
|
|
|
|
if (this.closeMouseDownListener) {
|
|
this.wrap.removeEventListener("click", this.closeMouseDownListener);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default DialogBox; |