jodit/src/plugins/tooltip/tooltip.ts

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Released under MIT see LICENSE.txt in the project root for license information.
 * Copyright (c) 2013-2020 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

import './tooltip.less';

import { IJodit, IPoint } from '../../types';
import { css } from '../../core/helpers';
import { Plugin } from '../../core/plugin';
import { Dom } from '../../core/dom';
import { getContainer } from '../../core/global';
import autobind from 'autobind-decorator';

export class tooltip extends Plugin {
	private isOpened = false;

	container!: HTMLElement;

	afterInit(jodit: IJodit): void {
		this.container = jodit.c.div('jodit-tooltip');
		getContainer(this.j, tooltip).appendChild(this.container);

		let timeout = 0;

		jodit.e
			.off('.tooltip')
			.on(
				'showTooltip.tooltip',
				(getPoint: () => IPoint, content: string) => {
					jodit.async.clearTimeout(timeout);
					this.open(getPoint, content);
				}
			)
			.on('escape.tooltip', this.close)
			.on(
				'hideTooltip.tooltip change.tooltip updateToolbar.tooltip scroll.tooltip changePlace.tooltip hidePopup.tooltip closeAllPopups.tooltip',
				() => {
					timeout = jodit.async.setTimeout(
						this.close,
						this.j.defaultTimeout
					);
				}
			);
	}

	beforeDestruct(jodit: IJodit): void {
		jodit?.e.off('.tooltip');
		this.close();
		Dom.safeRemove(this.container);
	}

	private open(getPoint: () => IPoint, content: string): void {
		this.container.classList.add('jodit-tooltip_visible');
		this.container.innerHTML = content;

		this.isOpened = true;
		this.setPosition(getPoint);
	}

	private setPosition(getPoint: () => IPoint) {
		const point = getPoint();

		css(this.container, {
			left: point.x,
			top: point.y
		});
	}

	@autobind
	private close(): void {
		if (this.isOpened) {
			this.isOpened = false;
			this.container.classList.remove('jodit-tooltip_visible');

			css(this.container, {
				left: -5000
			});
		}
	}
}