@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
729 lines • 106 kB
JavaScript
import { classList, createElement, initializeCSPTemplate, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { WTableFormat, WBorder, WBorders, WShading, WCellFormat } from '../format/index';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColorPicker } from '@syncfusion/ej2-inputs';
/**
* The Borders and Shading dialog is used to modify borders and shading options for selected table or cells.
*/
var BordersAndShadingDialog = /** @class */ (function () {
/**
* @param {DocumentHelper} documentHelper - Specifies the document helper.
* @private
*/
function BordersAndShadingDialog(documentHelper) {
var _this = this;
this.cellFormat = new WCellFormat();
this.tableFormat = new WTableFormat();
this.isShadingChanged = false;
this.handleSettingCheckBoxActionHandler = this.onhandleSettingCheckBoxActionClicked.bind(this);
this.handlePreviewCheckBoxActionHandler = this.onhandlePreviewCheckBoxActionClicked.bind(this);
/**
* @private
* @returns {void}
*/
this.applyBordersShadingsProperties = function () {
var tablePropertiesDialog = _this.documentHelper.owner.tablePropertiesDialogModule;
var selectedCell = _this.documentHelper.selection.start.paragraph.associatedCell;
//Need to bind the properties with current cell and current table formats.
var borders = undefined;
if (_this.checkClassName(_this.previewDivTopTop) || _this.checkClassName(_this.previewDivTopBottom)
|| _this.checkClassName(_this.previewDivTopCenter) || _this.checkClassName(_this.previewDivBottomcenter)
|| _this.checkClassName(_this.previewDivBottomLeft) || _this.checkClassName(_this.previewDivBottomRight)
|| _this.checkClassName(_this.previewDivDiagonalRight) || _this.checkClassName(_this.previewDivLeftDiagonal)) {
borders = new WBorders();
if (_this.checkClassName(_this.previewDivTopTop)) {
borders.top = _this.getBorder('top');
}
if (_this.checkClassName(_this.previewDivTopBottom)) {
borders.bottom = _this.getBorder('bottom');
}
if (_this.checkClassName(_this.previewDivBottomLeft)) {
borders.left = _this.getBorder('left');
}
if (_this.checkClassName(_this.previewDivBottomRight)) {
borders.right = _this.getBorder('right');
}
if (_this.checkClassName(_this.previewDivTopCenter)) {
borders.horizontal = _this.getBorder('horizontal');
}
if (_this.checkClassName(_this.previewDivBottomcenter)) {
borders.vertical = _this.getBorder('vertical');
}
if (_this.checkClassName(_this.previewDivLeftDiagonal)) {
borders.diagonalDown = _this.getBorder('diagonalDown');
}
if (_this.checkClassName(_this.previewDivDiagonalRight)) {
borders.diagonalUp = _this.getBorder('diagonalUp');
}
}
var shading = new WShading();
var editorModule = _this.documentHelper.owner.editorModule;
if (_this.isShadingChanged) {
_this.isShadingChanged = false;
shading.backgroundColor = _this.shadingColorPicker.value;
}
if (_this.ulelementShading.value === 'Cell') {
if (tablePropertiesDialog) {
tablePropertiesDialog.isCellBordersAndShadingUpdated = true;
}
_this.cellFormat.borders = new WBorders();
if (!isNullOrUndefined(borders)) {
editorModule.applyBordersInternal(_this.cellFormat.borders, borders);
}
else if (_this.noneDiv.classList.contains('e-de-table-border-inside-setting-click')) {
editorModule.applyBordersInternal(_this.cellFormat.borders, new WBorders());
}
// Once option has been added for texture and foreground, need to handle this similar to Shading Fill.
if (!isNullOrUndefined(selectedCell.cellFormat.shading)) {
shading.foregroundColor = selectedCell.cellFormat.shading.foregroundColor;
shading.textureStyle = selectedCell.cellFormat.shading.textureStyle;
}
_this.cellFormat.shading = new WShading();
editorModule.applyShading(_this.cellFormat.shading, shading);
}
else if (_this.ulelementShading.value === 'Table') {
if (tablePropertiesDialog) {
tablePropertiesDialog.isTableBordersAndShadingUpdated = true;
}
var currentTableFormat = _this.documentHelper.owner.selectionModule.tableFormat.table.tableFormat;
_this.tableFormat.copyFormat(currentTableFormat);
_this.tableFormat.borders = new WBorders();
// when we copy a table and paste it in documentEditor, in that case rowFormat and cellFormat has a border value instead of tableFormat. So, we need to clear the border value from rowFormat and cellFormat.
if (!isNullOrUndefined(borders) || _this.noneDiv.classList.contains('e-de-table-border-inside-setting-click')) {
var table = _this.documentHelper.owner.selectionModule.tableFormat.table;
for (var _i = 0, _a = table.childWidgets; _i < _a.length; _i++) {
var rowWidget = _a[_i];
_this.updateBorder(table.tableFormat.borders.left, rowWidget.rowFormat.borders.left);
_this.updateBorder(table.tableFormat.borders.top, rowWidget.rowFormat.borders.top);
_this.updateBorder(table.tableFormat.borders.right, rowWidget.rowFormat.borders.right);
_this.updateBorder(table.tableFormat.borders.bottom, rowWidget.rowFormat.borders.bottom);
var rowHorizontalBorder = rowWidget.rowFormat.borders.horizontal;
var tableHorizontalBorder = table.tableFormat.borders.horizontal;
if ((rowHorizontalBorder.lineStyle === 'Single' && tableHorizontalBorder.lineStyle === 'None') ||
(rowHorizontalBorder.lineStyle === 'Cleared' && tableHorizontalBorder.lineStyle === 'Cleared')) {
tableHorizontalBorder.lineStyle = 'Single';
tableHorizontalBorder.lineWidth = rowHorizontalBorder.lineWidth;
}
var rowVerticalBorder = rowWidget.rowFormat.borders.vertical;
var tableVerticalBorder = table.tableFormat.borders.vertical;
if ((rowVerticalBorder.lineStyle === 'Single' && tableVerticalBorder.lineStyle === 'None') ||
(rowVerticalBorder.lineStyle === 'Cleared' && tableVerticalBorder.lineStyle === 'Cleared')) {
tableVerticalBorder.lineStyle = 'Single';
tableVerticalBorder.lineWidth = rowVerticalBorder.lineWidth;
}
rowWidget.rowFormat.borders.clearFormat();
for (var _b = 0, _c = rowWidget.childWidgets; _b < _c.length; _b++) {
var cellWidget = _c[_b];
cellWidget.cellFormat.borders.clearFormat();
}
}
}
if (!isNullOrUndefined(borders)) {
editorModule.applyBordersInternal(_this.tableFormat.borders, borders);
}
else if (_this.noneDiv.classList.contains('e-de-table-border-inside-setting-click')) {
editorModule.applyBordersInternal(_this.tableFormat.borders, new WBorders());
}
// Once option has been added for texture and foreground, need to handle this similar to Shading Fill.
if (!isNullOrUndefined(currentTableFormat.shading)) {
shading.foregroundColor = currentTableFormat.shading.foregroundColor;
shading.textureStyle = currentTableFormat.shading.textureStyle;
}
_this.tableFormat.shading = new WShading();
editorModule.applyShading(_this.tableFormat.shading, shading);
}
else if (_this.ulelementShading.value === 'Paragraph') {
var isNoneBorder = _this.noneDiv.classList.contains('e-de-table-border-inside-setting-click');
if (!isNullOrUndefined(_this.paragraphFormat)) {
editorModule.applyBordersInternal(_this.paragraphFormat.borders, isNoneBorder ? new WBorders() : borders);
}
else {
editorModule.onApplyParagraphFormat('borders', isNoneBorder ? new WBorders() : borders, false, false);
}
}
_this.applyFormat();
_this.closeDialog();
};
/**
* @private
* @returns {void}
*/
this.closeDialog = function () {
_this.documentHelper.dialog.hide();
_this.closeBordersShadingsDialog();
};
/**
* @private
* @returns {void}
*/
this.closeBordersShadingsDialog = function () {
_this.paragraphFormat = undefined;
_this.documentHelper.dialog2.element.style.pointerEvents = '';
_this.documentHelper.updateFocus();
};
/**
* @private
* @param {Event} event - Specifies the event args.
* @returns {void}
*/
this.handleSettingCheckBoxAction = function (event) {
var targetId = event.target.id;
var tableBorderDialogId = _this.target.id;
// let targetDiv: HTMLDivElement;
if (targetId === tableBorderDialogId + '_None_Div' || targetId === tableBorderDialogId + '_None_Div_Container'
|| targetId === tableBorderDialogId + '_None_Div_Transparent') {
_this.updateClassForSettingDivElements();
_this.noneDiv.classList.add('e-de-table-border-inside-setting-click');
_this.setSettingPreviewDivElement('none');
}
else if (targetId === tableBorderDialogId + '_Box_Div' || targetId === tableBorderDialogId + '_Box_Div_Container'
|| targetId === tableBorderDialogId + '_Box_Div_Transparent') {
_this.updateClassForSettingDivElements();
_this.boxDiv.classList.add('e-de-table-border-inside-setting-click');
_this.setSettingPreviewDivElement('box');
}
else if (targetId === tableBorderDialogId + '_All_Div' || targetId === tableBorderDialogId + '_All_Div_Container'
|| targetId === tableBorderDialogId + '_All_Div_Transparent') {
_this.updateClassForSettingDivElements();
_this.allDiv.classList.add('e-de-table-border-inside-setting-click');
_this.setSettingPreviewDivElement('all');
}
else {
if (_this.ulelementShading.value === 'Paragraph') {
_this.updateClassForSettingDivElements();
_this.customDiv.classList.add('e-de-table-border-inside-setting-click');
_this.setSettingPreviewDivElement('customDiv');
}
else {
_this.updateClassForSettingDivElements();
_this.customDiv.classList.add('e-de-table-border-inside-setting-click');
_this.setSettingPreviewDivElement('customDiv');
}
}
};
/**
* @private
* @param {Event} event - Specifies the event args.
* @returns {void}
*/
this.handlePreviewCheckBoxAction = function (event) {
var target = event.target;
var targetId = target.id;
// const tableBorderDialog: HTMLElement = this.target;
var tableBorderDialogId = _this.target.id;
var compareClass = 'e-de-table-border-inside-preview-click';
_this.customDiv.click();
if (targetId === tableBorderDialogId + '_Preview_Div_TopTop_Container' || targetId === tableBorderDialogId + '_Preview_Div_TopTop'
|| targetId === tableBorderDialogId + '_previewDivTopTopTransParent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopTop);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_TopTop', 'TopTop');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_TopCenter_Container'
|| targetId === tableBorderDialogId + '_Preview_Div_TopCenter'
|| targetId === tableBorderDialogId + '_previewDivTopCenterTransParent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopCenter);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Horizontal', '_Preview_Div_TopCenter', 'TopCenter');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_TopBottom_Container' || targetId === tableBorderDialogId + '_Preview_Div_TopBottom'
|| targetId === tableBorderDialogId + '_previewDivTopBottomTransParent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivTopBottom);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_TopBottom', 'TopBottom');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_LeftDiagonal_Container'
|| targetId === tableBorderDialogId + '_Preview_Div_LeftDiagonal'
|| targetId === tableBorderDialogId + '_previewDivLeftDiagonalTransParent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivLeftDiagonal);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Left_Diagonal', '_Preview_Div_LeftDiagonal', 'LeftDiagonal');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_BottomLeft_Container' || targetId === tableBorderDialogId + '_Preview_Div_BottomLeft'
|| targetId === tableBorderDialogId + '_previewDivBottomLeftTransparent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomLeft);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_BottomLeft', 'BottomLeft');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_BottomCenter_Container'
|| targetId === tableBorderDialogId + '_Preview_Div_BottomCenter'
|| targetId === tableBorderDialogId + '_previewDivBottomcenterTransparent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomcenter);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Vertical', '_Preview_Div_BottomCenter', 'BottomCenter');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_BottomRight_Container' || targetId === tableBorderDialogId + '_Preview_Div_BottomRight'
|| targetId === tableBorderDialogId + '_previewDivBottomRightTransparent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivBottomRight);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div', '_Preview_Div_BottomRight', 'BottomRight');
}
else if (targetId === tableBorderDialogId + '_Preview_Div_RightDiagonal_Container'
|| targetId === tableBorderDialogId + '_Preview_Div_RightDiagonal'
|| targetId === tableBorderDialogId + '_previewDivDiagonalRightTransparent') {
_this.handlePreviewCheckBoxShowHide(tableBorderDialogId, compareClass, _this.previewDivDiagonalRight);
_this.showHidePreviewDivElements(tableBorderDialogId, compareClass, '_Preview_Div_Right_Diagonal', '_Preview_Div_RightDiagonal', 'RightDiagonal');
}
};
/**
* @private
* @returns {void}
*/
this.applyTableCellPreviewBoxes = function () {
//this.customDiv.click();
if (!isNullOrUndefined(_this.ulelementShading)) {
if (_this.ulelementShading.value === 'Cell') {
_this.shadingColorPicker.disabled = false;
_this.previewDivBottomcenterContainer.style.visibility = 'hidden';
_this.previewDivTopCenterContainer.style.visibility = 'hidden';
_this.previewVerticalDiv.style.display = 'none';
_this.previewHorizontalDiv.style.display = 'none';
_this.previewDivLeftDiagonal.style.display = '';
_this.previewDivDiagonalRight.style.display = '';
_this.previewDivBottomRightContainer.style.left = '80px';
classList(_this.noneDivTransparent, ['e-de-table-border-none-setting'], ['e-de-para-border-none-setting']);
classList(_this.boxDivTransparent, ['e-de-table-border-box-setting'], ['e-de-para-border-box-setting']);
classList(_this.allDivTransparent, ['e-de-table-border-all-setting'], ['e-de-para-border-shadow-setting']);
classList(_this.customDivTransparent, ['e-de-table-border-custom-setting'], ['e-de-para-border-custom-setting']);
}
else if (_this.ulelementShading.value === 'Table') {
_this.shadingColorPicker.disabled = false;
_this.previewDivLeftDiagonal.style.display = 'none';
_this.previewDivDiagonalRight.style.display = 'none';
_this.previewDivBottomcenterContainer.style.visibility = 'visible';
_this.previewDivTopCenterContainer.style.visibility = 'visible';
_this.previewVerticalDiv.style.display = '';
_this.previewHorizontalDiv.style.display = '';
_this.previewDivBottomRightContainer.style.left = '110px';
classList(_this.noneDivTransparent, ['e-de-table-border-none-setting'], ['e-de-para-border-none-setting']);
classList(_this.boxDivTransparent, ['e-de-table-border-box-setting'], ['e-de-para-border-box-setting']);
classList(_this.allDivTransparent, ['e-de-table-border-all-setting'], ['e-de-para-border-shadow-setting']);
classList(_this.customDivTransparent, ['e-de-table-border-custom-setting'], ['e-de-para-border-custom-setting']);
}
else {
_this.shadingColorPicker.disabled = true;
_this.previewDivBottomcenterContainer.style.visibility = 'hidden';
_this.previewDivTopCenterContainer.style.visibility = 'hidden';
_this.previewVerticalDiv.style.display = 'none';
_this.previewHorizontalDiv.style.display = 'none';
_this.previewLeftDiagonalDiv.style.display = 'none';
_this.previewRightDiagonalDiv.style.display = 'none';
classList(_this.noneDivTransparent, ['e-de-para-border-none-setting'], ['e-de-table-border-none-setting']);
classList(_this.boxDivTransparent, ['e-de-para-border-box-setting'], ['e-de-table-border-box-setting']);
classList(_this.allDivTransparent, ['e-de-para-border-shadow-setting'], ['e-de-table-border-all-setting']);
classList(_this.customDivTransparent, ['e-de-para-border-custom-setting'], ['e-de-table-border-custom-setting']);
}
}
};
/**
* @private
* @param {ColorPickerEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.applyPreviewTableBackgroundColor = function (args) {
if (!isNullOrUndefined(args.currentValue)) {
_this.isShadingChanged = true;
var color = args.currentValue.hex;
_this.previewDiv.style.backgroundColor = color;
}
};
/**
* @private
* @param {ColorPickerEventArgs} args - Specifies the event args.
* @returns {void}
*/
this.applyPreviewTableBorderColor = function (args) {
if (!isNullOrUndefined(args.currentValue)) {
var color = args.currentValue.hex;
_this.previewDiv.style.borderColor = color;
_this.previewRightDiagonalDiv.style.backgroundColor = color;
_this.previewLeftDiagonalDiv.style.backgroundColor = color;
_this.previewVerticalDiv.style.backgroundColor = color;
_this.previewHorizontalDiv.style.backgroundColor = color;
}
};
this.documentHelper = documentHelper;
}
BordersAndShadingDialog.prototype.getModuleName = function () {
return 'BordersAndShadingDialog';
};
/**
* @private
* @param {L10n} localeValue - Specifies the locale.
* @param {boolean} isRtl - Specifies is rtl.
* @returns {void}
*/
BordersAndShadingDialog.prototype.initBordersAndShadingsDialog = function (localeValue, isRtl) {
this.target = createElement('div', {
id: this.documentHelper.owner.containerId + '_table_border_shadings',
className: 'e-de-table-border-shading-dlg'
});
this.displayText = createElement('div', {
innerHTML: localeValue.getConstant('Borders'),
className: 'e-de-table-border-heading'
});
this.settingAndPreviewContainer = createElement('div', {
className: 'e-de-dlg-row'
});
this.settingsContiner = createElement('div', {});
this.styleContainer = createElement('div', {});
this.previewContiner = createElement('div', {
className: 'e-de-table-border-preview-container'
});
this.previewSubContainer1 = createElement('div', {
className: 'e-de-dlg-row'
});
this.previewSubContainer2 = createElement('div', {});
this.styleSubContainer = createElement('div', {
className: 'e-de-container-row'
});
this.dropdownListDiv = createElement('div', {
className: 'e-de-subcontainer-left'
});
this.dropDownList = createElement('input', {});
this.widthcontainerDiv = createElement('div', {
className: 'e-de-container-row'
});
this.widthNumericDiv = createElement('div', {
className: 'e-de-subcontainer-left'
});
this.widthNumeric = createElement('input', {});
this.colorDiv = createElement('div', {
className: 'e-de-subcontainer-right'
});
this.colorText = createElement('div', {
innerHTML: localeValue.getConstant('Color'),
className: 'e-de-table-border-clr-heading'
});
this.borderColorPickerElement = createElement('input', {
attrs: { 'type': 'color' },
className: 'e-dlg-clr-pkr-top'
});
this.settingText = createElement('div', {
innerHTML: localeValue.getConstant('Setting'),
className: 'e-de-table-setting-heading'
});
this.settingsSubContiner = createElement('div', {
className: 'e-de-dlg-row'
});
this.noneDivContainer = createElement('div', {
id: this.target.id + '_None_Div_Container'
});
this.noneDiv = createElement('div', {
id: this.target.id + '_None_Div',
className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'
});
this.noneDivLabel = createElement('label', {
innerHTML: localeValue.getConstant('None'), className: 'e-de-table-setting-labels-heading',
id: this.target.id + '_None_Div_Label'
});
this.boxDivContainer = createElement('div', {
id: this.target.id + '_Box_Div_Container'
});
this.boxDiv = createElement('div', {
id: this.target.id + '_Box_Div',
className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'
});
this.boxDivLabel = createElement('label', {
innerHTML: localeValue.getConstant('Box'), className: 'e-de-table-setting-labels-heading',
id: this.target.id + '_Box_Div_Label'
});
this.allDivContainer = createElement('div', {
id: this.target.id + '_All_Div_Container'
});
this.allDiv = createElement('div', {
id: this.target.id + '_All_Div',
className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'
});
this.allDivLabel = createElement('label', {
innerHTML: localeValue.getConstant('All'), className: 'e-de-table-setting-labels-heading',
id: this.target.id + '_All_Div_Label'
});
this.customDivContainer = createElement('div', {
id: this.target.id + '_Custom_Div_Container'
});
this.customDiv = createElement('div', {
id: this.target.id + '_Custom_Div',
className: 'e-de-table-border-inside-setting e-de-table-border-setting-genral'
});
this.customDivLabel = createElement('label', {
innerHTML: localeValue.getConstant('Custom'), className: 'e-de-table-setting-labels-heading',
id: this.target.id + '_Custom_Div_Label'
});
this.noneDivTransparent = createElement('div', {
id: this.target.id + '_None_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-none-setting'
});
this.boxDivTransparent = createElement('div', {
id: this.target.id + '_Box_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-box-setting'
});
this.allDivTransparent = createElement('div', {
id: this.target.id + '_All_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-all-setting'
});
this.customDivTransparent = createElement('div', {
id: this.target.id + '_Custom_Div_Transparent', className: 'e-icons e-de-table-border-setting e-de-table-border-custom-setting'
});
if (isRtl) {
this.noneDivTransparent.classList.add('e-de-rtl');
this.boxDivTransparent.classList.add('e-de-rtl');
this.allDivTransparent.classList.add('e-de-rtl');
this.customDivTransparent.classList.add('e-de-rtl');
}
this.previewText = createElement('div', {
innerHTML: localeValue.getConstant('Preview'), className: 'e-de-table-setting-heading'
});
this.previewDiv = createElement('div', {
id: this.target.id + '_Preview_Div', className: 'e-de-border-dlg-preview-div',
styles: 'position: relative'
});
this.previewRightDiagonalDiv = createElement('div', {
styles: 'position: absolute;width:1px;height:111px;left: 38px;top: -17px;transform: rotate(135deg); background-color: black',
id: this.target.id + '_Preview_Div_Right_Diagonal',
className: 'e-de-border-dlg-preview-inside-divs'
});
this.previewLeftDiagonalDiv = createElement('div', {
styles: 'position: absolute;width: 1px;height: 111px;left: 38px;top: -17px;transform:rotate(45deg); background-color: black',
id: this.target.id + '_Preview_Div_Left_Diagonal',
className: 'e-de-border-dlg-preview-inside-divs'
});
this.previewVerticalDiv = createElement('div', {
styles: 'width: 1px;height: 80px;position: absolute;left: 39px;top: -1px; background-color: black',
id: this.target.id + '_Preview_Div_Vertical',
className: 'e-de-border-dlg-preview-inside-divs'
});
this.previewHorizontalDiv = createElement('div', {
styles: 'width: 80px;height: 1px;position: absolute;left: -1px;top: 41px; background-color: black',
id: this.target.id + '_Preview_Div_Horizontal',
className: 'e-de-border-dlg-preview-inside-divs'
});
this.previewDivVerticalContainer = createElement('div');
this.previewDivTopTopContainer = createElement('div', {
styles: 'margin-top: 0',
className: 'e-de-table-border-icon-container',
id: this.target.id + '_Preview_Div_TopTop_Container'
});
this.previewDivTopTop = createElement('div', {
id: this.target.id + '_Preview_Div_TopTop',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivTopCenterContainer = createElement('div', {
className: 'e-de-table-border-icon-container',
id: this.target.id + '_Preview_Div_TopCenter_Container'
});
this.previewDivTopCenter = createElement('div', {
id: this.target.id + '_Preview_Div_TopCenter',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivTopBottomContainer = createElement('div', {
className: 'e-de-table-border-icon-container',
id: this.target.id + '_Preview_Div_TopBottom_Container'
});
this.previewDivTopBottom = createElement('div', {
id: this.target.id + '_Preview_Div_TopBottom',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivLeftDiagonalContainer = createElement('div', {
className: 'e-de-table-border-icon-container',
id: this.target.id + '_Preview_Div_LeftDiagonal_Container'
});
this.previewDivLeftDiagonal = createElement('div', {
id: this.target.id + '_Preview_Div_LeftDiagonal',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivHorizontalContainer = createElement('div', { className: 'e-de-dlg-row' });
this.previewDivBottomLeftContainer = createElement('div', {
id: this.target.id + '_Preview_Div_BottomLeft_Container',
className: 'e-de-table-border-icon-container'
});
this.previewDivBottomLeft = createElement('div', {
id: this.target.id + '_Preview_Div_BottomLeft',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivBottomcenterContainer = createElement('div', {
id: this.target.id + '_Preview_Div_BottomCenter_Container',
className: 'e-de-table-border-icon-container'
});
this.previewDivBottomcenter = createElement('div', {
id: this.target.id + '_Preview_Div_BottomCenter',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivBottomRightContainer = createElement('div', {
id: this.target.id + '_Preview_Div_BottomRight_Container',
className: 'e-de-table-border-icon-container'
});
this.previewDivBottomRight = createElement('div', {
id: this.target.id + '_Preview_Div_BottomRight',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivDiagonalRightContainer = createElement('div', {
className: 'e-de-table-border-icon-container',
id: this.target.id + '_Preview_Div_RightDiagonal_Container'
});
this.previewDivDiagonalRight = createElement('div', {
id: this.target.id + '_Preview_Div_RightDiagonal',
className: 'e-de-table-border-inside-preview e-de-table-border-preview-genral'
});
this.previewDivTopTopTransParent = createElement('div', {
id: this.target.id + '_previewDivTopTopTransParent',
className: 'e-icons e-de-table-border-preview e-de-table-border-toptop-alignment'
});
this.previewDivTopCenterTransParent = createElement('div', {
id: this.target.id + '_previewDivTopCenterTransParent',
className: 'e-icons e-de-table-border-preview e-de-table-border-topcenter-alignment'
});
this.previewDivTopBottomTransParent = createElement('div', {
id: this.target.id + '_previewDivTopBottomTransParent',
className: 'e-icons e-de-table-border-preview e-de-table-border-topbottom-alignment'
});
this.previewDivLeftDiagonalTransParent = createElement('div', {
id: this.target.id + '_previewDivLeftDiagonalTransParent',
className: 'e-icons e-de-table-border-preview e-de-table-border-diagionalup-alignment'
});
this.previewDivBottomLeftTransparent = createElement('div', {
id: this.target.id + '_previewDivBottomLeftTransparent',
className: 'e-icons e-de-table-border-preview e-de-table-border-bottomleft-alignment'
});
this.previewDivBottomcenterTransparent = createElement('div', {
id: this.target.id + '_previewDivBottomcenterTransparent',
className: 'e-icons e-de-table-border-preview e-de-table-border-bottomcenter-alignment'
});
this.previewDivBottomRightTransparent = createElement('div', {
id: this.target.id + '_previewDivBottomRightTransparent',
className: 'e-icons e-de-table-border-preview e-de-table-border-bottomright-alignment'
});
this.previewDivDiagonalRightTransparent = createElement('div', {
id: this.target.id + '_previewDivDiagonalRightTransparent',
className: 'e-icons e-de-table-border-preview e-de-table-border-diagionaldown-alignment'
});
this.shadingContiner = createElement('div', {});
this.shadingText = createElement('div', {
innerHTML: localeValue.getConstant('Shading'), className: 'e-de-table-border-heading'
});
this.shadings = createElement('div', { className: 'e-de-dlg-row' });
this.colorPickerDiv = createElement('div', { className: 'e-de-table-border-clr-left-container' });
this.label = createElement('div', {
innerHTML: localeValue.getConstant('Fill'), className: 'e-de-table-border-clr-heading'
});
this.shadingColorPickerElement = createElement('input', {
attrs: { 'type': 'color' },
id: this.target.id + '_shading_color'
});
this.shdApply = createElement('div', {
className: 'e-de-subcontainer-right'
});
var ulelementShading = createElement('input', {
id: this.target.id + '_shading'
});
var ulelementShadingValue = [
{ Value: 'Cell', Name: localeValue.getConstant('Cell ') },
{ Value: 'Table', Name: localeValue.getConstant('Table') },
{ Value: 'Paragraph', Name: localeValue.getConstant('Paragraph') }
];
this.shdApply.appendChild(ulelementShading);
this.noneDiv.appendChild(this.noneDivTransparent);
this.boxDiv.appendChild(this.boxDivTransparent);
this.allDiv.appendChild(this.allDivTransparent);
this.customDiv.appendChild(this.customDivTransparent);
this.noneDivContainer.appendChild(this.noneDiv);
this.noneDivContainer.appendChild(this.noneDivLabel);
this.boxDivContainer.appendChild(this.boxDiv);
this.boxDivContainer.appendChild(this.boxDivLabel);
this.allDivContainer.appendChild(this.allDiv);
this.allDivContainer.appendChild(this.allDivLabel);
this.customDivContainer.appendChild(this.customDiv);
this.customDivContainer.appendChild(this.customDivLabel);
this.settingsContiner.appendChild(this.settingText);
this.settingsContiner.appendChild(this.settingsSubContiner);
this.settingsSubContiner.appendChild(this.noneDivContainer);
this.settingsSubContiner.appendChild(this.boxDivContainer);
this.settingsSubContiner.appendChild(this.allDivContainer);
this.settingsSubContiner.appendChild(this.customDivContainer);
this.previewDivBottomcenter.appendChild(this.previewDivBottomcenterTransparent);
this.previewDivBottomRight.appendChild(this.previewDivBottomRightTransparent);
this.previewDivBottomLeft.appendChild(this.previewDivBottomLeftTransparent);
this.previewDivTopTop.appendChild(this.previewDivTopTopTransParent);
this.previewDivTopCenter.appendChild(this.previewDivTopCenterTransParent);
this.previewDivTopBottom.appendChild(this.previewDivTopBottomTransParent);
this.previewDivDiagonalRight.appendChild(this.previewDivDiagonalRightTransparent);
this.previewDivLeftDiagonal.appendChild(this.previewDivLeftDiagonalTransParent);
this.previewDivBottomcenterContainer.appendChild(this.previewDivBottomcenter);
this.previewDivBottomLeftContainer.appendChild(this.previewDivBottomLeft);
this.previewDivBottomRightContainer.appendChild(this.previewDivBottomRight);
this.previewDivDiagonalRightContainer.appendChild(this.previewDivDiagonalRight);
this.previewDivLeftDiagonalContainer.appendChild(this.previewDivLeftDiagonal);
this.previewDivTopBottomContainer.appendChild(this.previewDivTopBottom);
this.previewDivTopCenterContainer.appendChild(this.previewDivTopCenter);
this.previewDivTopTopContainer.appendChild(this.previewDivTopTop);
this.previewContiner.appendChild(this.previewText);
this.previewContiner.appendChild(this.previewSubContainer1);
this.previewSubContainer1.appendChild(this.previewDivVerticalContainer);
this.previewSubContainer1.appendChild(this.previewSubContainer2);
this.previewSubContainer2.appendChild(this.previewDiv);
this.previewSubContainer2.appendChild(this.previewDivHorizontalContainer);
this.previewDiv.appendChild(this.previewLeftDiagonalDiv);
this.previewDiv.appendChild(this.previewRightDiagonalDiv);
this.previewDiv.appendChild(this.previewHorizontalDiv);
this.previewDiv.appendChild(this.previewVerticalDiv);
this.previewDivHorizontalContainer.appendChild(this.previewDivBottomLeftContainer);
this.previewDivHorizontalContainer.appendChild(this.previewDivBottomcenterContainer);
this.previewDivHorizontalContainer.appendChild(this.previewDivBottomRightContainer);
this.previewDivHorizontalContainer.appendChild(this.previewDivDiagonalRightContainer);
this.previewDivVerticalContainer.appendChild(this.previewDivTopTopContainer);
this.previewDivVerticalContainer.appendChild(this.previewDivTopCenterContainer);
this.previewDivVerticalContainer.appendChild(this.previewDivTopBottomContainer);
this.previewDivVerticalContainer.appendChild(this.previewDivLeftDiagonalContainer);
this.shadings.appendChild(this.colorPickerDiv);
this.colorPickerDiv.appendChild(this.label);
this.colorPickerDiv.appendChild(this.shadingColorPickerElement);
this.shadings.appendChild(this.shdApply);
this.shadingContiner.appendChild(this.shadingText);
this.shadingContiner.appendChild(this.shadings);
this.styleContainer.appendChild(this.styleSubContainer);
this.styleSubContainer.appendChild(this.dropdownListDiv);
this.dropdownListDiv.appendChild(this.dropDownList);
this.styleContainer.appendChild(this.widthcontainerDiv);
this.widthcontainerDiv.appendChild(this.widthNumericDiv);
this.widthNumericDiv.appendChild(this.widthNumeric);
this.widthcontainerDiv.appendChild(this.colorDiv);
this.colorDiv.appendChild(this.colorText);
this.colorDiv.appendChild(this.borderColorPickerElement);
this.borderColorPickerElement.setAttribute('aria-label', this.colorText.innerHTML);
this.settingAndPreviewContainer.appendChild(this.settingsContiner);
this.settingAndPreviewContainer.appendChild(this.previewContiner);
this.target.appendChild(this.displayText);
this.target.appendChild(this.settingAndPreviewContainer);
this.target.appendChild(this.styleContainer);
this.target.appendChild(this.shadingContiner);
// Handling Setting Container
this.noneDivContainer.addEventListener('click', this.handleSettingCheckBoxActionHandler);
this.boxDivContainer.addEventListener('click', this.handleSettingCheckBoxActionHandler);
this.allDivContainer.addEventListener('click', this.handleSettingCheckBoxActionHandler);
this.customDivContainer.addEventListener('click', this.handleSettingCheckBoxActionHandler);
// Handling Preview Div Container
this.previewDivBottomcenterContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivBottomLeftContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivBottomRightContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivTopTopContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivTopBottomContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivTopCenterContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivDiagonalRightContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
this.previewDivLeftDiagonalContainer.addEventListener('click', this.handlePreviewCheckBoxActionHandler);
// handling dropdown change
this.borderWidth = new NumericTextBox({
value: 0.5, min: 0.25, max: 6, decimals: 2, step: 0.25,
floatLabelType: 'Always', placeholder: localeValue.getConstant('Width'),
enablePersistence: false
});
this.borderWidth.appendTo(this.widthNumeric);
var empList = [
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'Single' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.5H98" stroke-linejoin="round" stroke-dasharray="1 1"/></svg></div>', 'LineStyle': 'Dot' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1347_1852)"><path d="M3.05176e-05 5.5H98" stroke-linejoin="round" stroke-dasharray="4 1"/></g><defs><clipPath id="clip0_1347_1852"><rect width="98" height="10" fill="white"/></clipPath></defs></svg></div>', 'LineStyle': 'DashSmallGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.5H98" stroke-linejoin="round" stroke-dasharray="4 4"/></svg></div>', 'LineStyle': 'DashLargeGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.5H98" stroke-linejoin="round" stroke-dasharray="7 3 3 3"/></svg></div>', 'LineStyle': 'DashDot' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4.5H98" stroke-linejoin="round" stroke-dasharray="6 2 2 2 2 2"/></svg></div>', 'LineStyle': 'DashDotDot' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3.5H98" stroke-linejoin="round"/><path d="M0 5.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'Double' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.5H98" stroke-linejoin="round"/><path d="M0 3.5H98" stroke-linejoin="round"/><path d="M0 7.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'Triple' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 4H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 7.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThinThickSmallGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 6H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 2.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThickThinSmallGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 1.5H98" stroke-linejoin="round"/><path d="M0 8.5H98" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThinThickThinSmallGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 8H98" stroke-width="2" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThickThinMediumGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 7H98" stroke-width="4" stroke-linejoin="round"/><path d="M0 2H98" stroke-width="2" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThinThickMediumGap' },
{ 'Svg': '<div class="e-de-svg-border-fill-color"><svg style="width:98%;" height="23" viewBox="0 0 98 23" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M98 8H0V9H98V8ZM98 10H0V14H98V10ZM0 15H98V16H0V15Z" /></svg></div>', 'LineStyle': 'ThinThickThinMediumGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 8.5H98" stroke-linejoin="round"/><path d="M0 3H98" stroke-width="2" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThinThickLargeGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 2.5H98" stroke-linejoin="round"/><path d="M0 8H98" stroke-width="2" stroke-linejoin="round"/></svg></div>', 'LineStyle': 'ThickThinLargeGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1347_1892)"><g clip-path="url(#clip0_1407_5)"><path d="M0 0.5H98" stroke-linejoin="round"/><path d="M0 9.5H98" stroke-linejoin="round"/><path d="M0 5H98" stroke-width="2" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1407_5"><rect width="98" height="10" fill="white"/></clipPath></defs></svg></div>', 'LineStyle': 'ThinThickThinLargeGap' },
{ 'Svg': '<div class="e-de-svg-border-color"><svg style="width:98%;" height="10" viewBox="0 0 98 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 3H5V4H3V3ZM2 5V4H3V5H2ZM1 6V5H2V6H1ZM1 6V7H0V6H1ZM6 5H5V4H6V5ZM7 6H6V5H7V6ZM9 6V7H7V6H9ZM10 5V6H9V5H10ZM11 4V5H10V4H11ZM13 4H11V3H13V4ZM14 5H13V4H14V5ZM15 6H14V5H15V6ZM17 6V7H15V6H17ZM18 5V6H17V5H18ZM19 4V5H18V4H19ZM21 4H19V3H21V4ZM22 5H21V4H22V5ZM23 6H22V5H23V6ZM25 6V7H23V6H25ZM26 5V6H25V5H26ZM27 4V5H26V4H27ZM29 4H27V3H29V4ZM30 5H29V4H30V5ZM31 6H30V5H31V6ZM33 6V7H31V6H33ZM34 5V6H33V5H34ZM35 4V5H34V4H35ZM37 4H35V3H37V4ZM38 5H37V4H38V5ZM39 6H38V5H39V6ZM41 6V7H39V6H41ZM42 5V6H41V5H42ZM43 4V5H42V4H43ZM45 4H43V3H45V4ZM46 5H45V4H46V5ZM47 6H46V5H47V6ZM49 6V7H47V6H49ZM50 5V6H49V5H50ZM51 4V5H50V4H51ZM53 4H51V3H53V4ZM54 5H53V4H54V5ZM55 6H54V5H55V6ZM57 6V7H55V6H57ZM58 5V6H57V5H58ZM59 4V5H58V4H59ZM61 4H59V3H61V4ZM62 5H61V4H