| 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 | 1×
1×
1×
1×
687×
1×
8338×
1×
353×
1×
935×
935×
935×
935×
935×
935×
935×
1×
935×
935×
15×
8×
935×
925×
10×
1×
405×
405×
405×
405×
405×
405×
11×
4×
11×
9×
1×
187×
187×
187×
187×
615×
187×
187×
1×
1×
11×
11×
1×
10×
10×
10×
1×
15×
15×
1×
14×
14×
14×
1×
13×
13×
1×
13×
1×
13×
6×
6×
13×
13×
1×
948×
948×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "../base/index", "../base/constant"], function (require, exports, ej2_base_1, ej2_buttons_1, index_1, constant_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RibbonButton = (function () {
function RibbonButton(parent) {
this.parent = parent;
}
RibbonButton.prototype.getModuleName = function () {
return 'ribbonButton';
};
RibbonButton.prototype.destroy = function () {
this.parent = null;
};
RibbonButton.prototype.createButton = function (item, itemEle) {
var _this = this;
var buttonEle = this.parent.createElement('button', {
id: item.id
});
itemEle.appendChild(buttonEle);
var btnSettings = item.buttonSettings;
new ej2_buttons_1.Button({
locale: this.parent.locale,
enableRtl: this.parent.enableRtl,
enablePersistence: this.parent.enablePersistence,
iconPosition: item.activeSize === index_1.RibbonItemSize.Large ? 'Top' : 'Left',
iconCss: btnSettings.iconCss,
disabled: item.disabled,
cssClass: (constant_1.ITEM_VERTICAL_CENTER + constant_1.SPACE + constant_1.RIBBON_CONTROL + constant_1.SPACE + (btnSettings.cssClass ? btnSettings.cssClass : '')).trim(),
content: item.activeSize === index_1.RibbonItemSize.Small ? '' : btnSettings.content,
isPrimary: btnSettings.isPrimary,
isToggle: btnSettings.isToggle,
created: btnSettings.created
}, buttonEle);
Eif (btnSettings.htmlAttributes) {
if (btnSettings.htmlAttributes.id) {
delete btnSettings.htmlAttributes.id;
}
index_1.setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
}
buttonEle.onclick = function (e) {
if (btnSettings.clicked) {
btnSettings.clicked.call(_this, e);
}
};
if (btnSettings.content) {
buttonEle.setAttribute('aria-label', btnSettings.content);
}
else {
buttonEle.setAttribute('aria-label', 'button');
}
};
RibbonButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
var _this = this;
var buttonEle = itemEle.querySelector('#' + item.id);
buttonEle.setAttribute('data-control', item.type.toString());
var buttonObj = ej2_base_1.getComponent(buttonEle, ej2_buttons_1.Button);
buttonObj.setProperties({ cssClass: buttonObj.cssClass + constant_1.SPACE + constant_1.RIBBON_POPUP_CONTROL });
buttonEle.onclick = function (e) {
if (item.buttonSettings.clicked) {
item.buttonSettings.clicked.call(_this, e);
}
if (overflowButton.element.classList.contains('e-active')) {
overflowButton.toggle();
}
};
};
RibbonButton.prototype.removeOverFlowEvents = function (item, itemEle) {
var _this = this;
var buttonEle = itemEle.querySelector('#' + item.id);
var buttonObj = ej2_base_1.getComponent(buttonEle, ej2_buttons_1.Button);
var cssClass = buttonObj.cssClass.split(constant_1.SPACE);
cssClass = cssClass.filter(function (value) { return value !== constant_1.RIBBON_POPUP_CONTROL; });
buttonObj.setProperties({ cssClass: cssClass.join(constant_1.SPACE) });
buttonEle.onclick = function (e) {
Iif (item.buttonSettings.clicked) {
item.buttonSettings.clicked.call(_this, e);
}
};
};
RibbonButton.prototype.click = function (controlId) {
var buttonEle = index_1.getItemElement(this.parent, controlId);
if (!buttonEle) {
return;
}
var buttonObj = ej2_base_1.getComponent(buttonEle, ej2_buttons_1.Button);
Eif (!buttonObj.disabled) {
buttonObj.click();
}
};
RibbonButton.prototype.updateButton = function (prop, id) {
var itemProp = index_1.getItem(this.parent.tabs, id);
if (!itemProp) {
return;
}
ej2_base_1.merge(itemProp.item.buttonSettings, prop);
var buttonEle = index_1.getItemElement(this.parent, id, itemProp);
if (!buttonEle) {
return;
}
var buttonObj = ej2_base_1.getComponent(buttonEle, ej2_buttons_1.Button);
if (prop.isToggle) {
buttonEle.classList.add('e-active');
}
if (prop.cssClass) {
prop.cssClass = (constant_1.ITEM_VERTICAL_CENTER + constant_1.SPACE + constant_1.RIBBON_CONTROL + constant_1.SPACE + prop.cssClass).trim();
}
if (prop.content) {
prop.content = itemProp.item.activeSize === index_1.RibbonItemSize.Small ? '' : prop.content;
buttonEle.setAttribute('aria-label', prop.content);
}
delete prop.clicked;
buttonObj.setProperties(prop);
};
RibbonButton.prototype.updateButtonSize = function (element, item) {
var buttonObj = ej2_base_1.getComponent(element, ej2_buttons_1.Button);
buttonObj.setProperties({
iconPosition: item.activeSize === index_1.RibbonItemSize.Large ? 'Top' : 'Left',
content: item.activeSize === index_1.RibbonItemSize.Small ? '' : item.buttonSettings.content
});
};
return RibbonButton;
}());
exports.RibbonButton = RibbonButton;
});
|