@syncfusion/ej2-richtexteditor
Version:
Essential JS 2 RichTextEditor component
280 lines (277 loc) • 14.8 kB
JavaScript
import { select, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
import { RenderType } from '../base/enum';
import * as events from '../base/constant';
import * as classes from '../base/classes';
import { getIndex, toObjectLowerCase } from '../base/util';
import { templateItems, tools } from '../models/items';
/**
* `Color Picker` module is used to handle ColorPicker actions.
*/
var ColorPickerInput = /** @class */ (function () {
function ColorPickerInput(parent, serviceLocator) {
this.tools = {};
this.parent = parent;
this.locator = serviceLocator;
this.renderFactory = this.locator.getService('rendererFactory');
this.addEventListener();
if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {
extend(this.tools, tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);
}
else {
this.tools = tools;
}
}
ColorPickerInput.prototype.initializeInstance = function () {
this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);
};
/**
* renderColorPickerInput method
*
* @param {IColorPickerRenderArgs} args - specify the arguments.
* @param {HTMLElement} targetElement - specify the target element.
* @returns {void}
* @hidden
*/
ColorPickerInput.prototype.renderColorPickerInput = function (args, targetElement) {
var _this = this;
this.initializeInstance();
var suffixID = args.containerType;
var tbElement = args.container;
var targetID;
var options;
templateItems.forEach(function (item) {
if (getIndex(item, args.items) !== -1) {
switch (item) {
case 'fontcolor': {
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_FONT_COLORPICKER + ' ' +
_this.tools[item.toLocaleLowerCase()].icon
+ ' ' + classes.CLS_ICONS,
value: _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: select('#' + _this.parent.getID() + '_' + suffixID + '_FontColor', tbElement),
target: (targetID)
};
if (!isNullOrUndefined(options.element.nextElementSibling) &&
options.element.nextElementSibling.classList.contains(classes.CLS_DROPDOWN)) {
return;
}
_this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor', args.containerType);
break;
}
case 'backgroundcolor': {
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_BACKGROUND_COLORPICKER + ' ' +
_this.tools[item.toLocaleLowerCase()].icon + ' ' +
classes.CLS_ICONS,
value: _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: select('#' + _this.parent.getID() + '_' + suffixID + '_BackgroundColor', tbElement),
target: (targetID)
};
if (!isNullOrUndefined(options.element.nextElementSibling) &&
options.element.nextElementSibling.classList.contains(classes.CLS_DROPDOWN)) {
return;
}
_this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor', args.containerType);
break;
}
case 'bordercolor': {
var bdrColor = targetElement.style.borderColor;
if (bdrColor.match(/\d+/g)) {
var hex = '#' + bdrColor.match(/\d+/g).slice(0, 3).map(function (n) {
var h = parseInt(n, 10).toString(16);
return h.length === 1 ? '0' + h : h;
}).join('');
bdrColor = hex;
}
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_BORDERCOLOR_COLORPICKER,
value: bdrColor ? bdrColor : _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: tbElement,
target: (targetID)
};
_this.borderColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'bordercolor', args.containerType);
break;
}
case 'tablebackgroundcolor': {
var bgColor = targetElement.style.backgroundColor;
if (bgColor.match(/\d+/g)) {
var hex = '#' + bgColor.match(/\d+/g).slice(0, 3).map(function (n) {
var h = parseInt(n, 10).toString(16);
return h.length === 1 ? '0' + h : h;
}).join('');
bgColor = hex;
}
options = {
cssClass: classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_DROPDOWN + ' ' + classes.CLS_TABLE_BGCOLOR_COLORPICKER,
value: bgColor ? bgColor : _this.tools[item.toLocaleLowerCase()].value,
command: _this.tools[item.toLocaleLowerCase()].command,
subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
element: tbElement,
target: (targetID)
};
_this.tableBackgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'tablebackgroundcolor', args.containerType);
break;
}
}
}
});
if (this.parent.inlineMode.enable) {
this.setCssClass({ cssClass: this.parent.getCssClass() });
}
};
ColorPickerInput.prototype.destroy = function () {
this.removeEventListener();
this.destroyColorPicker();
this.fontColorPicker = null;
this.backgroundColorPicker = null;
this.borderColorPicker = null;
this.tableBackgroundColorPicker = null;
this.tools = {};
};
/**
* destroyColorPicker method
*
* @returns {void}
* @hidden
*/
ColorPickerInput.prototype.destroyColorPicker = function () {
if (this.fontColorPicker && !this.fontColorPicker.isDestroyed) {
this.fontColorPicker.destroy();
}
if (this.backgroundColorPicker && !this.backgroundColorPicker.isDestroyed) {
this.backgroundColorPicker.destroy();
}
if (this.borderColorPicker && !this.borderColorPicker.isDestroyed) {
this.borderColorPicker.destroy();
}
if (this.tableBackgroundColorPicker && !this.tableBackgroundColorPicker.isDestroyed) {
this.tableBackgroundColorPicker.destroy();
}
};
ColorPickerInput.prototype.setRtl = function (args) {
if (this.fontColorPicker) {
this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });
}
if (this.backgroundColorPicker) {
this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
}
if (this.borderColorPicker) {
this.borderColorPicker.setProperties({ enableRtl: args.enableRtl });
}
if (this.tableBackgroundColorPicker) {
this.tableBackgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
}
};
ColorPickerInput.prototype.setCssClass = function (e) {
this.updateCss(this.fontColorPicker, e);
this.updateCss(this.backgroundColorPicker, e);
this.updateCss(this.borderColorPicker, e);
this.updateCss(this.tableBackgroundColorPicker, e);
};
ColorPickerInput.prototype.updateCss = function (colorPickerObj, e) {
if (colorPickerObj && e.cssClass) {
if (isNullOrUndefined(e.oldCssClass)) {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').replace(' ', ' ').trim() + ' ' + e.cssClass).trim() });
}
}
};
ColorPickerInput.prototype.addEventListener = function () {
this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);
this.parent.on(events.rtlMode, this.setRtl, this);
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
this.parent.on(events.bindCssClass, this.setCssClass, this);
this.parent.on(events.showColorPicker, this.showColorPicker, this);
};
ColorPickerInput.prototype.showColorPicker = function (e) {
if (!isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === 'fontcolor')) {
this.fontColorPicker.toggle();
}
else if (!isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === 'backgroundcolor')) {
this.backgroundColorPicker.toggle();
}
};
ColorPickerInput.prototype.onPropertyChanged = function (model) {
var newProp = model.newProp;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'fontColor':
if (this.fontColorPicker) {
for (var _b = 0, _c = Object.keys(newProp.fontColor); _b < _c.length; _b++) {
var font = _c[_b];
switch (font) {
case 'default': {
this.fontColorPicker.setProperties({ value: newProp.fontColor.default });
break;
}
case 'mode':
this.fontColorPicker.showButtons = newProp.fontColor.mode === 'Picker' ? true : false;
this.fontColorPicker.setProperties({ mode: newProp.fontColor.mode });
break;
case 'columns':
this.fontColorPicker.setProperties({ columns: newProp.fontColor.columns });
break;
case 'colorCode':
this.fontColorPicker.setProperties({ presetColors: newProp.fontColor.colorCode });
break;
case 'modeSwitcher':
this.fontColorPicker.setProperties({ modeSwitcher: newProp.fontColor.modeSwitcher });
break;
case 'showRecentColors':
this.fontColorPicker.setProperties({ showRecentColors: newProp.fontColor.showRecentColors });
break;
}
}
}
break;
case 'backgroundColor':
if (this.backgroundColorPicker) {
for (var _d = 0, _e = Object.keys(newProp.backgroundColor); _d < _e.length; _d++) {
var background = _e[_d];
switch (background) {
case 'default': {
this.backgroundColorPicker.setProperties({ value: newProp.backgroundColor.default });
break;
}
case 'mode':
this.backgroundColorPicker.showButtons = newProp.backgroundColor.mode === 'Picker' ? true : false;
this.backgroundColorPicker.setProperties({ mode: newProp.backgroundColor.mode });
break;
case 'columns':
this.backgroundColorPicker.setProperties({ columns: newProp.backgroundColor.columns });
break;
case 'colorCode':
this.backgroundColorPicker.setProperties({ presetColors: newProp.backgroundColor.colorCode });
break;
case 'modeSwitcher':
this.backgroundColorPicker.setProperties({ modeSwitcher: newProp.backgroundColor.modeSwitcher });
break;
case 'showRecentColors':
this.backgroundColorPicker.setProperties({ showRecentColors: newProp.backgroundColor.showRecentColors });
break;
}
}
}
break;
}
}
};
ColorPickerInput.prototype.removeEventListener = function () {
this.parent.off(events.toolbarRenderComplete, this.renderColorPickerInput);
this.parent.off(events.rtlMode, this.setRtl);
this.parent.off(events.modelChanged, this.onPropertyChanged);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.showColorPicker, this.showColorPicker);
};
return ColorPickerInput;
}());
export { ColorPickerInput };