Made buttons trigger action on Space

enonic · Sep 9, 2024 · c8af314 · c8af314
1 parent b2456ef
commit c8af314
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/src/main/resources/assets/admin/common/js/app/browse/filter/BrowseFilterPanel.ts b/src/main/resources/assets/admin/common/js/app/browse/filter/BrowseFilterPanel.ts
@@ -48,7 +48,7 @@ export class BrowseFilterPanel<T>
         });
         this.hideFilterPanelButton.setTitle(i18n('tooltip.filterPanel.hide'));
         this.hideFilterPanelButton.onClicked(() => this.notifyHidePanelButtonPressed());
-        this.hideFilterPanelButton.onEnterPressed(() => this.notifyHidePanelButtonPressed());
+        this.hideFilterPanelButton.onApplyKeyPressed(() => this.notifyHidePanelButtonPressed());
 
         let showResultsButtonWrapper = new DivEl('show-filter-results');
         this.showResultsButton = new SpanEl('show-filter-results-button');

diff --git a/src/main/resources/assets/admin/common/js/dom/ButtonEl.ts b/src/main/resources/assets/admin/common/js/dom/ButtonEl.ts
@@ -9,10 +9,11 @@ export class ButtonEl
     constructor(className?: string, stylePrefix: string = StyleHelper.COMMON_PREFIX) {
         super('button', className, stylePrefix);
 
-        this.onEnterPressed(() => {
+        const triggerAction = () => {
             Body.get().setFocusedElement(this);
             $(this.getHTMLElement()).simulate('click');
-        });
+        };
+        this.onApplyKeyPressed(triggerAction);
     }
 
     setEnabled(value: boolean) {

diff --git a/src/main/resources/assets/admin/common/js/dom/Element.ts b/src/main/resources/assets/admin/common/js/dom/Element.ts
@@ -1121,12 +1121,21 @@ export class Element {
         this.getEl().removeEventListener('DOMMouseScroll', listener);
     }
 
-    onEnterPressed(callback: () => void) {
+    onApplyKeyPressed(callback: () => void) {
+        const callbackWrapper = (event: KeyboardEvent) => {
+            callback();
+            event.stopPropagation();
+            event.preventDefault();
+        };
         this.onKeyDown((event: KeyboardEvent) => {
             if (KeyHelper.isEnterKey(event)) {
-                callback();
-                event.stopPropagation();
-                event.preventDefault();
+                callbackWrapper(event);
+            }
+        });
+
+        this.onKeyUp((event: KeyboardEvent) => {
+            if (KeyHelper.isSpace(event)) {
+                callbackWrapper(event);
             }
         });
     }

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
@@ -32,8 +32,7 @@ export class ActionButton
             this.getAction().execute();
         };
 
-        this.onClicked(() => executeAction());
-        this.onEnterPressed(() => executeAction());
+        this.onClicked(executeAction);
 
         this.onHelpKeyPressed = this.onHelpKeyPressed.bind(this);
         this.syncButtonWithAction = this.syncButtonWithAction.bind(this);

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
@@ -98,6 +98,10 @@ export class MenuButton
         return this.dropdownHandle;
     }
 
+    getChildControls(): Element[] {
+        return [this.actionButton, this.dropdownHandle];
+    }
+
     addMenuActions(actions: Action[]) {
         this.menu.addActions(actions);
         this.initActions(actions);
@@ -204,7 +208,6 @@ export class MenuButton
 
     private initDropdownHandle(): void {
         this.dropdownHandle = new DropdownHandle();
-        this.dropdownHandle.onEnterPressed(() => this.toggleMenu());
     }
 
     private initActionButton(): void {
@@ -251,7 +254,6 @@ export class MenuButton
             }
         };
         this.dropdownHandle.onClicked(onDropdownHandleClicked);
-        this.dropdownHandle.onEnterPressed(onDropdownHandleClicked);
         this.dropdownHandle.onEscPressed(() => this.collapseMenu());
 
         this.menu.onItemClicked((item: MenuItem) => {
@@ -262,7 +264,6 @@ export class MenuButton
 
         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/FoldButton.ts b/src/main/resources/assets/admin/common/js/ui/toolbar/FoldButton.ts
@@ -45,7 +45,7 @@ export class FoldButton
     private initListeners() {
         (this.hostElement || this).onClicked(this.toggleMenu.bind(this));
         this.dropdown.onClicked(this.onMenuClicked.bind(this));
-        this.onEnterPressed(this.toggleMenu.bind(this));
+        this.onApplyKeyPressed(this.toggleMenu.bind(this));
         this.onEscPressed(this.collapse.bind(this));
     }