chore(client/ts): port abstract_button

This commit is contained in:
Elian Doran 2025-01-07 11:11:38 +02:00
parent 5a3a31ff1c
commit 6905e1536e
No known key found for this signature in database
2 changed files with 27 additions and 10 deletions

View File

@ -4,7 +4,22 @@ const TPL = `<button class="button-widget bx"
data-bs-toggle="tooltip"
title=""></button>`;
type TitlePlacement = "top" | "bottom" | "left" | "right";
type StringOrCallback = (() => string);
type ContextMenuHandler = (e: JQuery.ContextMenuEvent<any, any, any, any> | null) => void;
interface Settings {
titlePlacement: TitlePlacement;
title: string | StringOrCallback | null;
icon: string | StringOrCallback | null;
onContextMenu: ContextMenuHandler | null;
}
export default class AbstractButtonWidget extends NoteContextAwareWidget {
private settings: Settings;
private tooltip!: bootstrap.Tooltip;
isEnabled() {
return true;
}
@ -22,6 +37,8 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
// Fix once bootstrap is available as non-UMD
//@ts-ignore
this.tooltip = new bootstrap.Tooltip(this.$widget, {
html: true,
title: () => this.getTitle(),
@ -34,7 +51,9 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
this.$widget.on("contextmenu", e => {
this.tooltip.hide();
this.settings.onContextMenu(e);
if (this.settings.onContextMenu) {
this.settings.onContextMenu(e);
}
return false; // blocks default browser right click menu
});
@ -60,32 +79,31 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
? this.settings.icon()
: this.settings.icon;
this.$widget.addClass(icon);
if (icon) {
this.$widget.addClass(icon);
}
}
initialRenderCompleteEvent() {
this.refreshIcon();
}
/** @param {string|function} icon */
icon(icon) {
icon(icon: StringOrCallback) {
this.settings.icon = icon;
return this;
}
/** @param {string|function} title */
title(title) {
title(title: StringOrCallback) {
this.settings.title = title;
return this;
}
/** @param {string} placement - "top", "bottom", "left", "right" */
titlePlacement(placement) {
titlePlacement(placement: TitlePlacement) {
this.settings.titlePlacement = placement;
return this;
}
onContextMenu(handler) {
onContextMenu(handler: ContextMenuHandler) {
this.settings.onContextMenu = handler;
return this;
}

View File

@ -15,7 +15,6 @@ const WIDGET_TPL = `
/**
* This widget manages rendering panels in the right-hand pane.
* @extends {NoteContextAwareWidget}
*/
class RightPanelWidget extends NoteContextAwareWidget {