Refactor ActionButton and MenuButton #3677

enonic · Aug 30, 2024 · b2456ef · b2456ef
1 parent f5e5b22
commit b2456ef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/src/main/resources/assets/admin/common/js/dom/ButtonEl.ts b/src/main/resources/assets/admin/common/js/dom/ButtonEl.ts
@@ -1,11 +1,18 @@
 import {StyleHelper} from '../StyleHelper';
 import {FormItemEl} from './FormItemEl';
+import * as $ from 'jquery';
+import {Body} from './Body';
 
 export class ButtonEl
     extends FormItemEl {
 
-    constructor(className?: string) {
-        super('button', className, StyleHelper.COMMON_PREFIX);
+    constructor(className?: string, stylePrefix: string = StyleHelper.COMMON_PREFIX) {
+        super('button', className, stylePrefix);
+
+        this.onEnterPressed(() => {
+            Body.get().setFocusedElement(this);
+            $(this.getHTMLElement()).simulate('click');
+        });
     }
 
     setEnabled(value: boolean) {

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
@@ -245,19 +245,24 @@ export class MenuButton
     protected initListeners(): void {
         this.onBodyClicked = (e) => this.hideMenuOnOutsideClick(e);
 
-        this.dropdownHandle.onClicked((e: MouseEvent) => {
+        const onDropdownHandleClicked = () => {
             if (this.dropdownHandle.isEnabled()) {
                 this.toggleMenu();
             }
-        });
+        };
+        this.dropdownHandle.onClicked(onDropdownHandleClicked);
+        this.dropdownHandle.onEnterPressed(onDropdownHandleClicked);
+        this.dropdownHandle.onEscPressed(() => this.collapseMenu());
 
         this.menu.onItemClicked((item: MenuItem) => {
             if (this.menu.isHideOnItemClick() && item.isEnabled()) {
                 this.collapseMenu();
             }
         });
 
-        this.actionButton.onClicked(() =>  this.toggleMenuOnAction ? this.toggleMenu() : this.collapseMenu());
+        const onActionButtonClicked = () => this.toggleMenuOnAction ? this.toggleMenu() : this.collapseMenu();
+        this.actionButton.onClicked(onActionButtonClicked);
+        this.actionButton.onEnterPressed(onActionButtonClicked);
 
         this.menu.onClicked(() => this.dropdownHandle.giveFocus());
     }

diff --git a/src/main/resources/assets/admin/common/js/ui/toolbar/Toolbar.ts b/src/main/resources/assets/admin/common/js/ui/toolbar/Toolbar.ts
@@ -35,7 +35,6 @@ export class Toolbar<C extends ToolbarConfig>
     private locked: boolean;
     private hasGreedySpacer: boolean;
     private lastFocusedElementIndex = -1;
-    private lastActionIndex= -1;
 
     private visibleButtonsWidth = 0;
 
@@ -285,6 +284,10 @@ export class Toolbar<C extends ToolbarConfig>
         return this.toolbarElements.findIndex((toolbarElement: ToolbarElement) => toolbarElement.el === element);
     }
 
+    private getFoldButtonIndex(): number {
+        return this.getIndexOfToolbarElement(this.foldButton);
+    }
+
     appendChild(element: Element | ActionButton): Element {
         if (this.hasGreedySpacer) {
             element.addClass('pull-right');
@@ -314,9 +317,7 @@ export class Toolbar<C extends ToolbarConfig>
 
         const actionButton = this.createActionButton(action);
 
-        this.lastActionIndex++;
-        this.addTabbable(actionButton, this.lastActionIndex);
-
+        this.addTabbable(actionButton, this.getFoldButtonIndex());
         this.appendChild(actionButton);
 
         return actionButton;
@@ -379,17 +380,18 @@ export class Toolbar<C extends ToolbarConfig>
         const toolbarWidth: number = this.getToolbarWidth();
         let nextFoldableButton: Element = this.getNextFoldableButton();
         let visibleButtonsWidth = this.visibleButtonsWidth;
+        let foldIndex = this.getFoldButtonIndex() - 1;
 
         while (nextFoldableButton && (force || toolbarWidth <= visibleButtonsWidth)) {
             const buttonWidth: number = nextFoldableButton.getEl().getWidthWithBorder();
 
             this.removeChild(nextFoldableButton);
             this.foldButton.push(nextFoldableButton, buttonWidth);
-            this.toolbarElements[this.lastActionIndex].folded = true;
+            this.toolbarElements[foldIndex].folded = true;
             visibleButtonsWidth -= buttonWidth;
 
             nextFoldableButton = this.getNextFoldableButton();
-            this.lastActionIndex--;
+            foldIndex--;
         }
 
         if (!this.foldButton.isEmpty() && !this.foldButton.isVisible()) {
@@ -403,16 +405,17 @@ export class Toolbar<C extends ToolbarConfig>
         const toolbarWidth: number = this.getToolbarWidth();
         const foldButtonWidth: number = this.foldButton.getButtonsCount() > 1 ? 0 : this.foldButton.getEl().getWidthWithBorder();
         let visibleButtonsWidth = this.visibleButtonsWidth;
+        let index = this.getFoldButtonIndex() + 1;
 
         // if fold has 1 child left then subtract fold button width because it will be hidden
         while (!this.foldButton.isEmpty() && visibleButtonsWidth + this.foldButton.getNextButtonWidth() < toolbarWidth) {
 
             const buttonToShow = this.foldButton.pop();
             buttonToShow.insertBeforeEl(this.foldButton);
             visibleButtonsWidth += buttonToShow.getEl().getWidthWithBorder();
-            this.toolbarElements[this.lastActionIndex + 1].folded = false;
+            this.toolbarElements[index].folded = false;
 
-            this.lastActionIndex++;
+            index++;
             if (this.foldButton.getButtonsCount() === 1) {
                 visibleButtonsWidth -= foldButtonWidth;
             }
@@ -435,7 +438,7 @@ export class Toolbar<C extends ToolbarConfig>
     }
 
     private getNextFoldableButton(): Element {
-        let index = this.lastActionIndex;
+        let index = this.getFoldButtonIndex() - 1;
 
         while (index >= 0) {
             if (this.isActionButton(this.toolbarElements[index].el)) {