Notes/src/public/app/widgets/buttons/abstract_button.js

92 lines
2.1 KiB
JavaScript
Raw Normal View History

2021-05-24 22:29:49 +02:00
import NoteContextAwareWidget from "../note_context_aware_widget.js";
2021-05-18 22:14:35 +02:00
2022-12-11 13:20:37 +01:00
const TPL = `<button class="button-widget no-print" data-toggle="tooltip">
<span class="bx"></span>
</button>`;
2021-05-18 22:14:35 +02:00
2022-12-02 16:46:14 +01:00
export default class AbstractButtonWidget extends NoteContextAwareWidget {
2021-05-24 22:29:49 +02:00
isEnabled() {
return true;
}
2021-05-18 22:14:35 +02:00
constructor() {
super();
2021-05-22 22:55:24 +02:00
this.settings = {
2022-11-25 15:29:57 +01:00
titlePlacement: 'right',
title: null,
icon: null,
onContextMenu: null
2021-05-22 22:55:24 +02:00
};
2021-05-18 22:14:35 +02:00
}
doRender() {
this.$widget = $(TPL);
2022-12-11 13:20:37 +01:00
this.$iconSpan = this.$widget.find("span");
2021-05-18 22:14:35 +02:00
2022-11-25 15:29:57 +01:00
if (this.settings.onContextMenu) {
this.$widget.on("contextmenu", e => {
this.$widget.tooltip("hide");
this.settings.onContextMenu(e);
});
}
2021-05-23 20:26:54 +02:00
this.$widget.attr("data-placement", this.settings.titlePlacement);
2021-05-18 22:14:35 +02:00
2021-05-22 21:51:40 +02:00
this.$widget.tooltip({
html: true,
2022-12-02 16:46:14 +01:00
title: () => this.getTitle(),
2021-07-05 08:59:36 +02:00
trigger: "hover"
2021-05-22 21:51:40 +02:00
});
2021-05-18 22:14:35 +02:00
super.doRender();
}
2022-12-02 16:46:14 +01:00
getTitle() {
return typeof this.settings.title === "function"
? this.settings.title()
: this.settings.title;
}
2021-05-18 22:14:35 +02:00
refreshIcon() {
2022-12-11 13:20:37 +01:00
for (const className of this.$iconSpan[0].classList) {
2021-05-28 22:47:59 +02:00
if (className.startsWith("bx-")) {
2022-12-11 13:20:37 +01:00
this.$iconSpan.removeClass(className);
2021-05-28 22:47:59 +02:00
}
}
2022-12-02 16:46:14 +01:00
const icon = typeof this.settings.icon === "function"
? this.settings.icon()
: this.settings.icon;
2022-12-11 13:20:37 +01:00
this.$iconSpan.addClass(icon);
2021-05-22 21:35:25 +02:00
}
initialRenderCompleteEvent() {
this.refreshIcon();
2021-05-18 22:14:35 +02:00
}
2022-12-02 16:46:14 +01:00
/** @param {string|function} icon */
2021-05-18 22:14:35 +02:00
icon(icon) {
2021-05-22 21:35:25 +02:00
this.settings.icon = icon;
2021-05-18 22:14:35 +02:00
return this;
}
2022-12-02 16:46:14 +01:00
/** @param {string|function} title */
2021-05-18 22:14:35 +02:00
title(title) {
2021-05-22 21:35:25 +02:00
this.settings.title = title;
2021-05-18 22:14:35 +02:00
return this;
}
2022-12-02 16:46:14 +01:00
/** @param {string} placement - "top", "bottom", "left", "right" */
2021-05-22 22:55:24 +02:00
titlePlacement(placement) {
this.settings.titlePlacement = placement;
return this;
}
2022-11-25 15:29:57 +01:00
onContextMenu(handler) {
this.settings.onContextMenu = handler;
}
2022-12-11 13:20:37 +01:00
}