@syncfusion/ej2-documenteditor
Version:
Feature-rich document editor control with built-in support for context menu, options pane and dialogs.
178 lines (177 loc) • 7.12 kB
JavaScript
import { RibbonItemType, RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { SHADING_GROUP_ID, SHADING_COLOR_PICKER_ID } from './constants';
import { ColorPicker } from '@syncfusion/ej2-inputs';
export var SHADING_BUTTON_ID = '_SHADING_BUTTON';
/**
* ShadingGroup class provides the shading options for table design
* @private
*/
var ShadingGroup = /** @class */ (function () {
/**
* Constructor for the ShadingGroup class
* @param {DocumentEditorContainer} container - DocumentEditorContainer instance
*/
function ShadingGroup(container) {
this.currentShadingColor = '#ffffff';
this.container = container;
this.localObj = this.container.localObj;
this.commonID = this.container.element.id + RIBBON_ID;
this.colorPickerId = this.commonID + SHADING_COLOR_PICKER_ID;
this.shadingButtonId = this.commonID + SHADING_BUTTON_ID;
// Create color picker element once
this.createColorPickerElement();
}
/**
* Create the Shading group configuration
* @returns {void}
*/
ShadingGroup.prototype.createColorPickerElement = function () {
var _this = this;
// Create a hidden div for the color picker
this.colorPickerElement = document.createElement('div');
this.colorPickerElement.id = this.commonID + '_cellShadingColorPickerContainer';
this.colorPickerElement.style.display = 'none';
// Create the input element for the color picker
var colorPickerInput = document.createElement('input');
colorPickerInput.id = this.commonID + '_cellShadingColorPicker';
colorPickerInput.type = 'color';
this.colorPickerElement.appendChild(colorPickerInput);
document.body.appendChild(this.colorPickerElement);
// Initialize the color picker with inline mode
this.colorPicker = new ColorPicker({
inline: true,
value: this.currentShadingColor,
change: function (args) {
_this.currentShadingColor = args.currentValue.hex;
_this.applyShadingColor(_this.currentShadingColor);
},
open: function () {
// Focus back to document editor after color picker is closed
_this.container.documentEditor.focusIn();
}, beforeClose: function () {
// Handle any cleanup before closing
return true; // Return true to allow closing
},
cssClass: 'e-cell-shading-picker'
}, '#' + this.commonID + '_cellShadingColorPicker');
};
/**
* Gets the Shading group configuration
* @returns {RibbonGroupModel} - The Shading group configuration
* @private
*/
ShadingGroup.prototype.getShadingGroup = function () {
return {
id: this.commonID + SHADING_GROUP_ID,
header: this.localObj.getConstant('Cell'),
orientation: 'Row',
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Cell'),
collections: [
{
items: [
this.getShadingSplitButton()
]
}
]
};
};
/**
* Gets the Shading Split Button configuration with color picker dropdown
* @returns {RibbonItemModel} - The Shading Split Button configuration
* @private
*/
ShadingGroup.prototype.getShadingSplitButton = function () {
var _this = this;
return {
type: RibbonItemType.SplitButton,
id: this.shadingButtonId,
allowedSizes: RibbonItemSize.Large,
splitButtonSettings: {
iconCss: 'e-icons e-de-ctnr-paint-bucket',
content: this.localObj.getConstant('Shading'),
target: '.e-cell-shading-picker',
// select: (args: MenuEventArgs) => {
// if (args.item && args.item.id === this.colorPickerId) {
// this.showColorPicker();
// }
// },
click: function () {
// Apply the current color on direct button click
_this.applyShadingColor(_this.currentShadingColor);
},
beforeOpen: function () {
// Ensure current selection properties are reflected
// this.showColorPicker();
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Fill color')
}
};
};
/**
* Shows the color picker dialog
* @returns {void}
* @private
*/
ShadingGroup.prototype.showColorPicker = function () {
// Get the input element
// Update the color picker value
this.colorPicker.value = this.currentShadingColor;
};
/**
* Applies the shading color to the selected table or cells
* @param {string} color - The color to apply as shading
* @returns {void}
*/
ShadingGroup.prototype.applyShadingColor = function (color) {
if (this.container.documentEditor.selection) {
this.container.documentEditor.selection.cellFormat.background = color;
this.currentShadingColor = color;
}
var colorPopupElement = document.getElementById(this.container.element.id + RIBBON_ID + '_SHADING_BUTTON_dropdownbtn-popup');
if (colorPopupElement) {
colorPopupElement.style.display = 'none';
}
};
/**
* Updates the shading color to reflect the current selection
* @returns {void}
* @private
*/
ShadingGroup.prototype.updateShadingColor = function () {
if (this.container.documentEditor.selection) {
// Update shading color if a cell is selected
if (this.container.documentEditor.selection.contextType === 'TableText' ||
this.container.documentEditor.selection.contextType === 'TableImage') {
var currentBackground = this.container.documentEditor.selection.cellFormat.background;
if (currentBackground) {
this.currentShadingColor = currentBackground;
}
}
}
};
/**
* Clean up resources when destroyed
* @returns {void}
* @private
*/
ShadingGroup.prototype.destroy = function () {
// Destroy the ColorPicker component first
if (this.colorPicker) {
this.colorPicker.destroy();
this.colorPicker = undefined;
}
// Clean up the color picker element
if (this.colorPickerElement && this.colorPickerElement.parentNode) {
this.colorPickerElement.parentNode.removeChild(this.colorPickerElement);
this.colorPickerElement = undefined;
}
this.container = undefined;
this.localObj = undefined;
};
return ShadingGroup;
}());
export { ShadingGroup };