mirror of
https://github.com/codex-team/editor.js
synced 2024-05-17 05:46:46 +02:00
5125f015dc
* Move popover types to separate file * tmp * open top * Fix bug with keyboard navigation * Fix bug with scroll * Fix mobile * Add popover header class * Display nested items on mobile * Refactor history * Fix positioning on desktop * Fix tests * Fix child popover indent left * Fix ts errors in popover files * Move files * Rename cn to bem * Clarify comments and rename method * Refactor popover css classes * Rename cls to css * Split popover desktop and mobile classes * Add ability to open popover to the left if not enough space to open to the right * Add nested popover test * Add popover test for mobile screens * Fix tests * Add union type for both popovers * Add global window resize event * Multiple fixes * Move nodes initialization to constructor * Rename handleShowingNestedItems to showNestedItems * Replace WindowResize with EditorMobileLayoutToggled * New doze of fixes * Review fixes * Fixes * Fixes * Make each nested popover decide itself if it should open top * Update changelog * Update changelog * Update changelog
110 lines
2.2 KiB
TypeScript
110 lines
2.2 KiB
TypeScript
import { PopoverItem as PopoverItemParams } from '../../../../types';
|
|
|
|
/**
|
|
* Params required to render popover
|
|
*/
|
|
export interface PopoverParams {
|
|
/**
|
|
* Popover items config
|
|
*/
|
|
items: PopoverItemParams[];
|
|
|
|
/**
|
|
* Element of the page that creates 'scope' of the popover.
|
|
* Depending on its size popover position will be calculated
|
|
*/
|
|
scopeElement?: HTMLElement;
|
|
|
|
/**
|
|
* Arbitrary html element to be inserted before items list
|
|
*/
|
|
customContent?: HTMLElement;
|
|
|
|
/**
|
|
* List of html elements inside custom content area that should be available for keyboard navigation
|
|
*/
|
|
customContentFlippableItems?: HTMLElement[];
|
|
|
|
/**
|
|
* True if popover should contain search field
|
|
*/
|
|
searchable?: boolean;
|
|
|
|
/**
|
|
* Popover texts overrides
|
|
*/
|
|
messages?: PopoverMessages
|
|
|
|
/**
|
|
* CSS class name for popover root element
|
|
*/
|
|
class?: string;
|
|
|
|
/**
|
|
* Popover nesting level. 0 value means that it is a root popover
|
|
*/
|
|
nestingLevel?: number;
|
|
}
|
|
|
|
/**
|
|
* Texts used inside popover
|
|
*/
|
|
export interface PopoverMessages {
|
|
/** Text displayed when search has no results */
|
|
nothingFound?: string;
|
|
|
|
/** Search input label */
|
|
search?: string
|
|
}
|
|
|
|
/**
|
|
* Event that can be triggered by the Popover
|
|
*/
|
|
export enum PopoverEvent {
|
|
/**
|
|
* When popover closes
|
|
*/
|
|
Close = 'close'
|
|
}
|
|
|
|
/**
|
|
* Events fired by the Popover
|
|
*/
|
|
export interface PopoverEventMap {
|
|
/**
|
|
* Fired when popover closes
|
|
*/
|
|
[PopoverEvent.Close]: undefined;
|
|
}
|
|
|
|
/**
|
|
* HTML elements required to display popover
|
|
*/
|
|
export interface PopoverNodes {
|
|
/** Root popover element */
|
|
popover: HTMLElement;
|
|
|
|
/** Wraps all the visible popover elements, has background and rounded corners */
|
|
popoverContainer: HTMLElement;
|
|
|
|
/** Message displayed when no items found while searching */
|
|
nothingFoundMessage: HTMLElement;
|
|
|
|
/** Popover items wrapper */
|
|
items: HTMLElement;
|
|
|
|
/** Custom html content area */
|
|
customContent: HTMLElement | undefined;
|
|
}
|
|
|
|
/**
|
|
* HTML elements required to display mobile popover
|
|
*/
|
|
export interface PopoverMobileNodes extends PopoverNodes {
|
|
/** Popover header element */
|
|
header: HTMLElement;
|
|
|
|
/** Overlay, displayed under popover on mobile */
|
|
overlay: HTMLElement;
|
|
}
|