mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add link support to menu

Browse source 
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-05-31 22:53:00 +05:30
parent 426d0779ee
commit 1e96b58f85
2 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/platform/web/ui/general/Menu.js
View file

@ -15,10 +15,19 @@ limitations under the License.
*/ */
import {TemplateView} from "./TemplateView.js"; import {TemplateView} from "./TemplateView.js";
import { tag } from "./html.js";
export class Menu extends TemplateView { export class Menu extends TemplateView {
static option(label, callback) { static optionWithButton(label, callback) {
return new MenuOption(label, callback); const option = new MenuOption(label);
option.setCallback(callback);
return option;
}
static optionWithLink(label, link) {
const option = new MenuOption(label);
option.setLink(link);
return option;
} }
constructor(options) { constructor(options) {
@ -26,6 +35,15 @@ export class Menu extends TemplateView {
this._options = options; this._options = options;
} }
_convertToDOM(option) {
if (option.callback) {
return tag.button({ onClick: option.callback }, option.label);
}
else if (option.link) {
return tag.a({ href: option.link }, option.label);
}
}
render(t) { render(t) {
return t.ul({className: "menu", role: "menu"}, this._options.map(o => { return t.ul({className: "menu", role: "menu"}, this._options.map(o => {
const className = { const className = {
@ -37,19 +55,26 @@ export class Menu extends TemplateView {
} }
return t.li({ return t.li({
className, className,
}, t.button({onClick: o.callback}, o.label)); }, this._convertToDOM(o));
})); }));
} }
} }
class MenuOption { class MenuOption {
constructor(label, callback) { constructor(label) {
this.label = label; this.label = label;
this.callback = callback;
this.icon = null; this.icon = null;
this.destructive = false; this.destructive = false;
} }
setCallback(callback) {
this.callback = callback;
}
setLink(link) {
this.link = link;
}
setIcon(className) { setIcon(className) {
this.icon = className; this.icon = className;
return this; return this;

6
src/platform/web/ui/session/room/RoomView.js
View file

@ -69,13 +69,13 @@ export class RoomView extends TemplateView {
const vm = this.value; const vm = this.value;
const options = []; const options = [];
if (vm.canLeave) { if (vm.canLeave) {
options.push(Menu.option(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive()); options.push(Menu.optionWithButton(vm.i18n`Leave room`, () => vm.leaveRoom()).setDestructive());
} }
if (vm.canForget) { if (vm.canForget) {
options.push(Menu.option(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive()); options.push(Menu.optionWithButton(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive());
} }
if (vm.canRejoin) { if (vm.canRejoin) {
options.push(Menu.option(vm.i18n`Rejoin room`, () => vm.rejoinRoom())); options.push(Menu.optionWithButton(vm.i18n`Rejoin room`, () => vm.rejoinRoom()));
} }
if (!options.length) { if (!options.length) {
return; return;