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
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import { PopoverHeaderParams } from './popover-header.types';
|
|
import Dom from '../../../../dom';
|
|
import { css } from './popover-header.const';
|
|
import { IconChevronLeft } from '@codexteam/icons';
|
|
import Listeners from '../../../listeners';
|
|
|
|
/**
|
|
* Represents popover header ui element
|
|
*/
|
|
export class PopoverHeader {
|
|
/**
|
|
* Listeners util instance
|
|
*/
|
|
private listeners = new Listeners();
|
|
|
|
/**
|
|
* Header html elements
|
|
*/
|
|
private nodes: {
|
|
root: HTMLElement,
|
|
text: HTMLElement,
|
|
backButton: HTMLElement
|
|
};
|
|
|
|
/**
|
|
* Text displayed inside header
|
|
*/
|
|
private readonly text: string;
|
|
|
|
/**
|
|
* Back button click handler
|
|
*/
|
|
private readonly onBackButtonClick: () => void;
|
|
|
|
/**
|
|
* Constructs the instance
|
|
*
|
|
* @param params - popover header params
|
|
*/
|
|
constructor({ text, onBackButtonClick }: PopoverHeaderParams) {
|
|
this.text = text;
|
|
this.onBackButtonClick = onBackButtonClick;
|
|
|
|
this.nodes = {
|
|
root: Dom.make('div', [ css.root ]),
|
|
backButton: Dom.make('button', [ css.backButton ]),
|
|
text: Dom.make('div', [ css.text ]),
|
|
};
|
|
this.nodes.backButton.innerHTML = IconChevronLeft;
|
|
this.nodes.root.appendChild(this.nodes.backButton);
|
|
this.listeners.on(this.nodes.backButton, 'click', this.onBackButtonClick);
|
|
|
|
this.nodes.text.innerText = this.text;
|
|
this.nodes.root.appendChild(this.nodes.text);
|
|
}
|
|
|
|
/**
|
|
* Returns popover header root html element
|
|
*/
|
|
public getElement(): HTMLElement | null {
|
|
return this.nodes.root;
|
|
}
|
|
|
|
/**
|
|
* Destroys the instance
|
|
*/
|
|
public destroy(): void {
|
|
this.nodes.root.remove();
|
|
this.listeners.destroy();
|
|
}
|
|
}
|