| 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 | 1×
1×
1×
1×
99×
1×
108×
102×
102×
102×
102×
102×
102×
102×
102×
108×
1×
102×
102×
408×
408×
408×
408×
408×
408×
408×
408×
408×
102×
306×
102×
204×
102×
102×
408×
408×
408×
408×
408×
408×
408×
204×
204×
408×
408×
1×
408×
408×
408×
408×
1×
408×
408×
1×
408×
408×
1×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../../common/base/css-constant"], function (require, exports, ej2_base_1, cls) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var AxisTableRenderer = (function () {
function AxisTableRenderer(parent) {
this.parent = parent;
}
AxisTableRenderer.prototype.render = function () {
if (!this.parent.isAdaptive) {
var axisTable = ej2_base_1.createElement('div', {
className: cls.AXIS_TABLE_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_AXIS_TABLE_CLASS : '')
});
this.leftAxisPanel = ej2_base_1.createElement('div', { className: cls.LEFT_AXIS_PANEL_CLASS });
this.rightAxisPanel = ej2_base_1.createElement('div', { className: cls.RIGHT_AXIS_PANEL_CLASS });
this.parent.dialogRenderer.parentElement.appendChild(axisTable);
axisTable.appendChild(this.leftAxisPanel);
axisTable.appendChild(this.rightAxisPanel);
this.axisTable = axisTable;
this.renderAxisTable();
}
this.parent.axisFieldModule.render();
};
AxisTableRenderer.prototype.renderAxisTable = function () {
var fieldLabels = ['filters', 'rows', 'columns', 'values'];
for (var len = 0, lnt = fieldLabels.length; len < lnt; len++) {
var axis = ej2_base_1.createElement('div', {
className: cls.FIELD_LIST_CLASS + '-' + fieldLabels[len]
});
var axisTitleWrapper = ej2_base_1.createElement('div', {
className: cls.AXIS_ICON_CLASS + '-container'
});
var axisTitle = ej2_base_1.createElement('div', {
className: cls.AXIS_HEADER_CLASS,
attrs: { title: this.parent.localeObj.getConstant(fieldLabels[len]) }
});
axisTitle.innerText = this.parent.localeObj.getConstant(fieldLabels[len]);
axisTitleWrapper.appendChild(this.getIconupdate(fieldLabels[len]));
axisTitleWrapper.appendChild(axisTitle);
var axisContent = ej2_base_1.createElement('div', { className: cls.AXIS_CONTENT_CLASS + ' ' + 'e-' + fieldLabels[len] });
var localePrompt = void 0;
if (fieldLabels[len] === 'rows') {
localePrompt = this.parent.localeObj.getConstant('dropRowPrompt');
}
else if (fieldLabels[len] === 'columns') {
localePrompt = this.parent.localeObj.getConstant('dropColPrompt');
}
else if (fieldLabels[len] === 'values') {
localePrompt = this.parent.localeObj.getConstant('dropValPrompt');
}
else {
localePrompt = this.parent.localeObj.getConstant('dropFilterPrompt');
}
var axisPrompt = ej2_base_1.createElement('span', {
className: cls.AXIS_PROMPT_CLASS
});
axisPrompt.innerText = localePrompt;
new ej2_base_1.Droppable(axisContent, {});
axis.appendChild(axisTitleWrapper);
axis.appendChild(axisContent);
axis.appendChild(axisPrompt);
if (len <= 1) {
this.leftAxisPanel.appendChild(axis);
}
else {
this.rightAxisPanel.appendChild(axis);
}
this.unWireEvent(axisContent);
this.wireEvent(axisContent);
}
};
AxisTableRenderer.prototype.getIconupdate = function (axis) {
var axisWrapper = ej2_base_1.createElement('span', {
attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
className: cls.AXIS_ICON_CLASS + '-icon-container'
});
var axisElement = ej2_base_1.createElement('span', {
attrs: {
'tabindex': '-1', 'aria-disabled': 'false'
},
className: cls.ICON + ' ' + cls.AXIS_ICON_CLASS + '-' + axis
});
axisWrapper.appendChild(axisElement);
return axisWrapper;
};
AxisTableRenderer.prototype.wireEvent = function (element) {
ej2_base_1.EventHandler.add(element, 'mouseover', this.updateDropIndicator, this);
ej2_base_1.EventHandler.add(element, 'mouseleave', this.updateDropIndicator, this);
};
AxisTableRenderer.prototype.unWireEvent = function (element) {
ej2_base_1.EventHandler.remove(element, 'mouseover', this.updateDropIndicator);
ej2_base_1.EventHandler.remove(element, 'mouseleave', this.updateDropIndicator);
};
AxisTableRenderer.prototype.updateDropIndicator = function (e) {
var parentElement = this.parent.dialogRenderer.parentElement;
if (this.parent.isDragging && e.target.classList.contains(cls.AXIS_CONTENT_CLASS) && e.type === 'mouseover') {
ej2_base_1.removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);
ej2_base_1.removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);
var element = [].slice.call(e.target.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));
Eif (element.length > 0) {
ej2_base_1.addClass([element[element.length - 1].querySelector('.' + cls.DROP_INDICATOR_CLASS + '-last')], cls.INDICATOR_HOVER_CLASS);
}
}
else Eif (!this.parent.isDragging || (!e.target.classList.contains(cls.DROPPABLE_CLASS) && e.type === 'mouseleave')) {
ej2_base_1.removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);
ej2_base_1.removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);
}
};
return AxisTableRenderer;
}());
exports.AxisTableRenderer = AxisTableRenderer;
});
|