define(["require", "exports", "@syncfusion/ej2-ribbon", "../ribbon-base/ribbon-constants", "./constants", "@syncfusion/ej2-inputs"], function (require, exports, ej2_ribbon_1, ribbon_constants_1, constants_1, ej2_inputs_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SHADING_BUTTON_ID = '_SHADING_BUTTON';
var ShadingGroup = (function () {
function ShadingGroup(container) {
this.currentShadingColor = '#ffffff';
this.container = container;
this.localObj = this.container.localObj;
this.commonID = this.container.element.id + ribbon_constants_1.RIBBON_ID;
this.colorPickerId = this.commonID + constants_1.SHADING_COLOR_PICKER_ID;
this.shadingButtonId = this.commonID + exports.SHADING_BUTTON_ID;
this.createColorPickerElement();
}
ShadingGroup.prototype.createColorPickerElement = function () {
var _this = this;
this.colorPickerElement = document.createElement('div');
this.colorPickerElement.id = this.commonID + '_cellShadingColorPickerContainer';
this.colorPickerElement.style.display = 'none';
var colorPickerInput = document.createElement('input');
colorPickerInput.id = this.commonID + '_cellShadingColorPicker';
colorPickerInput.type = 'color';
this.colorPickerElement.appendChild(colorPickerInput);
document.body.appendChild(this.colorPickerElement);
this.colorPicker = new ej2_inputs_1.ColorPicker({
inline: true,
value: this.currentShadingColor,
change: function (args) {
_this.currentShadingColor = args.currentValue.hex;
_this.applyShadingColor(_this.currentShadingColor);
},
open: function () {
_this.container.documentEditor.focusIn();
}, beforeClose: function () {
return true;
},
cssClass: 'e-cell-shading-picker'
}, '#' + this.commonID + '_cellShadingColorPicker');
};
ShadingGroup.prototype.getShadingGroup = function () {
return {
id: this.commonID + constants_1.SHADING_GROUP_ID,
header: this.localObj.getConstant('Cell'),
orientation: 'Row',
enableGroupOverflow: true,
overflowHeader: this.localObj.getConstant('Cell'),
collections: [
{
items: [
this.getShadingSplitButton()
]
}
]
};
};
ShadingGroup.prototype.getShadingSplitButton = function () {
var _this = this;
return {
type: ej2_ribbon_1.RibbonItemType.SplitButton,
id: this.shadingButtonId,
allowedSizes: ej2_ribbon_1.RibbonItemSize.Large,
splitButtonSettings: {
iconCss: 'e-icons e-de-ctnr-paint-bucket',
content: this.localObj.getConstant('Shading'),
target: '.e-cell-shading-picker',
click: function () {
_this.applyShadingColor(_this.currentShadingColor);
},
beforeOpen: function () {
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Fill color')
}
};
};
ShadingGroup.prototype.showColorPicker = function () {
this.colorPicker.value = this.currentShadingColor;
};
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_constants_1.RIBBON_ID + '_SHADING_BUTTON_dropdownbtn-popup');
if (colorPopupElement) {
colorPopupElement.style.display = 'none';
}
};
ShadingGroup.prototype.updateShadingColor = function () {
Eif (this.container.documentEditor.selection) {
Eif (this.container.documentEditor.selection.contextType === 'TableText' ||
this.container.documentEditor.selection.contextType === 'TableImage') {
var currentBackground = this.container.documentEditor.selection.cellFormat.background;
Eif (currentBackground) {
this.currentShadingColor = currentBackground;
}
}
}
};
ShadingGroup.prototype.destroy = function () {
Eif (this.colorPicker) {
this.colorPicker.destroy();
this.colorPicker = undefined;
}
Eif (this.colorPickerElement && this.colorPickerElement.parentNode) {
this.colorPickerElement.parentNode.removeChild(this.colorPickerElement);
this.colorPickerElement = undefined;
}
this.container = undefined;
this.localObj = undefined;
};
return ShadingGroup;
}());
exports.ShadingGroup = ShadingGroup;
});
|