Skip to content

Commit 07b1ce2

Browse files
TatianaFominailyamore88neSpecc
authored
Chore/popover refactoring (codex-team#2249)
* Add new popover class * Add flipper * confirmation * confirmation * Add confirmation support * Add search * Add toggle group support and update popover tests * Add custom content support * Fix scroll issue * Add mobile version * Integration * Fix animation * Cleanup * Fix popover position for narrow mode * Fix tests * Update version and changelog * Rename css classes * Move files * Stop using PopoverItem from outside of popover context * Fix jsdoc * Move error animation to popover item * Update css variables * Update docs/CHANGELOG.md Co-authored-by: Ilya Maroz <[email protected]> * Update src/components/block-tunes/block-tune-move-down.ts Co-authored-by: Peter Savchenko <[email protected]> * Update src/components/block-tunes/block-tune-move-up.ts Co-authored-by: Peter Savchenko <[email protected]> * Fixes * Fix imports * Fix toolbox close event * Move search-input file * Fix comment * Rename method * Cleanup * Remove onFlip callback from popover item * Rename * Fix removing event listener * Move popover animations to popover.css file * Cleanup styles * Fix jsdoc * Fix confirmation chains * Close toolbox oly when it's open * Change activation error animation * Update version and changelog * Fix overlay * Update icon border-radius on mobile * Disable item text select * Update changelog * Update yarn.lock * Add rc postfix to version --------- Co-authored-by: Ilya Maroz <[email protected]> Co-authored-by: Peter Savchenko <[email protected]>
1 parent 551e3f1 commit 07b1ce2

24 files changed

+1242
-1110
lines changed

‎docs/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changelog
22

3+
### 2.27.0
4+
5+
- `Refactoring` — Popover class refactored.
6+
- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.
7+
38
### 2.26.5
49

510
- `Fix` — *Types* — Remove unnecessary import that creates a dependency on the `cypress`.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@editorjs/editorjs",
3-
"version": "2.26.5",
3+
"version": "2.27.0-rc.0",
44
"description": "Editor.js — Native JS, based on API and Open Source",
55
"main": "dist/editor.js",
66
"types": "./types/index.d.ts",

‎src/components/block-tunes/block-tune-move-down.ts

+3-17
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66

77
import { API, BlockTune } from '../../../types';
8-
import Popover from '../utils/popover';
98
import { IconChevronDown } from '@codexteam/icons';
109
import { TunesMenuConfig } from '../../../types/tools';
1110

@@ -49,34 +48,21 @@ export default class MoveDownTune implements BlockTune {
4948
return {
5049
icon: IconChevronDown,
5150
title: this.api.i18n.t('Move down'),
52-
onActivate: (item, event): void => this.handleClick(event),
51+
onActivate: (): void => this.handleClick(),
5352
name: 'move-down',
5453
};
5554
}
5655

5756
/**
5857
* Handle clicks on 'move down' button
59-
*
60-
* @param event - click event
6158
*/
62-
public handleClick(event: MouseEvent): void {
59+
public handleClick(): void {
6360
const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
6461
const nextBlock = this.api.blocks.getBlockByIndex(currentBlockIndex + 1);
6562

6663
// If Block is last do nothing
6764
if (!nextBlock) {
68-
const button = (event.target as HTMLElement)
69-
.closest('.' + Popover.CSS.item)
70-
.querySelector('.' + Popover.CSS.itemIcon);
71-
72-
button.classList.add(this.CSS.animation);
73-
74-
window.setTimeout(() => {
75-
button.classList.remove(this.CSS.animation);
76-
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
77-
}, 500);
78-
79-
return;
65+
throw new Error('Unable to move Block down since it is already the last');
8066
}
8167

8268
const nextBlockElement = nextBlock.holder;

‎src/components/block-tunes/block-tune-move-up.ts

+3-17
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
* @copyright <CodeX Team> 2018
55
*/
66
import { API, BlockTune } from '../../../types';
7-
import Popover from '../../components/utils/popover';
87
import { IconChevronUp } from '@codexteam/icons';
98
import { TunesMenuConfig } from '../../../types/tools';
109

@@ -47,34 +46,21 @@ export default class MoveUpTune implements BlockTune {
4746
return {
4847
icon: IconChevronUp,
4948
title: this.api.i18n.t('Move up'),
50-
onActivate: (item, e): void => this.handleClick(e),
49+
onActivate: (): void => this.handleClick(),
5150
name: 'move-up',
5251
};
5352
}
5453

5554
/**
5655
* Move current block up
57-
*
58-
* @param {MouseEvent} event - click event
5956
*/
60-
public handleClick(event: MouseEvent): void {
57+
public handleClick(): void {
6158
const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
6259
const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
6360
const previousBlock = this.api.blocks.getBlockByIndex(currentBlockIndex - 1);
6461

6562
if (currentBlockIndex === 0 || !currentBlock || !previousBlock) {
66-
const button = (event.target as HTMLElement)
67-
.closest('.' + Popover.CSS.item)
68-
.querySelector('.' + Popover.CSS.itemIcon);
69-
70-
button.classList.add(this.CSS.animation);
71-
72-
window.setTimeout(() => {
73-
button.classList.remove(this.CSS.animation);
74-
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
75-
}, 500);
76-
77-
return;
63+
throw new Error('Unable to move Block up since it is already the first');
7864
}
7965

8066
const currentBlockElement = currentBlock.holder;

‎src/components/modules/toolbar/blockSettings.ts

+17-16
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import Module from '../../__module';
22
import $ from '../../dom';
33
import SelectionUtils from '../../selection';
44
import Block from '../../block';
5-
import Popover, { PopoverEvent } from '../../utils/popover';
65
import I18n from '../../i18n';
76
import { I18nInternalNS } from '../../i18n/namespace-internal';
87
import Flipper from '../../flipper';
98
import { TunesMenuConfigItem } from '../../../../types/tools';
109
import { resolveAliases } from '../../utils/resolve-aliases';
10+
import Popover, { PopoverEvent } from '../../utils/popover';
1111

1212
/**
1313
* HTML Elements that used for BlockSettings
@@ -67,13 +67,14 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
6767
*/
6868
private popover: Popover | undefined;
6969

70+
7071
/**
7172
* Panel with block settings with 2 sections:
7273
* - Tool's Settings
7374
* - Default Settings [Move, Remove, etc]
7475
*/
7576
public make(): void {
76-
this.nodes.wrapper = $.make('div');
77+
this.nodes.wrapper = $.make('div', [ this.CSS.settings ]);
7778
}
7879

7980
/**
@@ -110,19 +111,19 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
110111

111112
/** Tell to subscribers that block settings is opened */
112113
this.eventsDispatcher.emit(this.events.opened);
113-
114114
this.popover = new Popover({
115-
className: this.CSS.settings,
116115
searchable: true,
117-
filterLabel: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
118-
nothingFoundLabel: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
119116
items: tunesItems.map(tune => this.resolveTuneAliases(tune)),
120117
customContent: customHtmlTunesContainer,
121118
customContentFlippableItems: this.getControls(customHtmlTunesContainer),
122119
scopeElement: this.Editor.API.methods.ui.nodes.redactor,
120+
messages: {
121+
nothingFound: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
122+
search: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
123+
},
123124
});
124-
this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
125-
this.popover.on(PopoverEvent.Close, () => this.close());
125+
126+
this.popover.on(PopoverEvent.Close, this.onPopoverClose);
126127

127128
this.nodes.wrapper.append(this.popover.getElement());
128129

@@ -166,13 +167,20 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
166167
this.eventsDispatcher.emit(this.events.closed);
167168

168169
if (this.popover) {
169-
this.popover.off(PopoverEvent.OverlayClicked, this.onOverlayClicked);
170+
this.popover.off(PopoverEvent.Close, this.onPopoverClose);
170171
this.popover.destroy();
171172
this.popover.getElement().remove();
172173
this.popover = null;
173174
}
174175
}
175176

177+
/**
178+
* Handles popover close event
179+
*/
180+
private onPopoverClose = (): void => {
181+
this.close();
182+
};
183+
176184
/**
177185
* Returns list of buttons and inputs inside specified container
178186
*
@@ -188,13 +196,6 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
188196
return Array.from(controls);
189197
}
190198

191-
/**
192-
* Handles overlay click
193-
*/
194-
private onOverlayClicked = (): void => {
195-
this.close();
196-
};
197-
198199
/**
199200
* Resolves aliases in tunes menu items
200201
*

‎src/components/modules/toolbar/index.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,13 @@ export default class Toolbar extends Module<ToolbarNodes> {
228228
/**
229229
* Close Toolbox when we move toolbar
230230
*/
231-
this.toolboxInstance.close();
232-
this.Editor.BlockSettings.close();
231+
if (this.toolboxInstance.opened) {
232+
this.toolboxInstance.close();
233+
}
234+
235+
if (this.Editor.BlockSettings.opened) {
236+
this.Editor.BlockSettings.close();
237+
}
233238

234239
/**
235240
* If no one Block selected as a Current
@@ -468,7 +473,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
468473

469474
this.settingsTogglerClicked();
470475

471-
this.toolboxInstance.close();
476+
if (this.toolboxInstance.opened) {
477+
this.toolboxInstance.close();
478+
}
472479

473480
this.tooltip.hide(true);
474481
}, true);

‎src/components/ui/toolbox.ts

+11-8
Original file line numberDiff line numberDiff line change
@@ -123,21 +123,23 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
123123
public make(): Element {
124124
this.popover = new Popover({
125125
scopeElement: this.api.ui.nodes.redactor,
126-
className: Toolbox.CSS.toolbox,
127126
searchable: true,
128-
filterLabel: this.i18nLabels.filter,
129-
nothingFoundLabel: this.i18nLabels.nothingFound,
127+
messages: {
128+
nothingFound: this.i18nLabels.nothingFound,
129+
search: this.i18nLabels.filter,
130+
},
130131
items: this.toolboxItemsToBeDisplayed,
131132
});
132133

133-
this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
134+
this.popover.on(PopoverEvent.Close, this.onPopoverClose);
134135

135136
/**
136137
* Enable tools shortcuts
137138
*/
138139
this.enableShortcuts();
139140

140141
this.nodes.toolbox = this.popover.getElement();
142+
this.nodes.toolbox.classList.add(Toolbox.CSS.toolbox);
141143

142144
return this.nodes.toolbox;
143145
}
@@ -161,7 +163,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
161163
}
162164

163165
this.removeAllShortcuts();
164-
this.popover?.off(PopoverEvent.OverlayClicked, this.onOverlayClicked);
166+
this.popover?.off(PopoverEvent.Close, this.onPopoverClose);
165167
}
166168

167169
/**
@@ -208,10 +210,11 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
208210
}
209211

210212
/**
211-
* Handles overlay click
213+
* Handles popover close event
212214
*/
213-
private onOverlayClicked = (): void => {
214-
this.close();
215+
private onPopoverClose = (): void => {
216+
this.opened = false;
217+
this.emit(ToolboxEvent.Closed);
215218
};
216219

217220
/**

0 commit comments

Comments
 (0)