@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
529 lines (528 loc) • 26.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { RibbonGroupBase } from '../ribbon-interfaces';
import { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { createElement, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';
import { FontHelper } from '../../helper/font-helper';
import { ComboBox } from '@syncfusion/ej2-dropdowns';
// Font group constants
export var FONT_GROUP_ID = '_font_group';
export var FONT_FAMILY_ID = '_font_family';
export var FONT_SIZE_ID = '_font_size';
export var BOLD_ID = '_bold';
export var ITALIC_ID = '_italic';
export var UNDERLINE_ID = '_underline';
export var STRIKETHROUGH_ID = '_strikethrough';
export var SUPERSCRIPT_ID = '_superscript';
export var SUBSCRIPT_ID = '_subscript';
export var FONT_COLOR_ID = '_font_color';
export var HIGHLIGHT_COLOR_ID = '_highlight_color';
export var CLEAR_FORMAT_ID = '_clear_format';
export var GROW_FONT_ID = '_grow_format';
export var SHRINK_FONT_ID = '_shrink_format';
export var CHANGE_CASE_ID = '_change_case';
/**
* FontGroup class for handling font formatting operations in Document Editor ribbon
* @private
*/
var FontGroup = /** @class */ (function (_super) {
__extends(FontGroup, _super);
function FontGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.appliedHighlightColor = 'rgb(255, 255, 0)';
_this.highlightColorHandlers = [];
return _this;
}
/**
* Get the Ribbon group model for Font formatting
* @returns {RibbonGroupModel} - Ribbon group model for Font formatting
* @private
*/
FontGroup.prototype.getGroupModel = function () {
var _this = this;
var id = this.ribbonId;
return {
id: id + FONT_GROUP_ID,
cssClass: 'e-font-group',
groupIconCss: 'e-icons e-de-ctnr-fontcolor',
header: this.localObj.getConstant('Font'),
isCollapsible: false,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('More Font Options'),
orientation: 'Row',
showLauncherIcon: true,
launcherIconKeyTip: 'FG',
collections: [
{
id: id + '_font-collection',
items: [
{
type: 'ComboBox',
keyTip: 'FF',
allowedSizes: RibbonItemSize.Small,
comboBoxSettings: {
dataSource: this.container.documentEditorSettings.fontFamilies,
label: this.localObj.getConstant('Font'),
width: '150px',
popupHeight: '250px',
popupWidth: '150px',
cssClass: 'e-de-prop-dropdown',
allowFiltering: true,
change: function () {
_this.changeFontFamily();
}
},
id: id + FONT_FAMILY_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Font') }
},
{
type: 'ComboBox',
keyTip: 'FS',
allowedSizes: RibbonItemSize.Small,
comboBoxSettings: {
label: this.localObj.getConstant('Font Size'),
dataSource: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96'],
width: '65px',
cssClass: 'e-de-prop-dropdown',
showClearButton: false,
change: function () {
_this.changeFontSize();
}
},
id: id + FONT_SIZE_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Font Size') }
}, {
type: 'Button',
keyTip: 'FG',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Grow Font Size'),
iconCss: 'e-icons e-de-ctnr-increase-fontsize',
clicked: function () {
_this.increaseFontSize();
}
},
id: id + GROW_FONT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Grow Font Size') }
},
{
type: 'Button',
keyTip: 'FK',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Shrink Font Size'),
iconCss: 'e-icons e-de-ctnr-decrease-fontsize',
clicked: function () {
_this.decreaseFontSize();
}
},
id: id + SHRINK_FONT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Shrink Font Size') }
}, {
type: 'DropDown',
keyTip: 'CC',
allowedSizes: RibbonItemSize.Small,
dropDownSettings: {
iconCss: 'e-icons e-de-ctnr-change-case',
content: this.localObj.getConstant('Change case Tooltip'),
items: FontHelper.getChangeCaseItems(this.localObj, id),
select: function (args) {
_this.changeCaseAction(args);
}
},
id: id + CHANGE_CASE_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Change case Tooltip') }
}
]
}, {
items: [{
type: 'Button',
keyTip: '1',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Bold Tooltip'),
cssClass: 'e-de-icon-Bold',
iconCss: 'e-icons e-de-ctnr-bold',
isToggle: true,
clicked: function () {
_this.boldAction();
}
},
id: id + BOLD_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Bold Tooltip') }
},
{
type: 'Button',
keyTip: '2',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Italic Tooltip'),
cssClass: 'e-de-icon-Italic',
iconCss: 'e-icons e-de-ctnr-italic',
isToggle: true,
clicked: function () {
_this.italicAction();
}
},
id: id + ITALIC_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Italic Tooltip') }
},
{
type: 'Button',
keyTip: '3',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Underline Tooltip'),
cssClass: 'e-de-icon-Underline',
iconCss: 'e-icons e-de-ctnr-underline',
isToggle: true,
clicked: function () {
_this.underlineAction();
}
},
id: id + UNDERLINE_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Underline Tooltip') }
},
{
type: 'Button',
keyTip: '4',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Strikethrough'),
cssClass: 'e-de-icon-Strikethrough',
iconCss: 'e-icons e-de-ctnr-strikethrough',
isToggle: true,
clicked: function () {
_this.strikethroughAction();
}
},
id: id + STRIKETHROUGH_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Strikethrough') }
},
{
type: 'Button',
keyTip: '5',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Superscript Tooltip'),
cssClass: 'e-de-icon-Superscript',
iconCss: 'e-icons e-de-ctnr-superscript',
isToggle: true,
clicked: function () {
_this.superscriptAction();
}
},
id: id + SUPERSCRIPT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Superscript Tooltip') }
},
{
type: 'Button',
keyTip: '6',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Subscript Tooltip'),
cssClass: 'e-de-icon-Subscript',
iconCss: 'e-icons e-de-ctnr-subscript',
isToggle: true,
clicked: function () {
_this.subscriptAction();
}
},
id: id + SUBSCRIPT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Subscript Tooltip') }
},
{
type: 'ColorPicker',
keyTip: 'I',
allowedSizes: RibbonItemSize.Small,
colorPickerSettings: {
label: this.localObj.getConstant('Font color'),
htmlAttributes: { 'aria-label': this.localObj.getConstant('Font color') },
value: '#000000',
change: function (args) {
_this.changeFontColor(args);
}
},
id: id + FONT_COLOR_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Font color') }
},
{
type: 'SplitButton',
keyTip: 'FC',
allowedSizes: RibbonItemSize.Small,
splitButtonSettings: this.createHighlightColorSplitButton(),
id: id + HIGHLIGHT_COLOR_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Text highlight color') }
},
{
type: 'Button',
keyTip: 'E',
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: this.localObj.getConstant('Clear all formatting'),
iconCss: 'e-icons e-de-ctnr-clearall',
clicked: function () {
_this.clearFormatAction();
}
},
id: id + CLEAR_FORMAT_ID,
ribbonTooltipSettings: { content: this.localObj.getConstant('Clear all formatting') }
}
]
}
]
};
};
/**
* Update font UI based on selection state
* @returns {void}
* @private
*/
FontGroup.prototype.updateSelection = function () {
// Get the selection character format
if (!this.documentEditor.selection) {
return;
}
var characterFormat = this.documentEditor.selection.characterFormat;
var id = this.ribbonId;
// Update toggle buttons
this.updateToggleButtonState(id + BOLD_ID, characterFormat.bold);
this.updateToggleButtonState(id + ITALIC_ID, characterFormat.italic);
this.updateToggleButtonState(id + UNDERLINE_ID, characterFormat.underline !== 'None');
this.updateToggleButtonState(id + STRIKETHROUGH_ID, characterFormat.strikethrough !== 'None');
this.updateToggleButtonState(id + SUPERSCRIPT_ID, characterFormat.baselineAlignment === 'Superscript');
this.updateToggleButtonState(id + SUBSCRIPT_ID, characterFormat.baselineAlignment === 'Subscript');
// Update font family dropdown
if (characterFormat.fontFamily) {
var fontFamily = void 0;
if (!isNullOrUndefined(characterFormat.renderedFontFamily) &&
!isNullOrUndefined(characterFormat.fontFamily)) {
fontFamily = characterFormat.renderedFontFamily;
}
else {
fontFamily = characterFormat.fontFamily;
}
var fontFamilyElement = document.getElementById(id + FONT_FAMILY_ID);
if (fontFamilyElement) {
fontFamilyElement.value = fontFamily;
}
}
else {
var fontFamilyElement = document.getElementById(id + FONT_FAMILY_ID);
if (fontFamilyElement) {
var fontFamilyInstance = getInstance(fontFamilyElement, ComboBox);
fontFamilyInstance.value = null;
fontFamilyElement.value = null;
}
}
// Update font size dropdown
if (characterFormat.fontSize) {
var fontSize = characterFormat.fontSize.toString();
var fontSizeElement = document.getElementById(id + FONT_SIZE_ID);
if (fontSizeElement) {
fontSizeElement.value = fontSize;
}
}
else {
var fontSizeElement = document.getElementById(id + FONT_SIZE_ID);
if (fontSizeElement) {
var fontSizeInstance = getInstance(fontSizeElement, ComboBox);
fontSizeInstance.value = null;
fontSizeElement.value = null;
}
}
// Update highlight color button
if (characterFormat.highlightColor) {
var highlightColor = document.getElementById(id + HIGHLIGHT_COLOR_ID);
if (highlightColor) {
var highlightColorElement = highlightColor.querySelector('.e-split-btn-icon');
if (highlightColorElement) {
highlightColorElement.style.backgroundColor = this.getBackgroundColorFromHighlightColor(characterFormat.highlightColor);
}
}
}
// Update font color button
if (characterFormat.fontColor) {
var fontColor = characterFormat.fontColor;
if (fontColor === 'empty' || fontColor === '#00000000') {
fontColor = '#000000';
}
var fontColorElement = document.getElementById(id + FONT_COLOR_ID);
if (fontColorElement) {
var fontColorInput = fontColorElement.querySelector('input');
if (fontColorInput) {
fontColorInput.value = fontColor;
}
}
}
};
FontGroup.prototype.updateToggleButtonState = function (buttonId, isActive) {
// Use Ribbon's getItem method for better performance
var ribbonObj = this.container.ribbon.ribbon;
if (ribbonObj) {
var button = document.getElementById(buttonId);
if (button) {
if (isActive) {
button.classList.add('e-active');
button.setAttribute('aria-pressed', 'true');
}
else {
button.classList.remove('e-active');
button.setAttribute('aria-pressed', 'false');
}
}
}
};
FontGroup.prototype.getHighlightColorItems = function () {
return FontHelper.getHighlightColorItems(this.localObj, this.ribbonId);
};
FontGroup.prototype.createHighlightColorSplitButton = function () {
var _this = this;
var highlightIconCss = 'e-de-ctnr-highlight e-icons';
if (this.isRtl) {
highlightIconCss += ' e-de-flip';
}
var colorListDropDiv = createElement('div', {
id: this.ribbonId + '_color_list_div',
styles: 'visibility: hidden'
});
// Create the HTML template for highlight color dropdown
var highlightColorElement = createElement('ul', {
id: this.ribbonId + '_ribbon_highlight_color',
styles: 'visibility: visible; display: grid; grid-template-columns: repeat(5,1fr); padding: 2px 2px; box-shadow: none'
});
colorListDropDiv.appendChild(highlightColorElement);
var highlightColors = this.getHighlightColorItems();
highlightColors.forEach(function (color) {
var colorDiv = createElement('li', { className: 'e-de-ctnr-hglt-btn' });
colorDiv.style.backgroundColor = color.backgroundColor;
highlightColorElement.appendChild(colorDiv);
// Create bound handler and store reference
var handler = _this.onHighlightColorClick.bind(_this, color.backgroundColor);
colorDiv.addEventListener('click', handler);
_this.highlightColorHandlers.push({ element: colorDiv, handler: handler });
});
var noColorList = createElement('ul', { styles: 'visibility: visible; padding:2px' });
var noColorListItem = createElement('li', { className: 'e-hglt-no-color' });
colorListDropDiv.appendChild(noColorList);
noColorList.appendChild(noColorListItem);
var noColorDiv = createElement('div', { styles: 'width:24px;height:24px;background-color:#ffffff;margin:3px;', id: 'noColorDiv' });
noColorListItem.appendChild(noColorDiv);
var noColorLabel = createElement('div', { innerHTML: this.localObj.getConstant('No color'), className: 'e-de-ctnr-hglt-no-color' });
noColorDiv.appendChild(noColorLabel);
noColorDiv.addEventListener('click', this.onHighlightColorClick.bind(this, 'transparent'));
// Create bound handler and store reference
var noColorHandler = this.onHighlightColorClick.bind(this, 'transparent');
noColorDiv.addEventListener('click', noColorHandler);
this.highlightColorHandlers.push({ element: noColorDiv, handler: noColorHandler });
return {
target: colorListDropDiv,
iconCss: highlightIconCss,
content: this.localObj.getConstant('Text highlight color'),
// cssClass: this.splitButtonClass,
htmlAttributes: { 'aria-label': this.localObj.getConstant('Text highlight color') },
items: this.getHighlightColorItems().map(function (color) { return ({ id: color.id, text: color.text }); }),
select: function (args) {
_this.applyHighlightColor(args.item.backgroundColor);
},
beforeOpen: function () {
colorListDropDiv.style.visibility = 'visible';
},
beforeClose: function () {
colorListDropDiv.style.visibility = 'hidden';
},
click: function () {
_this.applyHighlightColor(_this.appliedHighlightColor);
}
};
};
FontGroup.prototype.onHighlightColorClick = function (color, event) {
this.applyHighlightColor(color);
// Remove the 'e-color-selected' class from all children
var container = event.currentTarget.closest('#' + this.ribbonId + '_color_list_div')
|| document.getElementById(this.ribbonId + '_color_list_div')
|| event.currentTarget.parentElement;
if (container) {
container.querySelectorAll('.e-color-selected').forEach(function (el) {
el.classList.remove('e-color-selected');
});
}
// Add the 'e-color-selected' class to the clicked element
event.currentTarget.classList.add('e-color-selected');
};
FontGroup.prototype.applyHighlightColor = function (color) {
this.appliedHighlightColor = FontHelper.applyHighlightColor(this.documentEditor, color);
};
FontGroup.prototype.getBackgroundColorFromHighlightColor = function (highlightColor) {
return FontHelper.getBackgroundColorFromHighlightColor(highlightColor);
};
FontGroup.prototype.boldAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'bold');
};
FontGroup.prototype.italicAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'italic');
};
FontGroup.prototype.underlineAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'underline');
};
FontGroup.prototype.strikethroughAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'strikethrough');
};
FontGroup.prototype.superscriptAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'superscript');
};
FontGroup.prototype.subscriptAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'subscript');
};
FontGroup.prototype.changeCaseAction = function (args) {
FontHelper.applyChangeCase(this.documentEditor, this.localObj, args.item.text);
};
FontGroup.prototype.changeFontFamily = function () {
var fontFamilyElement = document.getElementById(this.ribbonId + FONT_FAMILY_ID);
if (fontFamilyElement) {
var fontFamily = fontFamilyElement.value;
FontHelper.changeFontFamily(this.documentEditor, fontFamily);
}
};
FontGroup.prototype.changeFontSize = function () {
var fontSizeElement = document.getElementById(this.ribbonId + FONT_SIZE_ID);
if (fontSizeElement) {
var fontSize = fontSizeElement.value;
FontHelper.changeFontSize(this.documentEditor, fontSize);
}
};
FontGroup.prototype.changeFontColor = function (args) {
FontHelper.changeFontColor(this.documentEditor, args.currentValue.hex);
};
FontGroup.prototype.clearFormatAction = function () {
FontHelper.applyFontFormatting(this.documentEditor, 'clearFormat');
};
FontGroup.prototype.increaseFontSize = function () {
FontHelper.increaseFontSize(this.documentEditor);
};
FontGroup.prototype.decreaseFontSize = function () {
FontHelper.decreaseFontSize(this.documentEditor);
};
FontGroup.prototype.destroy = function () {
// Remove highlight color event listeners
this.highlightColorHandlers.forEach(function (item) {
if (item.element && item.handler) {
item.element.removeEventListener('click', item.handler);
}
});
this.highlightColorHandlers = [];
};
return FontGroup;
}(RibbonGroupBase));
export { FontGroup };