1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | "use strict";
|
8 | var __extends = (this && this.__extends) || (function () {
|
9 | var extendStatics = Object.setPrototypeOf ||
|
10 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
11 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
12 | return function (d, b) {
|
13 | extendStatics(d, b);
|
14 | function __() { this.constructor = d; }
|
15 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
16 | };
|
17 | })();
|
18 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
19 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
20 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
21 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
22 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
23 | };
|
24 | var __metadata = (this && this.__metadata) || function (k, v) {
|
25 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
26 | };
|
27 | Object.defineProperty(exports, "__esModule", { value: true });
|
28 | var component_1 = require("../../widgets/component");
|
29 | var context_1 = require("../../context/context");
|
30 | var column_1 = require("../../entities/column");
|
31 | var utils_1 = require("../../utils");
|
32 | var dragAndDropService_1 = require("../../dragAndDrop/dragAndDropService");
|
33 | var columnApi_1 = require("../../columnController/columnApi");
|
34 | var columnController_1 = require("../../columnController/columnController");
|
35 | var horizontalResizeService_1 = require("../horizontalResizeService");
|
36 | var gridOptionsWrapper_1 = require("../../gridOptionsWrapper");
|
37 | var cssClassApplier_1 = require("../cssClassApplier");
|
38 | var setLeftFeature_1 = require("../../rendering/features/setLeftFeature");
|
39 | var gridApi_1 = require("../../gridApi");
|
40 | var sortController_1 = require("../../sortController");
|
41 | var eventService_1 = require("../../eventService");
|
42 | var componentRecipes_1 = require("../../components/framework/componentRecipes");
|
43 | var agCheckbox_1 = require("../../widgets/agCheckbox");
|
44 | var componentAnnotations_1 = require("../../widgets/componentAnnotations");
|
45 | var selectAllFeature_1 = require("./selectAllFeature");
|
46 | var events_1 = require("../../events");
|
47 | var columnHoverService_1 = require("../../rendering/columnHoverService");
|
48 | var beans_1 = require("../../rendering/beans");
|
49 | var hoverFeature_1 = require("../hoverFeature");
|
50 | var touchListener_1 = require("../../widgets/touchListener");
|
51 | var HeaderWrapperComp = (function (_super) {
|
52 | __extends(HeaderWrapperComp, _super);
|
53 | function HeaderWrapperComp(column, dragSourceDropTarget, pinned) {
|
54 | var _this = _super.call(this, HeaderWrapperComp.TEMPLATE) || this;
|
55 | _this.column = column;
|
56 | _this.dragSourceDropTarget = dragSourceDropTarget;
|
57 | _this.pinned = pinned;
|
58 | return _this;
|
59 | }
|
60 | HeaderWrapperComp.prototype.getColumn = function () {
|
61 | return this.column;
|
62 | };
|
63 | HeaderWrapperComp.prototype.init = function () {
|
64 | this.instantiate(this.context);
|
65 | var displayName = this.columnController.getDisplayNameForColumn(this.column, 'header', true);
|
66 | var enableSorting = this.gridOptionsWrapper.isEnableSorting() && !this.column.getColDef().suppressSorting;
|
67 | var enableMenu = this.menuFactory.isMenuEnabled(this.column) && !this.column.getColDef().suppressMenu;
|
68 | this.appendHeaderComp(displayName, enableSorting, enableMenu);
|
69 | this.setupWidth();
|
70 | this.setupMovingCss();
|
71 | this.setupTooltip();
|
72 | this.setupResize();
|
73 | this.setupMenuClass();
|
74 | this.setupSortableClass(enableSorting);
|
75 | this.addColumnHoverListener();
|
76 | this.addFeature(this.context, new hoverFeature_1.HoverFeature([this.column], this.getGui()));
|
77 | this.addDestroyableEventListener(this.column, column_1.Column.EVENT_FILTER_ACTIVE_CHANGED, this.onFilterChanged.bind(this));
|
78 | this.onFilterChanged();
|
79 | this.addFeature(this.context, new selectAllFeature_1.SelectAllFeature(this.cbSelectAll, this.column));
|
80 | var setLeftFeature = new setLeftFeature_1.SetLeftFeature(this.column, this.getGui(), this.beans);
|
81 | setLeftFeature.init();
|
82 | this.addDestroyFunc(setLeftFeature.destroy.bind(setLeftFeature));
|
83 | this.addAttributes();
|
84 | cssClassApplier_1.CssClassApplier.addHeaderClassesFromColDef(this.column.getColDef(), this.getGui(), this.gridOptionsWrapper, this.column, null);
|
85 | };
|
86 | HeaderWrapperComp.prototype.addColumnHoverListener = function () {
|
87 | this.addDestroyableEventListener(this.eventService, events_1.Events.EVENT_COLUMN_HOVER_CHANGED, this.onColumnHover.bind(this));
|
88 | this.onColumnHover();
|
89 | };
|
90 | HeaderWrapperComp.prototype.onColumnHover = function () {
|
91 | var isHovered = this.columnHoverService.isHovered(this.column);
|
92 | utils_1.Utils.addOrRemoveCssClass(this.getGui(), 'ag-column-hover', isHovered);
|
93 | };
|
94 | HeaderWrapperComp.prototype.setupSortableClass = function (enableSorting) {
|
95 | if (enableSorting) {
|
96 | var element = this.getGui();
|
97 | utils_1.Utils.addCssClass(element, 'ag-header-cell-sortable');
|
98 | }
|
99 | };
|
100 | HeaderWrapperComp.prototype.onFilterChanged = function () {
|
101 | var filterPresent = this.column.isFilterActive();
|
102 | utils_1.Utils.addOrRemoveCssClass(this.getGui(), 'ag-header-cell-filtered', filterPresent);
|
103 | };
|
104 | HeaderWrapperComp.prototype.appendHeaderComp = function (displayName, enableSorting, enableMenu) {
|
105 | var _this = this;
|
106 | var params = {
|
107 | column: this.column,
|
108 | displayName: displayName,
|
109 | enableSorting: enableSorting,
|
110 | enableMenu: enableMenu,
|
111 | showColumnMenu: function (source) {
|
112 | _this.gridApi.showColumnMenuAfterButtonClick(_this.column, source);
|
113 | },
|
114 | progressSort: function (multiSort) {
|
115 | _this.sortController.progressSort(_this.column, !!multiSort, "uiColumnSorted");
|
116 | },
|
117 | setSort: function (sort, multiSort) {
|
118 | _this.sortController.setSortForColumn(_this.column, sort, !!multiSort, "uiColumnSorted");
|
119 | },
|
120 | api: this.gridApi,
|
121 | columnApi: this.columnApi,
|
122 | context: this.gridOptionsWrapper.getContext()
|
123 | };
|
124 | var callback = this.afterHeaderCompCreated.bind(this, displayName);
|
125 | this.componentRecipes.newHeaderComponent(params).then(callback);
|
126 | };
|
127 | HeaderWrapperComp.prototype.afterHeaderCompCreated = function (displayName, headerComp) {
|
128 | this.appendChild(headerComp);
|
129 | this.setupMove(headerComp.getGui(), displayName);
|
130 | if (headerComp.destroy) {
|
131 | this.addDestroyFunc(headerComp.destroy.bind(headerComp));
|
132 | }
|
133 | };
|
134 | HeaderWrapperComp.prototype.onColumnMovingChanged = function () {
|
135 |
|
136 |
|
137 |
|
138 | if (this.column.isMoving()) {
|
139 | utils_1.Utils.addCssClass(this.getGui(), 'ag-header-cell-moving');
|
140 | }
|
141 | else {
|
142 | utils_1.Utils.removeCssClass(this.getGui(), 'ag-header-cell-moving');
|
143 | }
|
144 | };
|
145 | HeaderWrapperComp.prototype.setupMove = function (eHeaderCellLabel, displayName) {
|
146 | var _this = this;
|
147 | var suppressMove = this.gridOptionsWrapper.isSuppressMovableColumns()
|
148 | || this.column.getColDef().suppressMovable
|
149 | || this.column.isLockPosition();
|
150 | if (suppressMove) {
|
151 | return;
|
152 | }
|
153 | if (eHeaderCellLabel) {
|
154 | var dragSource_1 = {
|
155 | type: dragAndDropService_1.DragSourceType.HeaderCell,
|
156 | eElement: eHeaderCellLabel,
|
157 | dragItemCallback: function () { return _this.createDragItem(); },
|
158 | dragItemName: displayName,
|
159 | dragSourceDropTarget: this.dragSourceDropTarget,
|
160 | dragStarted: function () { return _this.column.setMoving(true, "uiColumnMoved"); },
|
161 | dragStopped: function () { return _this.column.setMoving(false, "uiColumnMoved"); }
|
162 | };
|
163 | this.dragAndDropService.addDragSource(dragSource_1, true);
|
164 | this.addDestroyFunc(function () { return _this.dragAndDropService.removeDragSource(dragSource_1); });
|
165 | }
|
166 | };
|
167 | HeaderWrapperComp.prototype.createDragItem = function () {
|
168 | var visibleState = {};
|
169 | visibleState[this.column.getId()] = this.column.isVisible();
|
170 | return {
|
171 | columns: [this.column],
|
172 | visibleState: visibleState
|
173 | };
|
174 | };
|
175 | HeaderWrapperComp.prototype.setupResize = function () {
|
176 | var _this = this;
|
177 | var colDef = this.column.getColDef();
|
178 |
|
179 | if (!this.eResize) {
|
180 | return;
|
181 | }
|
182 | if (!this.column.isResizable()) {
|
183 | utils_1.Utils.removeFromParent(this.eResize);
|
184 | return;
|
185 | }
|
186 | var finishedWithResizeFunc = this.horizontalResizeService.addResizeBar({
|
187 | eResizeBar: this.eResize,
|
188 | onResizeStart: this.onResizeStart.bind(this),
|
189 | onResizing: this.onResizing.bind(this, false),
|
190 | onResizeEnd: this.onResizing.bind(this, true)
|
191 | });
|
192 | this.addDestroyFunc(finishedWithResizeFunc);
|
193 | var weWantAutoSize = !this.gridOptionsWrapper.isSuppressAutoSize() && !colDef.suppressAutoSize;
|
194 | if (weWantAutoSize) {
|
195 | this.addDestroyableEventListener(this.eResize, 'dblclick', function () {
|
196 | _this.columnController.autoSizeColumn(_this.column, "uiColumnResized");
|
197 | });
|
198 | var touchListener = new touchListener_1.TouchListener(this.eResize);
|
199 | this.addDestroyableEventListener(touchListener, touchListener_1.TouchListener.EVENT_DOUBLE_TAP, function () {
|
200 | _this.columnController.autoSizeColumn(_this.column, "uiColumnResized");
|
201 | });
|
202 | this.addDestroyFunc(touchListener.destroy.bind(touchListener));
|
203 | }
|
204 | };
|
205 | HeaderWrapperComp.prototype.onResizing = function (finished, resizeAmount) {
|
206 | var resizeAmountNormalised = this.normaliseResizeAmount(resizeAmount);
|
207 | var newWidth = this.resizeStartWidth + resizeAmountNormalised;
|
208 | this.columnController.setColumnWidth(this.column, newWidth, this.resizeWithShiftKey, finished, "uiColumnDragged");
|
209 | };
|
210 | HeaderWrapperComp.prototype.onResizeStart = function (shiftKey) {
|
211 | this.resizeStartWidth = this.column.getActualWidth();
|
212 | this.resizeWithShiftKey = shiftKey;
|
213 | };
|
214 | HeaderWrapperComp.prototype.setupTooltip = function () {
|
215 | var colDef = this.column.getColDef();
|
216 |
|
217 | if (colDef.headerTooltip) {
|
218 | this.getGui().title = colDef.headerTooltip;
|
219 | }
|
220 | };
|
221 | HeaderWrapperComp.prototype.setupMovingCss = function () {
|
222 | this.addDestroyableEventListener(this.column, column_1.Column.EVENT_MOVING_CHANGED, this.onColumnMovingChanged.bind(this));
|
223 | this.onColumnMovingChanged();
|
224 | };
|
225 | HeaderWrapperComp.prototype.addAttributes = function () {
|
226 | this.getGui().setAttribute("col-id", this.column.getColId());
|
227 | };
|
228 | HeaderWrapperComp.prototype.setupWidth = function () {
|
229 | this.addDestroyableEventListener(this.column, column_1.Column.EVENT_WIDTH_CHANGED, this.onColumnWidthChanged.bind(this));
|
230 | this.onColumnWidthChanged();
|
231 | };
|
232 | HeaderWrapperComp.prototype.setupMenuClass = function () {
|
233 | this.addDestroyableEventListener(this.column, column_1.Column.EVENT_MENU_VISIBLE_CHANGED, this.onMenuVisible.bind(this));
|
234 | this.onColumnWidthChanged();
|
235 | };
|
236 | HeaderWrapperComp.prototype.onMenuVisible = function () {
|
237 | this.addOrRemoveCssClass('ag-column-menu-visible', this.column.isMenuVisible());
|
238 | };
|
239 | HeaderWrapperComp.prototype.onColumnWidthChanged = function () {
|
240 | this.getGui().style.width = this.column.getActualWidth() + 'px';
|
241 | };
|
242 |
|
243 |
|
244 | HeaderWrapperComp.prototype.normaliseResizeAmount = function (dragChange) {
|
245 | var result = dragChange;
|
246 | if (this.gridOptionsWrapper.isEnableRtl()) {
|
247 |
|
248 | if (this.pinned !== column_1.Column.PINNED_LEFT) {
|
249 | result *= -1;
|
250 | }
|
251 | }
|
252 | else {
|
253 |
|
254 | if (this.pinned === column_1.Column.PINNED_RIGHT) {
|
255 | result *= -1;
|
256 | }
|
257 | }
|
258 | return result;
|
259 | };
|
260 | HeaderWrapperComp.TEMPLATE = '<div class="ag-header-cell" role="presentation" >' +
|
261 | '<div ref="eResize" class="ag-header-cell-resize" role="presentation"></div>' +
|
262 | '<ag-checkbox ref="cbSelectAll" class="ag-header-select-all" role="presentation"></ag-checkbox>' +
|
263 |
|
264 | '</div>';
|
265 | __decorate([
|
266 | context_1.Autowired('gridOptionsWrapper'),
|
267 | __metadata("design:type", gridOptionsWrapper_1.GridOptionsWrapper)
|
268 | ], HeaderWrapperComp.prototype, "gridOptionsWrapper", void 0);
|
269 | __decorate([
|
270 | context_1.Autowired('dragAndDropService'),
|
271 | __metadata("design:type", dragAndDropService_1.DragAndDropService)
|
272 | ], HeaderWrapperComp.prototype, "dragAndDropService", void 0);
|
273 | __decorate([
|
274 | context_1.Autowired('columnController'),
|
275 | __metadata("design:type", columnController_1.ColumnController)
|
276 | ], HeaderWrapperComp.prototype, "columnController", void 0);
|
277 | __decorate([
|
278 | context_1.Autowired('horizontalResizeService'),
|
279 | __metadata("design:type", horizontalResizeService_1.HorizontalResizeService)
|
280 | ], HeaderWrapperComp.prototype, "horizontalResizeService", void 0);
|
281 | __decorate([
|
282 | context_1.Autowired('context'),
|
283 | __metadata("design:type", context_1.Context)
|
284 | ], HeaderWrapperComp.prototype, "context", void 0);
|
285 | __decorate([
|
286 | context_1.Autowired('menuFactory'),
|
287 | __metadata("design:type", Object)
|
288 | ], HeaderWrapperComp.prototype, "menuFactory", void 0);
|
289 | __decorate([
|
290 | context_1.Autowired('gridApi'),
|
291 | __metadata("design:type", gridApi_1.GridApi)
|
292 | ], HeaderWrapperComp.prototype, "gridApi", void 0);
|
293 | __decorate([
|
294 | context_1.Autowired('columnApi'),
|
295 | __metadata("design:type", columnApi_1.ColumnApi)
|
296 | ], HeaderWrapperComp.prototype, "columnApi", void 0);
|
297 | __decorate([
|
298 | context_1.Autowired('sortController'),
|
299 | __metadata("design:type", sortController_1.SortController)
|
300 | ], HeaderWrapperComp.prototype, "sortController", void 0);
|
301 | __decorate([
|
302 | context_1.Autowired('eventService'),
|
303 | __metadata("design:type", eventService_1.EventService)
|
304 | ], HeaderWrapperComp.prototype, "eventService", void 0);
|
305 | __decorate([
|
306 | context_1.Autowired('componentRecipes'),
|
307 | __metadata("design:type", componentRecipes_1.ComponentRecipes)
|
308 | ], HeaderWrapperComp.prototype, "componentRecipes", void 0);
|
309 | __decorate([
|
310 | context_1.Autowired('columnHoverService'),
|
311 | __metadata("design:type", columnHoverService_1.ColumnHoverService)
|
312 | ], HeaderWrapperComp.prototype, "columnHoverService", void 0);
|
313 | __decorate([
|
314 | context_1.Autowired('beans'),
|
315 | __metadata("design:type", beans_1.Beans)
|
316 | ], HeaderWrapperComp.prototype, "beans", void 0);
|
317 | __decorate([
|
318 | componentAnnotations_1.RefSelector('eResize'),
|
319 | __metadata("design:type", HTMLElement)
|
320 | ], HeaderWrapperComp.prototype, "eResize", void 0);
|
321 | __decorate([
|
322 | componentAnnotations_1.RefSelector('cbSelectAll'),
|
323 | __metadata("design:type", agCheckbox_1.AgCheckbox)
|
324 | ], HeaderWrapperComp.prototype, "cbSelectAll", void 0);
|
325 | __decorate([
|
326 | context_1.PostConstruct,
|
327 | __metadata("design:type", Function),
|
328 | __metadata("design:paramtypes", []),
|
329 | __metadata("design:returntype", void 0)
|
330 | ], HeaderWrapperComp.prototype, "init", null);
|
331 | return HeaderWrapperComp;
|
332 | }(component_1.Component));
|
333 | exports.HeaderWrapperComp = HeaderWrapperComp;
|