editor.js/src/components/modules/api/tooltip.ts
Peter Savchenko ff91466b14
feat(toolbar): toolbar refactored and ui improved (#1815)
* chore(block-tune-toggler): toggler moved to the left (draft)

* toolbox ui updated

* fixd caret jumpling, improved some styles

* toolbar moving by block-hover

- UI module triggers 'block-hovered' event
- Toolbar uses 'block-hovered' for appearing
- `currentBlock` setter added to the BlockManager
- (reactangle-selection): the throttling added to the mousemove and scroll handlers
- `getBlockIndex` method added to the Api
- (api-blocks): toolbar moving logic removed from `blocks.move()` and `blocks.swap()` methods. Instead, MoveUp and MoveDown tunes uses Toolbar API

* the dark-theme to the example-dev.html

* positioning improved

* fix(rectangle-selection): first click after RS does not clears selection state

* toolbox position fixed

* the toolbox module became a standalone class

- Toolbox became a standalone class from the editor module. It can be accessed only via the owner (the Toolbar module)
- (api.blocks) the insert() method now has the `replace` param. Also, it returns inserted Block API now.

* new(api.listeners): `on()` now returns the listener id. The new `offById()` method added

* fix bug with Tab pressing on hovered but not focused block

* mobile version improved

* upd example dev

* small updaets

* add nested-list

* linting

* (api.toolbar): `toggleBlockSettings` now fires toggling event with the same state

* EventDispatcher used instead of callbacks for the Toolbox

* UIApi added

* fix ci

* git submodules removed from the ci flow

* add paragraph submodule to the ci flow

* Update CHANGELOG.md

* Update package.json

* use ubuntu-latest for chrome ci
2021-11-24 21:14:24 +03:00

83 lines
2.3 KiB
TypeScript

import { Tooltip as ITooltip } from '../../../../types/api';
import type { TooltipOptions, TooltipContent } from 'codex-tooltip/types';
import Module from '../../__module';
import { ModuleConfig } from '../../../types-internal/module-config';
import Tooltip from '../../utils/tooltip';
/**
* @class TooltipAPI
* @classdesc Tooltip API
*/
export default class TooltipAPI extends Module {
/**
* Tooltip utility Instance
*/
private tooltip: Tooltip;
/**
* @class
* @param moduleConfiguration - Module Configuration
* @param moduleConfiguration.config - Editor's config
* @param moduleConfiguration.eventsDispatcher - Editor's event dispatcher
*/
constructor({ config, eventsDispatcher }: ModuleConfig) {
super({
config,
eventsDispatcher,
});
this.tooltip = new Tooltip();
}
/**
* Destroy Module
*/
public destroy(): void {
this.tooltip.destroy();
}
/**
* Available methods
*/
public get methods(): ITooltip {
return {
show: (element: HTMLElement,
content: TooltipContent,
options?: TooltipOptions
): void => this.show(element, content, options),
hide: (): void => this.hide(),
onHover: (element: HTMLElement,
content: TooltipContent,
options?: TooltipOptions
): void => this.onHover(element, content, options),
};
}
/**
* Method show tooltip on element with passed HTML content
*
* @param {HTMLElement} element - element on which tooltip should be shown
* @param {TooltipContent} content - tooltip content
* @param {TooltipOptions} options - tooltip options
*/
public show(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
this.tooltip.show(element, content, options);
}
/**
* Method hides tooltip on HTML page
*/
public hide(): void {
this.tooltip.hide();
}
/**
* Decorator for showing Tooltip by mouseenter/mouseleave
*
* @param {HTMLElement} element - element on which tooltip should be shown
* @param {TooltipContent} content - tooltip content
* @param {TooltipOptions} options - tooltip options
*/
public onHover(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
this.tooltip.onHover(element, content, options);
}
}