toggle popup menu

This commit is contained in:
Bruno Windels 2020-11-18 20:18:09 +01:00
parent 59a92bdf97
commit 18407e17a8
2 changed files with 38 additions and 26 deletions

View file

@ -60,14 +60,21 @@ export class Popup {
}, 10); }, 10);
} }
get isOpen() {
return !!this._view;
}
close() { close() {
this._view.unmount(); if (this._view) {
this._trackingTemplateView.removeSubView(this); this._view.unmount();
if (this._scroller) { this._trackingTemplateView.removeSubView(this);
document.body.removeEventListener("scroll", this, true); if (this._scroller) {
document.body.removeEventListener("scroll", this, true);
}
document.body.removeEventListener("click", this, false);
this._popup.remove();
this._view = null;
} }
document.body.removeEventListener("click", this, false);
this._popup.remove();
} }
get _popup() { get _popup() {

View file

@ -22,6 +22,7 @@ export class MessageComposer extends TemplateView {
constructor(viewModel) { constructor(viewModel) {
super(viewModel); super(viewModel);
this._input = null; this._input = null;
this._attachmentPopup = null;
} }
render(t, vm) { render(t, vm) {
@ -35,7 +36,7 @@ export class MessageComposer extends TemplateView {
t.button({ t.button({
className: "sendFile", className: "sendFile",
title: vm.i18n`Pick attachment`, title: vm.i18n`Pick attachment`,
onClick: evt => this._showAttachmentMenu(evt), onClick: evt => this._toggleAttachmentMenu(evt),
}, vm.i18n`Send file`), }, vm.i18n`Send file`),
t.button({ t.button({
className: "send", className: "send",
@ -59,24 +60,28 @@ export class MessageComposer extends TemplateView {
} }
} }
_showAttachmentMenu(evt) { _toggleAttachmentMenu(evt) {
const vm = this.value; if (this._attachmentPopup && this._attachmentPopup.isOpen) {
const popup = new Popup(new Menu([ this._attachmentPopup.close();
Menu.option(vm.i18n`Send picture`, () => vm.sendPicture()).setIcon("picture"), } else {
Menu.option(vm.i18n`Send file`, () => vm.sendFile()).setIcon("file"), const vm = this.value;
])); this._attachmentPopup = new Popup(new Menu([
popup.trackInTemplateView(this); Menu.option(vm.i18n`Send picture`, () => vm.sendPicture()).setIcon("picture"),
popup.showRelativeTo(evt.target, { Menu.option(vm.i18n`Send file`, () => vm.sendFile()).setIcon("file"),
horizontal: { ]));
relativeTo: "end", this._attachmentPopup.trackInTemplateView(this);
align: "start", this._attachmentPopup.showRelativeTo(evt.target, {
after: 0 horizontal: {
}, relativeTo: "end",
vertical: { align: "start",
relativeTo: "end", after: 0
align: "start", },
before: 8, vertical: {
} relativeTo: "end",
}); align: "start",
before: 8,
}
});
}
} }
} }