mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2025-01-11 12:37:22 +01:00
Add link support to menu
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
parent
426d0779ee
commit
1e96b58f85
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user