chore(client/ts): port abstract_button

src/public/app/widgets/buttons/abstract_button.ts

@@ -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();
 
+                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;
 
+        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;
     }

src/public/app/widgets/right_panel_widget.ts

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