mirror of
https://github.com/codex-team/editor.js
synced 2024-05-07 08:56:48 +02:00
2d89105670
* Add internal wrappers for tools classes * FIx lint * Change tools collections to map * Apply some more refactoring * Make tool instance private field * Add some docs * Fix eslint * Basic implementation for Block Tunes * Small fix for demo * Review changes * Fix * Add common tunes and ToolsCollection class * Fixes after review * Rename tools collections * Readonly fix * Some fixes after review * Apply suggestions from code review Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Fixes after review * Add docs and changelog * Update docs/block-tunes.md Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Apply suggestions from code review Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Update src/components/block/index.ts Co-authored-by: Murod Khaydarov <murod.haydarov@gmail.com> * [Dev] Tools utils tests (#1602) * Add tests for tools utils and coverage report * Fix eslint * Adjust test * Add more tests * Update after code review * Fix test & bump version Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: Murod Khaydarov <murod.haydarov@gmail.com>
129 lines
2.9 KiB
TypeScript
129 lines
2.9 KiB
TypeScript
/**
|
|
* @class DeleteTune
|
|
* @classdesc Editor's default tune that moves up selected block
|
|
*
|
|
* @copyright <CodeX Team> 2018
|
|
*/
|
|
import { API, BlockTune } from '../../../types';
|
|
import $ from '../dom';
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default class DeleteTune implements BlockTune {
|
|
/**
|
|
* Set Tool is Tune
|
|
*/
|
|
public static readonly isTune = true;
|
|
|
|
/**
|
|
* Property that contains Editor.js API methods
|
|
*
|
|
* @see {@link docs/api.md}
|
|
*/
|
|
private readonly api: API;
|
|
|
|
/**
|
|
* Styles
|
|
*/
|
|
private CSS = {
|
|
button: 'ce-settings__button',
|
|
buttonDelete: 'ce-settings__button--delete',
|
|
buttonConfirm: 'ce-settings__button--confirm',
|
|
};
|
|
|
|
/**
|
|
* Delete confirmation
|
|
*/
|
|
private needConfirmation: boolean;
|
|
|
|
/**
|
|
* set false confirmation state
|
|
*/
|
|
private readonly resetConfirmation: () => void;
|
|
|
|
/**
|
|
* Tune nodes
|
|
*/
|
|
private nodes: {button: HTMLElement} = {
|
|
button: null,
|
|
};
|
|
|
|
/**
|
|
* DeleteTune constructor
|
|
*
|
|
* @param {API} api - Editor's API
|
|
*/
|
|
constructor({ api }) {
|
|
this.api = api;
|
|
|
|
this.resetConfirmation = (): void => {
|
|
this.setConfirmation(false);
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Create "Delete" button and add click event listener
|
|
*
|
|
* @returns {HTMLElement}
|
|
*/
|
|
public render(): HTMLElement {
|
|
this.nodes.button = $.make('div', [this.CSS.button, this.CSS.buttonDelete], {});
|
|
this.nodes.button.appendChild($.svg('cross', 12, 12));
|
|
this.api.listeners.on(this.nodes.button, 'click', (event: MouseEvent) => this.handleClick(event), false);
|
|
|
|
/**
|
|
* Enable tooltip module
|
|
*/
|
|
this.api.tooltip.onHover(this.nodes.button, this.api.i18n.t('Delete'));
|
|
|
|
return this.nodes.button;
|
|
}
|
|
|
|
/**
|
|
* Delete block conditions passed
|
|
*
|
|
* @param {MouseEvent} event - click event
|
|
*/
|
|
public handleClick(event: MouseEvent): void {
|
|
/**
|
|
* if block is not waiting the confirmation, subscribe on block-settings-closing event to reset
|
|
* otherwise delete block
|
|
*/
|
|
if (!this.needConfirmation) {
|
|
this.setConfirmation(true);
|
|
|
|
/**
|
|
* Subscribe on event.
|
|
* When toolbar block settings is closed but block deletion is not confirmed,
|
|
* then reset confirmation state
|
|
*/
|
|
this.api.events.on('block-settings-closed', this.resetConfirmation);
|
|
} else {
|
|
/**
|
|
* Unsubscribe from block-settings closing event
|
|
*/
|
|
this.api.events.off('block-settings-closed', this.resetConfirmation);
|
|
|
|
this.api.blocks.delete();
|
|
this.api.toolbar.close();
|
|
this.api.tooltip.hide();
|
|
|
|
/**
|
|
* Prevent firing ui~documentClicked that can drop currentBlock pointer
|
|
*/
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* change tune state
|
|
*
|
|
* @param {boolean} state - delete confirmation state
|
|
*/
|
|
private setConfirmation(state: boolean): void {
|
|
this.needConfirmation = state;
|
|
this.nodes.button.classList.add(this.CSS.buttonConfirm);
|
|
}
|
|
}
|