2018-12-05 15:02:09 +01:00
|
|
|
import $ from '../../dom';
|
2020-06-03 10:17:29 +02:00
|
|
|
import { API, BlockTool, BlockToolData, BlockToolConstructorOptions } from '../../../../types';
|
2018-12-05 15:02:09 +01:00
|
|
|
|
2020-06-03 10:17:29 +02:00
|
|
|
export interface StubData extends BlockToolData{
|
|
|
|
title: string;
|
|
|
|
savedData: BlockToolData;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This tool will be shown in place of a block without corresponding plugin
|
|
|
|
* It will store its data inside and pass it back with article saving
|
|
|
|
*/
|
2018-12-05 15:02:09 +01:00
|
|
|
export default class Stub implements BlockTool {
|
|
|
|
/**
|
|
|
|
* Stub styles
|
2020-06-03 10:17:29 +02:00
|
|
|
*
|
|
|
|
* @type {{wrapper: string, info: string, title: string, subtitle: string}}
|
2018-12-05 15:02:09 +01:00
|
|
|
*/
|
|
|
|
private CSS = {
|
|
|
|
wrapper: 'ce-stub',
|
|
|
|
info: 'ce-stub__info',
|
|
|
|
title: 'ce-stub__title',
|
|
|
|
subtitle: 'ce-stub__subtitle',
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Main stub wrapper
|
|
|
|
*/
|
|
|
|
private readonly wrapper: HTMLElement;
|
|
|
|
|
2020-06-03 10:17:29 +02:00
|
|
|
/**
|
|
|
|
* Editor.js API
|
|
|
|
*/
|
|
|
|
private readonly api: API;
|
|
|
|
|
2018-12-05 15:02:09 +01:00
|
|
|
/**
|
|
|
|
* Stub title — tool name
|
|
|
|
*/
|
|
|
|
private readonly title: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Stub hint
|
|
|
|
*/
|
|
|
|
private readonly subtitle: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Original Tool data
|
|
|
|
*/
|
|
|
|
private readonly savedData: BlockToolData;
|
|
|
|
|
2020-06-03 10:17:29 +02:00
|
|
|
/**
|
|
|
|
* @param options - constructor options
|
|
|
|
* @param options.data - stub tool data
|
|
|
|
* @param options.api - Editor.js API
|
|
|
|
*/
|
|
|
|
constructor({ data, api }: BlockToolConstructorOptions<StubData>) {
|
|
|
|
this.api = api;
|
|
|
|
this.title = data.title || this.api.i18n.t('Error');
|
|
|
|
this.subtitle = this.api.i18n.t('The block can not be displayed correctly.');
|
2018-12-05 15:02:09 +01:00
|
|
|
this.savedData = data.savedData;
|
|
|
|
|
|
|
|
this.wrapper = this.make();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns stub holder
|
2020-06-03 10:17:29 +02:00
|
|
|
*
|
|
|
|
* @returns {HTMLElement}
|
2018-12-05 15:02:09 +01:00
|
|
|
*/
|
|
|
|
public render(): HTMLElement {
|
|
|
|
return this.wrapper;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Return original Tool data
|
2020-06-03 10:17:29 +02:00
|
|
|
*
|
|
|
|
* @returns {BlockToolData}
|
2018-12-05 15:02:09 +01:00
|
|
|
*/
|
|
|
|
public save(): BlockToolData {
|
|
|
|
return this.savedData;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Create Tool html markup
|
2020-06-03 10:17:29 +02:00
|
|
|
*
|
|
|
|
* @returns {HTMLElement}
|
2018-12-05 15:02:09 +01:00
|
|
|
*/
|
|
|
|
private make(): HTMLElement {
|
|
|
|
const wrapper = $.make('div', this.CSS.wrapper);
|
|
|
|
const icon = $.svg('sad-face', 52, 52);
|
|
|
|
const infoContainer = $.make('div', this.CSS.info);
|
|
|
|
const title = $.make('div', this.CSS.title, {
|
|
|
|
textContent: this.title,
|
|
|
|
});
|
|
|
|
const subtitle = $.make('div', this.CSS.subtitle, {
|
|
|
|
textContent: this.subtitle,
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper.appendChild(icon);
|
|
|
|
|
|
|
|
infoContainer.appendChild(title);
|
|
|
|
infoContainer.appendChild(subtitle);
|
|
|
|
|
|
|
|
wrapper.appendChild(infoContainer);
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
}
|
|
|
|
}
|