deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2026-03-16 23:55:49 +01:00
Code Issues Projects Releases Wiki Activity

Fix popover active state

Browse source
This commit is contained in:
Tanya Fomina 2022-09-20 03:57:52 +03:00
commit 3a1745e8a2
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/modules/toolbar/blockSettings.ts
View file

@ -122,6 +122,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
customContent: this.nodes.renderedTunes,
customContentFlippableItems: this.getControls(this.nodes.renderedTunes),
scopeElement: this.Editor.API.methods.ui.nodes.redactor,
shouldHighlightActivated: true,
});
this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);

18
src/components/utils/popover.ts
View file

@ -157,6 +157,11 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
*/
private itemsRequiringConfirmation: { [itemIndex: number]: PopoverItem } = {};
/**
* If true, activated item should be highlighted as active once clicked.
*/
private shouldHighlightActivated: boolean;
/**
* Creates the Popover
*
@ -168,8 +173,9 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
* @param options.customContent - arbitrary html element to be inserted before items list
* @param options.customContentFlippableItems - list of html elements inside custom content area that should be available for keyboard navigation
* @param options.scopeElement - editor container element
* @param shouldHighlightActivated - If true, activated item should be highlighted as active once clicked.
*/
constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement }: {
constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement, shouldHighlightActivated = false }: {
items: PopoverItem[];
className?: string;
searchable?: boolean;
@ -178,6 +184,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
customContent?: HTMLElement;
customContentFlippableItems?: HTMLElement[];
scopeElement: HTMLElement;
shouldHighlightActivated?: boolean;
}) {
super();
this.items = items;
@ -187,6 +194,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
this.searchable = searchable;
this.listeners = new Listeners();
this.scopeElement = scopeElement;
this.shouldHighlightActivated = shouldHighlightActivated;
this.filterLabel = filterLabel;
this.nothingFoundLabel = nothingFoundLabel;
@ -485,13 +493,15 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
}
clickedItem.onActivate(clickedItem, event);
if (clickedItem.closeOnActivate) {
this.hide();
} else {
if (this.shouldHighlightActivated) {
/** If popover is not intended to close once item is activated, we need to update active state of activated item */
clickedItem.isActive = !clickedItem.isActive;
itemEl.classList.toggle(Popover.CSS.itemActive);
}
if (clickedItem.closeOnActivate) {
this.hide();
}
}
/**