From af521cf6f29fb06b71a0e2e8ec88d6a757f9144f Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Fri, 8 Apr 2022 23:56:02 +0800 Subject: [PATCH 1/5] Replace visibility property with display for hiding popover --- src/styles/popover.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/popover.css b/src/styles/popover.css index 2516291f6..270702176 100644 --- a/src/styles/popover.css +++ b/src/styles/popover.css @@ -1,9 +1,8 @@ .ce-popover { position: absolute; opacity: 0; - visibility: hidden; will-change: opacity, transform; - display: flex; + display: none; flex-direction: column; padding: 4px; min-width: 200px; @@ -19,7 +18,7 @@ &--opened { opacity: 1; - visibility: visible; + display: flex; animation: panelShowing 100ms ease; @media (--mobile) { From 2300b50030cd8a30b4c0551b08d15306074159b6 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Sat, 9 Apr 2022 21:47:04 +0800 Subject: [PATCH 2/5] Disable arrow right and left keys for popover --- src/components/flipper.ts | 52 +++++++++++------------- src/components/modules/toolbar/inline.ts | 5 ++- src/components/utils/popover.ts | 8 +++- 3 files changed, 35 insertions(+), 30 deletions(-) diff --git a/src/components/flipper.ts b/src/components/flipper.ts index b770a8716..632d8824e 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -18,20 +18,22 @@ export interface FlipperOptions { items?: HTMLElement[]; /** - * Defines arrows usage. By default Flipper leafs items also via RIGHT/LEFT. - * - * true by default - * - * Pass 'false' if you don't need this behaviour - * (for example, Inline Toolbar should be closed by arrows, - * because it means caret moving with selection clearing) + * Optional callback for button click */ - allowArrows?: boolean; + activateCallback?: (item: HTMLElement) => void; /** - * Optional callback for button click + * List of keys allowed for handling. + * Can include codes of the following keys: + * - Tab + * - Enter + * - Arrow up + * - Arrow down + * - Arrow right + * - Arrow left + * If not specified all keys are enabled */ - activateCallback?: (item: HTMLElement) => void; + allowedKeys?: number[]; } /** @@ -53,11 +55,9 @@ export default class Flipper { private activated = false; /** - * Flag that allows arrows usage to flip items - * - * @type {boolean} + * List codes of the keys allowed for handling */ - private readonly allowArrows: boolean = true; + private readonly allowedKeys: number[]; /** * Call back for button click/enter @@ -68,9 +68,9 @@ export default class Flipper { * @param {FlipperOptions} options - different constructing settings */ constructor(options: FlipperOptions) { - this.allowArrows = _.isBoolean(options.allowArrows) ? options.allowArrows : true; this.iterator = new DomIterator(options.items, options.focusedItemClass); this.activateCallback = options.activateCallback; + this.allowedKeys = options.allowedKeys || Flipper.usedKeys; } /** @@ -206,23 +206,19 @@ export default class Flipper { * @returns {boolean} */ private isEventReadyForHandling(event: KeyboardEvent): boolean { - const handlingKeyCodeList = [ - _.keyCodes.TAB, - _.keyCodes.ENTER, - ]; - const isCurrentItemIsFocusedInput = this.iterator.currentItem == document.activeElement; + const arrowKeysList = [ + _.keyCodes.LEFT, + _.keyCodes.RIGHT, + _.keyCodes.UP, + _.keyCodes.DOWN, + ]; - if (this.allowArrows && !isCurrentItemIsFocusedInput) { - handlingKeyCodeList.push( - _.keyCodes.LEFT, - _.keyCodes.RIGHT, - _.keyCodes.UP, - _.keyCodes.DOWN - ); + if (isCurrentItemIsFocusedInput && arrowKeysList.includes(event.keyCode)) { + return false; } - return this.activated && handlingKeyCodeList.indexOf(event.keyCode) !== -1; + return this.activated && this.allowedKeys.indexOf(event.keyCode) !== -1; } /** diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 91ded10dd..799b60fd5 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -698,7 +698,10 @@ export default class InlineToolbar extends Module { private enableFlipper(): void { this.flipper = new Flipper({ focusedItemClass: this.CSS.focusedButton, - allowArrows: false, + allowedKeys: [ + _.keyCodes.ENTER, + _.keyCodes.TAB, + ], }); } } diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts index 6c6537066..aa3168470 100644 --- a/src/components/utils/popover.ts +++ b/src/components/utils/popover.ts @@ -3,7 +3,7 @@ import Listeners from './listeners'; import Flipper from '../flipper'; import SearchInput from './search-input'; import EventsDispatcher from './events'; -import { isMobile } from '../utils'; +import { isMobile, keyCodes } from '../utils'; /** * Describe parameters for rendering the single item of Popover @@ -347,6 +347,12 @@ export default class Popover extends EventsDispatcher { this.flipper = new Flipper({ items: tools, focusedItemClass: Popover.CSS.itemFocused, + allowedKeys: [ + keyCodes.TAB, + keyCodes.UP, + keyCodes.DOWN, + keyCodes.ENTER, + ], }); } } From c3b2a446736e11d8514a1bb69fb637858dfa3076 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Sun, 10 Apr 2022 22:44:04 +0800 Subject: [PATCH 3/5] Revert "Replace visibility property with display for hiding popover" This reverts commit af521cf6f29fb06b71a0e2e8ec88d6a757f9144f. --- src/styles/popover.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/popover.css b/src/styles/popover.css index 270702176..2516291f6 100644 --- a/src/styles/popover.css +++ b/src/styles/popover.css @@ -1,8 +1,9 @@ .ce-popover { position: absolute; opacity: 0; + visibility: hidden; will-change: opacity, transform; - display: none; + display: flex; flex-direction: column; padding: 4px; min-width: 200px; @@ -18,7 +19,7 @@ &--opened { opacity: 1; - display: flex; + visibility: visible; animation: panelShowing 100ms ease; @media (--mobile) { From eb1a7128dab01d539c300e372e5d7ab528a38fdb Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Sun, 10 Apr 2022 22:46:15 +0800 Subject: [PATCH 4/5] Hide popover via setting max-height to 0 to fix animation in safari --- src/styles/popover.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/popover.css b/src/styles/popover.css index 2516291f6..27c52598e 100644 --- a/src/styles/popover.css +++ b/src/styles/popover.css @@ -1,16 +1,15 @@ .ce-popover { position: absolute; opacity: 0; - visibility: hidden; will-change: opacity, transform; display: flex; flex-direction: column; padding: 4px; min-width: 200px; - max-height: 284px; overflow: hidden; box-sizing: border-box; flex-shrink: 0; + max-height: 0; @apply --overlay-pane; @@ -19,7 +18,7 @@ &--opened { opacity: 1; - visibility: visible; + max-height: 284px; animation: panelShowing 100ms ease; @media (--mobile) { From 4f200a64a83f1ec4d679dd550a3fc924b39f4668 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Sun, 10 Apr 2022 22:49:08 +0800 Subject: [PATCH 5/5] Remove redundant condition --- src/components/flipper.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/flipper.ts b/src/components/flipper.ts index 632d8824e..53960cf49 100644 --- a/src/components/flipper.ts +++ b/src/components/flipper.ts @@ -206,18 +206,6 @@ export default class Flipper { * @returns {boolean} */ private isEventReadyForHandling(event: KeyboardEvent): boolean { - const isCurrentItemIsFocusedInput = this.iterator.currentItem == document.activeElement; - const arrowKeysList = [ - _.keyCodes.LEFT, - _.keyCodes.RIGHT, - _.keyCodes.UP, - _.keyCodes.DOWN, - ]; - - if (isCurrentItemIsFocusedInput && arrowKeysList.includes(event.keyCode)) { - return false; - } - return this.activated && this.allowedKeys.indexOf(event.keyCode) !== -1; }