| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156 | 1×
1×
1×
1×
14×
14×
14×
14×
14×
14×
14×
1×
14×
1×
14×
14×
1×
14×
14×
1×
14×
14×
14×
14×
14×
14×
14×
1×
14×
14×
14×
14×
14×
140×
140×
1×
1×
1×
14×
14×
14×
14×
14×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-ribbon", "../ribbon-base/ribbon-constants", "./constants", "../../helper/borders-helper"], function (require, exports, ej2_base_1, ej2_ribbon_1, ribbon_constants_1, constants_1, borders_helper_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BordersGroup = (function () {
function BordersGroup(container) {
this.borderColor = '#000000';
this.borderWidth = '1px';
this.container = container;
this.localObj = this.container.localObj;
this.commonID = this.container.element.id + ribbon_constants_1.RIBBON_ID;
this.templateContainer = ej2_base_1.createElement('div', {
styles: 'position: absolute; visibility: hidden; height: 0; width: 0; overflow: hidden;'
});
document.body.appendChild(this.templateContainer);
}
BordersGroup.prototype.getBordersGroup = function () {
return {
id: this.commonID + constants_1.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()
]
}
]
};
};
BordersGroup.prototype.getBordersDropdown = function () {
var _this = this;
return {
type: ej2_ribbon_1.RibbonItemType.DropDown,
id: this.commonID + constants_1.BORDERS_DROPDOWN_ID,
keyTip: 'B',
dropDownSettings: {
content: this.localObj.getConstant('Borders'),
iconCss: 'e-icons e-de-ctnr-allborders',
items: borders_helper_1.BordersHelper.getBorderDropdownItems(this.localObj, this.commonID),
select: function (args) {
_this.applyBorder(args.item.text);
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Table Borders')
}
};
};
BordersGroup.prototype.getBorderColorPicker = function () {
var _this = this;
return {
type: ej2_ribbon_1.RibbonItemType.ColorPicker,
keyTip: 'C',
id: this.commonID + constants_1.BORDER_COLOR_PICKER_ID,
allowedSizes: ej2_ribbon_1.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')
}
};
};
BordersGroup.prototype.getBorderWidthDropdown = function () {
var _this = this;
var divElement = ej2_base_1.createElement('div', { id: this.commonID + '_borderSizeTarget', styles: 'display:none' });
this.templateContainer.appendChild(divElement);
var ulTag = ej2_base_1.createElement('ul', {
styles: 'display: block; outline: 0px; width: 126px; height: auto;',
id: this.commonID + '_borderSizeListMenu'
});
divElement.appendChild(ulTag);
this.createBorderSizeItems(ulTag);
return {
type: ej2_ribbon_1.RibbonItemType.DropDown,
id: this.commonID + constants_1.BORDER_WIDTH_DROPDOWN_ID,
keyTip: 'Y',
cssClass: 'e-de-ribbon-border-size-button',
allowedSizes: ej2_ribbon_1.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';
var borderWidthElements = _this.widthOptions.getElementsByClassName('e-de-border-width');
for (var i = 0; i < borderWidthElements.length; i++) {
var element = borderWidthElements[i];
element.style.borderBottomColor = _this.borderColor;
}
},
beforeClose: function () {
divElement.style.display = 'none';
}
},
ribbonTooltipSettings: {
content: this.localObj.getConstant('Border Width')
}
};
};
BordersGroup.prototype.createBorderSizeItems = function (ulTag) {
var _this = this;
var noBorderOption = borders_helper_1.BordersHelper.createBorderWidthOption(ulTag, this.localObj.getConstant('No Border'), this.localObj);
noBorderOption.addEventListener('click', function () {
_this.container.ribbon.ribbon.getItem(_this.commonID + constants_1.BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = _this.localObj.getConstant('No Border');
_this.onBorderWidthChange('No Border');
});
var borderWidths = borders_helper_1.BordersHelper.getBorderWidthItems(this.localObj).slice(1);
borderWidths.forEach(function (width) {
_this.widthOptions = borders_helper_1.BordersHelper.createBorderWidthOption(ulTag, width, _this.localObj);
_this.widthOptions.addEventListener('click', function () {
_this.container.ribbon.ribbon.getItem(_this.commonID + constants_1.BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = width;
_this.onBorderWidthChange(width.replace(_this.localObj.getConstant('px'), 'px'));
});
});
};
BordersGroup.prototype.onBorderWidthChange = function (width) {
this.borderWidth = width;
var borderDropdownItem = this.container.ribbon.ribbon.getItem(this.commonID + constants_1.BORDER_WIDTH_DROPDOWN_ID);
if (borderDropdownItem && borderDropdownItem.dropDownSettings) {
borderDropdownItem.dropDownSettings.content = width;
this.container.ribbon.ribbon.updateItem(borderDropdownItem);
}
};
BordersGroup.prototype.applyBorder = function (borderId) {
var borderType = borders_helper_1.BordersHelper.getBorderType(borderId, this.localObj);
borders_helper_1.BordersHelper.applyBorder(this.container.documentEditor, borderType, this.borderColor, this.borderWidth);
};
BordersGroup.prototype.destroy = function () {
ej2_base_1.remove(this.widthOptions);
this.widthOptions = undefined;
Eif (this.templateContainer && this.templateContainer.parentNode) {
this.templateContainer.parentNode.removeChild(this.templateContainer);
}
this.templateContainer = undefined;
};
return BordersGroup;
}());
exports.BordersGroup = BordersGroup;
});
|