Refactor ActionButton and MenuButton #3677

enonic · Aug 26, 2024 · d7de574 · d7de574
1 parent 1e3dc50
commit d7de574
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 39 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts b/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts
@@ -26,21 +26,6 @@ export class ActionButton
         this.setAction(action);
     }
 
-    private onHelpKeyPressed(e: KeyboardEvent) {
-        const action = this.getAction();
-        if (!action.hasShortcut()) {
-            return;
-        }
-        const tooltip = this.getTooltip();
-        if (action.isEnabled() && KeyBindings.get().isActive(action.getShortcut())) {
-            if (KeyBindingAction[KeyBindingAction.KEYDOWN].toLowerCase() === e.type) {
-                tooltip.show();
-                return;
-            }
-        }
-        tooltip.hide();
-    }
-
     protected initListeners() {
         const executeAction = () => {
             Body.get().setFocusedElement(this);
@@ -56,19 +41,6 @@ export class ActionButton
         KeyBindings.get().onHelpKeyPressed(this.onHelpKeyPressed);
     }
 
-    private updateIconClass(newIconClass: string) {
-        if (newIconClass === this.iconClass) {
-            return;
-        }
-        if (this.iconClass) {
-            this.removeClass(this.iconClass);
-        }
-        this.iconClass = newIconClass;
-        if (this.iconClass) {
-            this.addClass(this.iconClass);
-        }
-    }
-
     getAction(): Action {
         return this.action;
     }
@@ -94,6 +66,16 @@ export class ActionButton
         return this.tooltip;
     }
 
+    protected createLabel(action: Action): string {
+        let label: string;
+        if (action.hasMnemonic()) {
+            label = action.getMnemonic().underlineMnemonic(action.getLabel());
+        } else {
+            label = action.getLabel();
+        }
+        return label;
+    }
+
     private syncButtonWithAction() {
         const action = this.getAction();
 
@@ -119,22 +101,52 @@ export class ActionButton
         }
     }
 
+    private createTooltip() {
+        if (!this.action.hasShortcut()) {
+            return;
+        }
+
+        let combination = this.action.getShortcut().getCombination();
+        if (combination) {
+            combination = combination.replace(/mod\+/i, BrowserHelper.isOSX() || BrowserHelper.isIOS() ? 'cmd+' : 'ctrl+');
+        }
+        this.tooltip = new Tooltip(this, combination, 1000);
+    }
+
     private doSetAction(action: Action) {
         action.onPropertyChanged(this.syncButtonWithAction);
 
         this.action = action;
 
+        this.createTooltip();
         this.syncButtonWithAction();
     }
 
-    protected createLabel(action: Action): string {
-        let label: string;
-        if (action.hasMnemonic()) {
-            label = action.getMnemonic().underlineMnemonic(action.getLabel());
-        } else {
-            label = action.getLabel();
+    private onHelpKeyPressed(e: KeyboardEvent) {
+        const action = this.getAction();
+        if (!action.hasShortcut()) {
+            return;
         }
-        return label;
+        const tooltip = this.getTooltip();
+        if (action.isEnabled() && KeyBindings.get().isActive(action.getShortcut())) {
+            if (KeyBindingAction[KeyBindingAction.KEYDOWN].toLowerCase() === e.type) {
+                tooltip.show();
+                return;
+            }
+        }
+        tooltip.hide();
     }
 
+    private updateIconClass(newIconClass: string) {
+        if (newIconClass === this.iconClass) {
+            return;
+        }
+        if (this.iconClass) {
+            this.removeClass(this.iconClass);
+        }
+        this.iconClass = newIconClass;
+        if (this.iconClass) {
+            this.addClass(this.iconClass);
+        }
+    }
 }
diff --git a/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts b/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts
@@ -15,14 +15,12 @@ export enum MenuButtonDropdownPos {
     LEFT, RIGHT
 }
 
-interface MenuButtonConfigObject {
+export interface MenuButtonConfig {
     defaultAction: Action;
     menuActions?: Action[];
     dropdownPosition?: MenuButtonDropdownPos
 }
 
-export type MenuButtonConfig = Action | MenuButtonConfigObject;
-
 export class MenuButton
     extends DivEl {
 
@@ -48,10 +46,13 @@ export class MenuButton
 
     private actionPropertyListener: () => void;
 
+    protected readonly config: MenuButtonConfig;
+
     constructor(config: Action | MenuButtonConfig) {
         super('menu-button');
 
         if ('defaultAction' in config) {
+            this.config = config;
             this.defaultAction = config.defaultAction;
             this.menuActions = config.menuActions || [];
             this.dropdownPosition = config.dropdownPosition || MenuButtonDropdownPos.LEFT;

diff --git a/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts b/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts
@@ -12,7 +12,7 @@ export class DropdownButtonRow
         this.addClass('dropdown-button-row');
     }
 
-    makeActionMenu(menuButtonConfig: MenuButtonConfig, useDefault: boolean = true): MenuButton {
+    makeActionMenu(menuButtonConfig: Action | MenuButtonConfig, useDefault: boolean = true): MenuButton {
         if (!this.actionMenu) {
             this.actionMenu = new MenuButton(menuButtonConfig);