@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
211 lines (210 loc) • 9 kB
JavaScript
import { createElement, remove } from '@syncfusion/ej2-base';
import { RibbonItemType, RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { BORDERS_SHADING_GROUP_ID, BORDERS_DROPDOWN_ID, BORDER_COLOR_PICKER_ID, BORDER_WIDTH_DROPDOWN_ID } from './constants';
import { BordersHelper } from '../../helper/borders-helper';
/**
* BordersGroup class provides the borders and shading options for table design
* @private
*/
var BordersGroup = /** @class */ (function () {
/**
* Constructor for the BordersGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function BordersGroup(container) {
this.borderColor = '#000000';
this.borderWidth = '1px';
this.container = container;
this.localObj = this.container.localObj;
this.commonID = this.container.element.id + RIBBON_ID;
// Create a hidden container for templates
this.templateContainer = createElement('div', {
styles: 'position: absolute; visibility: hidden; height: 0; width: 0; overflow: hidden;'
});
document.body.appendChild(this.templateContainer);
}
/**
* Gets the Borders group configuration
* @returns {RibbonGroupModel} RibbonGroupModel for the Borders group
*/
BordersGroup.prototype.getBordersGroup = function () {
return {
id: this.commonID + BORDERS_SHADING_GROUP_ID,
header: this.localObj.getConstant('Borders'),
showLauncherIcon: true,
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Borders'),
collections: [
{
items: [
this.getBordersDropdown()
]
},
{
items: [
this.getBorderColorPicker(),
this.getBorderWidthDropdown()
]
}
]
};
};
/**
* Gets the Borders dropdown configuration
* @returns {RibbonItemModel} RibbonItemModel for the Borders dropdown
*/
BordersGroup.prototype.getBordersDropdown = function () {
var _this = this;
return {
type: RibbonItemType.DropDown,
id: this.commonID + BORDERS_DROPDOWN_ID,
keyTip: 'B',
dropDownSettings: {
content: this.localObj.getConstant('Borders'),
iconCss: 'e-icons e-de-ctnr-allborders',
items: BordersHelper.getBorderDropdownItems(this.localObj, this.commonID),
select: function (args) {
_this.applyBorder(args.item.text);
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Table Borders')
}
};
};
/**
* Gets the Border Color Picker configuration
* @returns {RibbonItemModel} RibbonItemModel for the Border Color Picker
*/
BordersGroup.prototype.getBorderColorPicker = function () {
var _this = this;
return {
type: RibbonItemType.ColorPicker,
keyTip: 'C',
id: this.commonID + BORDER_COLOR_PICKER_ID,
allowedSizes: RibbonItemSize.Medium,
colorPickerSettings: {
value: this.borderColor,
cssClass: 'e-de-ribbon-border-color-picker e-de-prop-font-button ',
change: function (args) {
_this.borderColor = args.currentValue.hex;
},
noColor: true,
showButtons: false
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Border Color')
}
};
};
/**
* Gets the Border Width Dropdown configuration
* @returns {RibbonItemModel} RibbonItemModel for the Border Width Dropdown
*/
BordersGroup.prototype.getBorderWidthDropdown = function () {
var _this = this;
// Create a hidden container to hold the dropdown items
var divElement = createElement('div', { id: this.commonID + '_borderSizeTarget', styles: 'display:none' });
this.templateContainer.appendChild(divElement);
// Create a ul element to hold the list items
var ulTag = createElement('ul', {
styles: 'display: block; outline: 0px; width: 126px; height: auto;',
id: this.commonID + '_borderSizeListMenu'
});
divElement.appendChild(ulTag);
// Create dropdown items for different border sizes
this.createBorderSizeItems(ulTag);
return {
type: RibbonItemType.DropDown,
id: this.commonID + BORDER_WIDTH_DROPDOWN_ID,
keyTip: 'Y',
cssClass: 'e-de-ribbon-border-size-button',
allowedSizes: RibbonItemSize.Medium,
dropDownSettings: {
content: this.borderWidth,
iconCss: 'e-de-ctnr-strokesize e-icons',
cssClass: 'e-de-prop-bordersize e-de-ribbon-border-size-button',
target: divElement,
beforeOpen: function () {
divElement.style.display = 'block';
// Update border color for all size samples
var borderWidthElements = _this.widthOptions.getElementsByClassName('e-de-border-width');
for (var i = 0; i < borderWidthElements.length; i++) {
/* eslint-disable */
var element = borderWidthElements[i];
element.style.borderBottomColor = _this.borderColor;
}
},
beforeClose: function () {
divElement.style.display = 'none';
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Border Width')
}
};
};
/**
* Creates the border size dropdown items
* @param {HTMLElement} ulTag - The ul element to append the items to
* @returns {void}
*/
BordersGroup.prototype.createBorderSizeItems = function (ulTag) {
var _this = this;
// Add 'No Border' option
var noBorderOption = BordersHelper.createBorderWidthOption(ulTag, this.localObj.getConstant('No Border'), this.localObj);
noBorderOption.addEventListener('click', function () {
_this.container.ribbon.ribbon.getItem(_this.commonID + BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = _this.localObj.getConstant('No Border');
_this.onBorderWidthChange('No Border');
});
// Get border widths
var borderWidths = BordersHelper.getBorderWidthItems(this.localObj).slice(1); // Skip 'No Border'
// Add border width options
borderWidths.forEach(function (width) {
_this.widthOptions = BordersHelper.createBorderWidthOption(ulTag, width, _this.localObj);
_this.widthOptions.addEventListener('click', function () {
_this.container.ribbon.ribbon.getItem(_this.commonID + BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = width;
_this.onBorderWidthChange(width.replace(_this.localObj.getConstant('px'), 'px'));
});
});
};
/**
* Handles border width change
* @param {string} width - The selected border width
* @returns {void}
*/
BordersGroup.prototype.onBorderWidthChange = function (width) {
this.borderWidth = width;
// Get border dropdown
var borderDropdownItem = this.container.ribbon.ribbon.getItem(this.commonID + BORDER_WIDTH_DROPDOWN_ID);
if (borderDropdownItem && borderDropdownItem.dropDownSettings) {
borderDropdownItem.dropDownSettings.content = width;
// Force refresh the ribbon item
this.container.ribbon.ribbon.updateItem(borderDropdownItem);
}
};
/**
* Applies the border based on the selected option
* @param {string} borderId - The ID of the selected border option
* @returns {void}
*/
BordersGroup.prototype.applyBorder = function (borderId) {
var borderType = BordersHelper.getBorderType(borderId, this.localObj);
BordersHelper.applyBorder(this.container.documentEditor, borderType, this.borderColor, this.borderWidth);
};
/**
* Clean up resources when destroyed
* @returns {void}
*/
BordersGroup.prototype.destroy = function () {
remove(this.widthOptions);
this.widthOptions = undefined;
if (this.templateContainer && this.templateContainer.parentNode) {
this.templateContainer.parentNode.removeChild(this.templateContainer);
}
this.templateContainer = undefined;
};
return BordersGroup;
}());
export { BordersGroup };