@slickgrid-universal/custom-tooltip-plugin 2.5.0 → 2.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/index.js +17 -17
- package/dist/commonjs/slickCustomTooltip.js +410 -407
- package/dist/commonjs/slickCustomTooltip.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/slickCustomTooltip.js +406 -403
- package/dist/esm/slickCustomTooltip.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/{commonjs → types}/index.d.ts +2 -1
- package/dist/types/index.d.ts.map +1 -0
- package/dist/{commonjs → types}/slickCustomTooltip.d.ts +113 -109
- package/dist/types/slickCustomTooltip.d.ts.map +1 -0
- package/package.json +7 -7
- package/dist/esm/index.d.ts +0 -1
- package/dist/esm/slickCustomTooltip.d.ts +0 -109
|
@@ -1,404 +1,407 @@
|
|
|
1
|
-
import { calculateAvailableSpace, cancellablePromise, CancelledException, createDomElement, findFirstElementAttribute, getHtmlElementOffset, sanitizeTextByAvailableSanitizer, } from '@slickgrid-universal/common';
|
|
2
|
-
/**
|
|
3
|
-
* A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell "onMouseEnter" and "onMouseLeave" events.
|
|
4
|
-
* The "customTooltip" is defined in the Column Definition OR Grid Options (the first found will have priority over the second)
|
|
5
|
-
* To specify a tooltip when hovering a cell, extend the column definition like so:
|
|
6
|
-
*
|
|
7
|
-
* Available plugin options (same options are available in both column definition and/or grid options)
|
|
8
|
-
* Example 1 - via Column Definition
|
|
9
|
-
* this.columnDefinitions = [
|
|
10
|
-
* {
|
|
11
|
-
* id: "action", name: "Action", field: "action", formatter: fakeButtonFormatter,
|
|
12
|
-
* customTooltip: {
|
|
13
|
-
* formatter: tooltipTaskFormatter,
|
|
14
|
-
* usabilityOverride: (args) => !!(args.dataContext.id % 2) // show it only every second row
|
|
15
|
-
* }
|
|
16
|
-
* }
|
|
17
|
-
* ];
|
|
18
|
-
*
|
|
19
|
-
* OR Example 2 - via Grid Options (for all columns), NOTE: the column definition tooltip options will win over the options defined in the grid options
|
|
20
|
-
* this.gridOptions = {
|
|
21
|
-
* enableCellNavigation: true,
|
|
22
|
-
* customTooltip: {
|
|
23
|
-
* },
|
|
24
|
-
* };
|
|
25
|
-
*/
|
|
26
|
-
export class SlickCustomTooltip {
|
|
27
|
-
constructor() {
|
|
28
|
-
this.
|
|
29
|
-
this.
|
|
30
|
-
this.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
this.
|
|
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
|
-
this.
|
|
80
|
-
this.
|
|
81
|
-
this.
|
|
82
|
-
this.
|
|
83
|
-
|
|
84
|
-
.subscribe(grid.
|
|
85
|
-
.subscribe(grid.
|
|
86
|
-
.subscribe(grid.
|
|
87
|
-
.subscribe(grid.
|
|
88
|
-
.subscribe(grid.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
this.
|
|
94
|
-
this.
|
|
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
|
-
const
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
args
|
|
148
|
-
args.
|
|
149
|
-
args.
|
|
150
|
-
args.
|
|
151
|
-
args.
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
this.
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
if (
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
return sanitizeTextByAvailableSanitizer(this.gridOptions,
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
tmpTitleElm =
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
this._tooltipElm
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
if ((
|
|
315
|
-
this._tooltipElm.style.
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
*
|
|
335
|
-
*
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
const
|
|
345
|
-
const
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
//
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
this.
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
this._tooltipElm.classList.
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
this._tooltipElm.classList.add('arrow-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
//
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
}
|
|
1
|
+
import { calculateAvailableSpace, cancellablePromise, CancelledException, createDomElement, findFirstElementAttribute, getHtmlElementOffset, sanitizeTextByAvailableSanitizer, } from '@slickgrid-universal/common';
|
|
2
|
+
/**
|
|
3
|
+
* A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell "onMouseEnter" and "onMouseLeave" events.
|
|
4
|
+
* The "customTooltip" is defined in the Column Definition OR Grid Options (the first found will have priority over the second)
|
|
5
|
+
* To specify a tooltip when hovering a cell, extend the column definition like so:
|
|
6
|
+
*
|
|
7
|
+
* Available plugin options (same options are available in both column definition and/or grid options)
|
|
8
|
+
* Example 1 - via Column Definition
|
|
9
|
+
* this.columnDefinitions = [
|
|
10
|
+
* {
|
|
11
|
+
* id: "action", name: "Action", field: "action", formatter: fakeButtonFormatter,
|
|
12
|
+
* customTooltip: {
|
|
13
|
+
* formatter: tooltipTaskFormatter,
|
|
14
|
+
* usabilityOverride: (args) => !!(args.dataContext.id % 2) // show it only every second row
|
|
15
|
+
* }
|
|
16
|
+
* }
|
|
17
|
+
* ];
|
|
18
|
+
*
|
|
19
|
+
* OR Example 2 - via Grid Options (for all columns), NOTE: the column definition tooltip options will win over the options defined in the grid options
|
|
20
|
+
* this.gridOptions = {
|
|
21
|
+
* enableCellNavigation: true,
|
|
22
|
+
* customTooltip: {
|
|
23
|
+
* },
|
|
24
|
+
* };
|
|
25
|
+
*/
|
|
26
|
+
export class SlickCustomTooltip {
|
|
27
|
+
constructor() {
|
|
28
|
+
this._cellType = 'slick-cell';
|
|
29
|
+
this._rxjs = null;
|
|
30
|
+
this._sharedService = null;
|
|
31
|
+
this._defaultOptions = {
|
|
32
|
+
className: 'slick-custom-tooltip',
|
|
33
|
+
offsetLeft: 0,
|
|
34
|
+
offsetRight: 0,
|
|
35
|
+
offsetTopBottom: 4,
|
|
36
|
+
hideArrow: false,
|
|
37
|
+
regularTooltipWhiteSpace: 'pre-line',
|
|
38
|
+
whiteSpace: 'normal',
|
|
39
|
+
};
|
|
40
|
+
this.name = 'CustomTooltip';
|
|
41
|
+
this._eventHandler = new Slick.EventHandler();
|
|
42
|
+
}
|
|
43
|
+
get addonOptions() {
|
|
44
|
+
return this._addonOptions;
|
|
45
|
+
}
|
|
46
|
+
get cancellablePromise() {
|
|
47
|
+
return this._cancellablePromise;
|
|
48
|
+
}
|
|
49
|
+
get cellAddonOptions() {
|
|
50
|
+
return this._cellAddonOptions;
|
|
51
|
+
}
|
|
52
|
+
get className() {
|
|
53
|
+
var _a, _b;
|
|
54
|
+
return (_b = (_a = this._cellAddonOptions) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : 'slick-custom-tooltip';
|
|
55
|
+
}
|
|
56
|
+
get dataView() {
|
|
57
|
+
return this._grid.getData() || {};
|
|
58
|
+
}
|
|
59
|
+
/** Getter for the Grid Options pulled through the Grid Object */
|
|
60
|
+
get gridOptions() {
|
|
61
|
+
return this._grid.getOptions() || {};
|
|
62
|
+
}
|
|
63
|
+
/** Getter for the grid uid */
|
|
64
|
+
get gridUid() {
|
|
65
|
+
var _a;
|
|
66
|
+
return ((_a = this._grid) === null || _a === void 0 ? void 0 : _a.getUID()) || '';
|
|
67
|
+
}
|
|
68
|
+
get gridUidSelector() {
|
|
69
|
+
return this.gridUid ? `.${this.gridUid}` : '';
|
|
70
|
+
}
|
|
71
|
+
get tooltipElm() {
|
|
72
|
+
return this._tooltipElm;
|
|
73
|
+
}
|
|
74
|
+
addRxJsResource(rxjs) {
|
|
75
|
+
this._rxjs = rxjs;
|
|
76
|
+
}
|
|
77
|
+
init(grid, containerService) {
|
|
78
|
+
var _a, _b;
|
|
79
|
+
this._grid = grid;
|
|
80
|
+
this._rxjs = containerService.get('RxJsFacade');
|
|
81
|
+
this._sharedService = containerService.get('SharedService');
|
|
82
|
+
this._addonOptions = { ...this._defaultOptions, ...((_b = (_a = this._sharedService) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.customTooltip) };
|
|
83
|
+
this._eventHandler
|
|
84
|
+
.subscribe(grid.onMouseEnter, this.handleOnMouseEnter.bind(this))
|
|
85
|
+
.subscribe(grid.onHeaderMouseEnter, (e, args) => this.handleOnHeaderMouseEnterByType(e, args, 'slick-header-column'))
|
|
86
|
+
.subscribe(grid.onHeaderRowMouseEnter, (e, args) => this.handleOnHeaderMouseEnterByType(e, args, 'slick-headerrow-column'))
|
|
87
|
+
.subscribe(grid.onMouseLeave, this.hideTooltip.bind(this))
|
|
88
|
+
.subscribe(grid.onHeaderMouseLeave, this.hideTooltip.bind(this))
|
|
89
|
+
.subscribe(grid.onHeaderRowMouseLeave, this.hideTooltip.bind(this));
|
|
90
|
+
}
|
|
91
|
+
dispose() {
|
|
92
|
+
// hide (remove) any tooltip and unsubscribe from all events
|
|
93
|
+
this.hideTooltip();
|
|
94
|
+
this._cancellablePromise = undefined;
|
|
95
|
+
this._eventHandler.unsubscribeAll();
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* hide (remove) tooltip from the DOM, it will also remove it from the DOM and also cancel any pending requests (as mentioned below).
|
|
99
|
+
* When using async process, it will also cancel any opened Promise/Observable that might still be pending.
|
|
100
|
+
*/
|
|
101
|
+
hideTooltip() {
|
|
102
|
+
var _a, _b;
|
|
103
|
+
(_a = this._cancellablePromise) === null || _a === void 0 ? void 0 : _a.cancel();
|
|
104
|
+
(_b = this._observable$) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
105
|
+
const prevTooltip = document.body.querySelector(`.${this.className}${this.gridUidSelector}`);
|
|
106
|
+
prevTooltip === null || prevTooltip === void 0 ? void 0 : prevTooltip.remove();
|
|
107
|
+
}
|
|
108
|
+
getOptions() {
|
|
109
|
+
return this._addonOptions;
|
|
110
|
+
}
|
|
111
|
+
setOptions(newOptions) {
|
|
112
|
+
this._addonOptions = { ...this._addonOptions, ...newOptions };
|
|
113
|
+
}
|
|
114
|
+
// --
|
|
115
|
+
// protected functions
|
|
116
|
+
// ---------------------
|
|
117
|
+
/**
|
|
118
|
+
* Async process callback will hide any prior tooltip & then merge the new result with the item `dataContext` under a `__params` property
|
|
119
|
+
* (unless a new prop name is provided) to provice as dataContext object to the asyncPostFormatter.
|
|
120
|
+
*/
|
|
121
|
+
asyncProcessCallback(asyncResult, cell, value, columnDef, dataContext) {
|
|
122
|
+
var _a, _b, _c;
|
|
123
|
+
this.hideTooltip();
|
|
124
|
+
const itemWithAsyncData = { ...dataContext, [(_b = (_a = this.addonOptions) === null || _a === void 0 ? void 0 : _a.asyncParamsPropName) !== null && _b !== void 0 ? _b : '__params']: asyncResult };
|
|
125
|
+
if ((_c = this._cellAddonOptions) === null || _c === void 0 ? void 0 : _c.useRegularTooltip) {
|
|
126
|
+
this.renderRegularTooltip(this._cellAddonOptions.asyncPostFormatter, cell, value, columnDef, itemWithAsyncData);
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
this.renderTooltipFormatter(this._cellAddonOptions.asyncPostFormatter, cell, value, columnDef, itemWithAsyncData);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
/** depending on the selector type, execute the necessary handler code */
|
|
133
|
+
handleOnHeaderMouseEnterByType(event, args, selector) {
|
|
134
|
+
var _a, _b, _c;
|
|
135
|
+
this._cellType = selector;
|
|
136
|
+
// before doing anything, let's remove any previous tooltip before
|
|
137
|
+
// and cancel any opened Promise/Observable when using async
|
|
138
|
+
this.hideTooltip();
|
|
139
|
+
const cell = {
|
|
140
|
+
row: -1,
|
|
141
|
+
cell: this._grid.getColumns().findIndex((col) => { var _a, _b; return ((_b = (_a = args === null || args === void 0 ? void 0 : args.column) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') === col.id; })
|
|
142
|
+
};
|
|
143
|
+
const columnDef = args.column;
|
|
144
|
+
const item = {};
|
|
145
|
+
const isHeaderRowType = selector === 'slick-headerrow-column';
|
|
146
|
+
// run the override function (when defined), if the result is false it won't go further
|
|
147
|
+
args = args || {};
|
|
148
|
+
args.cell = cell.cell;
|
|
149
|
+
args.row = cell.row;
|
|
150
|
+
args.columnDef = columnDef;
|
|
151
|
+
args.dataContext = item;
|
|
152
|
+
args.grid = this._grid;
|
|
153
|
+
args.type = isHeaderRowType ? 'header-row' : 'header';
|
|
154
|
+
this._cellAddonOptions = { ...this._addonOptions, ...(columnDef === null || columnDef === void 0 ? void 0 : columnDef.customTooltip) };
|
|
155
|
+
if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.disableTooltip) || (typeof ((_a = this._cellAddonOptions) === null || _a === void 0 ? void 0 : _a.usabilityOverride) === 'function' && !this._cellAddonOptions.usabilityOverride(args))) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
if (columnDef && event.target) {
|
|
159
|
+
this._cellNodeElm = event.target.closest(`.${selector}`);
|
|
160
|
+
const formatter = isHeaderRowType ? this._cellAddonOptions.headerRowFormatter : this._cellAddonOptions.headerFormatter;
|
|
161
|
+
if (((_b = this._cellAddonOptions) === null || _b === void 0 ? void 0 : _b.useRegularTooltip) || !formatter) {
|
|
162
|
+
const formatterOrText = !isHeaderRowType ? columnDef.name : ((_c = this._cellAddonOptions) === null || _c === void 0 ? void 0 : _c.useRegularTooltip) ? null : formatter;
|
|
163
|
+
this.renderRegularTooltip(formatterOrText, cell, null, columnDef, item);
|
|
164
|
+
}
|
|
165
|
+
else if (this._cellNodeElm && typeof formatter === 'function') {
|
|
166
|
+
this.renderTooltipFormatter(formatter, cell, null, columnDef, item);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
async handleOnMouseEnter(event) {
|
|
171
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
172
|
+
this._cellType = 'slick-cell';
|
|
173
|
+
// before doing anything, let's remove any previous tooltip before
|
|
174
|
+
// and cancel any opened Promise/Observable when using async
|
|
175
|
+
this.hideTooltip();
|
|
176
|
+
if (event && this._grid) {
|
|
177
|
+
// get cell only when it's possible (ie, Composite Editor will not be able to get cell and so it will never show any tooltip)
|
|
178
|
+
const targetClassName = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.closest('.slick-cell')) === null || _b === void 0 ? void 0 : _b.className;
|
|
179
|
+
const cell = (targetClassName && /l\d+/.exec(targetClassName || '')) ? this._grid.getCellFromEvent(event) : null;
|
|
180
|
+
if (cell) {
|
|
181
|
+
const item = this.dataView ? this.dataView.getItem(cell.row) : this._grid.getDataItem(cell.row);
|
|
182
|
+
const columnDef = this._grid.getColumns()[cell.cell];
|
|
183
|
+
this._cellNodeElm = this._grid.getCellNode(cell.row, cell.cell);
|
|
184
|
+
if (item && columnDef) {
|
|
185
|
+
this._cellAddonOptions = { ...this._addonOptions, ...(columnDef === null || columnDef === void 0 ? void 0 : columnDef.customTooltip) };
|
|
186
|
+
if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.disableTooltip) || (typeof ((_c = this._cellAddonOptions) === null || _c === void 0 ? void 0 : _c.usabilityOverride) === 'function' && !this._cellAddonOptions.usabilityOverride({ cell: cell.cell, row: cell.row, dataContext: item, column: columnDef, grid: this._grid, type: 'cell' }))) {
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
const value = item.hasOwnProperty(columnDef.field) ? item[columnDef.field] : null;
|
|
190
|
+
// when cell is currently lock for editing, we'll force a tooltip title search
|
|
191
|
+
const cellValue = this._grid.getEditorLock().isActive() ? null : value;
|
|
192
|
+
// when there aren't any formatter OR when user specifically want to use a regular tooltip (via "title" attribute)
|
|
193
|
+
if ((this._cellAddonOptions.useRegularTooltip && !((_d = this._cellAddonOptions) === null || _d === void 0 ? void 0 : _d.asyncProcess)) || !((_e = this._cellAddonOptions) === null || _e === void 0 ? void 0 : _e.formatter)) {
|
|
194
|
+
this.renderRegularTooltip(columnDef.formatter, cell, cellValue, columnDef, item);
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
// when we aren't using regular tooltip and we do have a tooltip formatter, let's render it
|
|
198
|
+
if (typeof ((_f = this._cellAddonOptions) === null || _f === void 0 ? void 0 : _f.formatter) === 'function') {
|
|
199
|
+
this.renderTooltipFormatter(this._cellAddonOptions.formatter, cell, cellValue, columnDef, item);
|
|
200
|
+
}
|
|
201
|
+
// when tooltip is an Async (delayed, e.g. with a backend API call)
|
|
202
|
+
if (typeof ((_g = this._cellAddonOptions) === null || _g === void 0 ? void 0 : _g.asyncProcess) === 'function') {
|
|
203
|
+
const asyncProcess = this._cellAddonOptions.asyncProcess(cell.row, cell.cell, value, columnDef, item, this._grid);
|
|
204
|
+
if (!this._cellAddonOptions.asyncPostFormatter) {
|
|
205
|
+
console.error(`[Slickgrid-Universal] when using "asyncProcess" with Custom Tooltip, you must also provide an "asyncPostFormatter" formatter.`);
|
|
206
|
+
}
|
|
207
|
+
if (asyncProcess instanceof Promise) {
|
|
208
|
+
// create a new cancellable promise which will resolve, unless it's cancelled, with the udpated `dataContext` object that includes the `__params`
|
|
209
|
+
this._cancellablePromise = cancellablePromise(asyncProcess);
|
|
210
|
+
this._cancellablePromise.promise
|
|
211
|
+
.then((asyncResult) => this.asyncProcessCallback(asyncResult, cell, value, columnDef, item))
|
|
212
|
+
.catch((error) => {
|
|
213
|
+
// we will throw back any errors, unless it's a cancelled promise which in that case will be disregarded (thrown by the promise wrapper cancel() call)
|
|
214
|
+
if (!(error instanceof CancelledException)) {
|
|
215
|
+
console.error(error);
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
else if ((_h = this._rxjs) === null || _h === void 0 ? void 0 : _h.isObservable(asyncProcess)) {
|
|
220
|
+
const rxjs = this._rxjs;
|
|
221
|
+
this._observable$ = asyncProcess
|
|
222
|
+
.pipe(
|
|
223
|
+
// use `switchMap` so that it cancels any previous subscription, it must return an observable so we can use `of` for that, and then finally we can subscribe to the new observable
|
|
224
|
+
rxjs.switchMap((asyncResult) => rxjs.of(asyncResult))).subscribe((asyncResult) => this.asyncProcessCallback(asyncResult, cell, value, columnDef, item), (error) => console.error(error));
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
/**
|
|
233
|
+
* Parse the Custom Formatter (when provided) or return directly the text when it is already a string.
|
|
234
|
+
* We will also sanitize the text in both cases before returning it so that it can be used safely.
|
|
235
|
+
*/
|
|
236
|
+
parseFormatterAndSanitize(formatterOrText, cell, value, columnDef, item) {
|
|
237
|
+
if (typeof formatterOrText === 'function') {
|
|
238
|
+
const tooltipText = formatterOrText(cell.row, cell.cell, value, columnDef, item, this._grid);
|
|
239
|
+
const formatterText = (typeof tooltipText === 'object' && (tooltipText === null || tooltipText === void 0 ? void 0 : tooltipText.text)) ? tooltipText.text : (typeof tooltipText === 'string' ? tooltipText : '');
|
|
240
|
+
return sanitizeTextByAvailableSanitizer(this.gridOptions, formatterText);
|
|
241
|
+
}
|
|
242
|
+
else if (typeof formatterOrText === 'string') {
|
|
243
|
+
return sanitizeTextByAvailableSanitizer(this.gridOptions, formatterOrText);
|
|
244
|
+
}
|
|
245
|
+
return '';
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* Parse the cell formatter and assume it might be html
|
|
249
|
+
* then create a temporary html element to easily retrieve the first [title=""] attribute text content
|
|
250
|
+
* also clear the "title" attribute from the grid div text content so that it won't show also as a 2nd browser tooltip
|
|
251
|
+
*/
|
|
252
|
+
renderRegularTooltip(formatterOrText, cell, value, columnDef, item) {
|
|
253
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
254
|
+
const tmpDiv = createDomElement('div', { innerHTML: this.parseFormatterAndSanitize(formatterOrText, cell, value, columnDef, item) });
|
|
255
|
+
let tooltipText = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.toolTip) !== null && _a !== void 0 ? _a : '';
|
|
256
|
+
let tmpTitleElm;
|
|
257
|
+
if (!tooltipText) {
|
|
258
|
+
if (this._cellType === 'slick-cell' && this._cellNodeElm && (this._cellNodeElm.clientWidth < this._cellNodeElm.scrollWidth) && !((_b = this._cellAddonOptions) === null || _b === void 0 ? void 0 : _b.useRegularTooltipFromFormatterOnly)) {
|
|
259
|
+
tooltipText = (_d = (_c = this._cellNodeElm.textContent) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
|
|
260
|
+
if (((_e = this._cellAddonOptions) === null || _e === void 0 ? void 0 : _e.tooltipTextMaxLength) && tooltipText.length > ((_f = this._cellAddonOptions) === null || _f === void 0 ? void 0 : _f.tooltipTextMaxLength)) {
|
|
261
|
+
tooltipText = tooltipText.substring(0, this._cellAddonOptions.tooltipTextMaxLength - 3) + '...';
|
|
262
|
+
}
|
|
263
|
+
tmpTitleElm = this._cellNodeElm;
|
|
264
|
+
}
|
|
265
|
+
else {
|
|
266
|
+
if ((_g = this._cellAddonOptions) === null || _g === void 0 ? void 0 : _g.useRegularTooltipFromFormatterOnly) {
|
|
267
|
+
tmpTitleElm = tmpDiv.querySelector('[title], [data-slick-tooltip]');
|
|
268
|
+
}
|
|
269
|
+
else {
|
|
270
|
+
tmpTitleElm = findFirstElementAttribute(this._cellNodeElm, ['title', 'data-slick-tooltip']) ? this._cellNodeElm : tmpDiv.querySelector('[title], [data-slick-tooltip]');
|
|
271
|
+
if ((!tmpTitleElm || !findFirstElementAttribute(tmpTitleElm, ['title', 'data-slick-tooltip'])) && this._cellNodeElm) {
|
|
272
|
+
tmpTitleElm = this._cellNodeElm.querySelector('[title], [data-slick-tooltip]');
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
if (!tooltipText || (typeof formatterOrText === 'function' && ((_h = this._cellAddonOptions) === null || _h === void 0 ? void 0 : _h.useRegularTooltipFromFormatterOnly))) {
|
|
276
|
+
tooltipText = findFirstElementAttribute(tmpTitleElm, ['title', 'data-slick-tooltip']) || '';
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
if (tooltipText !== '') {
|
|
281
|
+
this.renderTooltipFormatter(formatterOrText, cell, value, columnDef, item, tooltipText);
|
|
282
|
+
}
|
|
283
|
+
// also clear any "title" attribute to avoid showing a 2nd browser tooltip
|
|
284
|
+
this.swapAndClearTitleAttribute(tmpTitleElm, tooltipText);
|
|
285
|
+
}
|
|
286
|
+
renderTooltipFormatter(formatter, cell, value, columnDef, item, tooltipText, inputTitleElm) {
|
|
287
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
288
|
+
// create the tooltip DOM element with the text returned by the Formatter
|
|
289
|
+
this._tooltipElm = createDomElement('div', { className: this.className });
|
|
290
|
+
this._tooltipElm.classList.add(this.gridUid);
|
|
291
|
+
this._tooltipElm.classList.add('l' + cell.cell);
|
|
292
|
+
this._tooltipElm.classList.add('r' + cell.cell);
|
|
293
|
+
// when cell is currently lock for editing, we'll force a tooltip title search
|
|
294
|
+
// that can happen when user has a formatter but is currently editing and in that case we want the new value
|
|
295
|
+
// ie: when user is currently editing and uses the Slider, when dragging its value is changing, so we wish to use the editing value instead of the previous cell value.
|
|
296
|
+
if (value === null || value === undefined) {
|
|
297
|
+
const tmpTitleElm = (_a = this._cellNodeElm) === null || _a === void 0 ? void 0 : _a.querySelector('[title], [data-slick-tooltip]');
|
|
298
|
+
value = findFirstElementAttribute(tmpTitleElm, ['title', 'data-slick-tooltip']) || value;
|
|
299
|
+
}
|
|
300
|
+
let outputText = tooltipText || this.parseFormatterAndSanitize(formatter, cell, value, columnDef, item) || '';
|
|
301
|
+
outputText = (((_b = this._cellAddonOptions) === null || _b === void 0 ? void 0 : _b.tooltipTextMaxLength) && outputText.length > this._cellAddonOptions.tooltipTextMaxLength) ? outputText.substring(0, this._cellAddonOptions.tooltipTextMaxLength - 3) + '...' : outputText;
|
|
302
|
+
let finalOutputText = '';
|
|
303
|
+
if (!tooltipText || ((_c = this._cellAddonOptions) === null || _c === void 0 ? void 0 : _c.renderRegularTooltipAsHtml)) {
|
|
304
|
+
finalOutputText = sanitizeTextByAvailableSanitizer(this.gridOptions, outputText);
|
|
305
|
+
this._tooltipElm.innerHTML = finalOutputText;
|
|
306
|
+
this._tooltipElm.style.whiteSpace = (_e = (_d = this._cellAddonOptions) === null || _d === void 0 ? void 0 : _d.whiteSpace) !== null && _e !== void 0 ? _e : this._defaultOptions.whiteSpace;
|
|
307
|
+
}
|
|
308
|
+
else {
|
|
309
|
+
finalOutputText = outputText || '';
|
|
310
|
+
this._tooltipElm.textContent = finalOutputText;
|
|
311
|
+
this._tooltipElm.style.whiteSpace = (_g = (_f = this._cellAddonOptions) === null || _f === void 0 ? void 0 : _f.regularTooltipWhiteSpace) !== null && _g !== void 0 ? _g : this._defaultOptions.regularTooltipWhiteSpace; // use `pre` so that sequences of white space are collapsed. Lines are broken at newline characters
|
|
312
|
+
}
|
|
313
|
+
// optional max height/width of the tooltip container
|
|
314
|
+
if ((_h = this._cellAddonOptions) === null || _h === void 0 ? void 0 : _h.maxHeight) {
|
|
315
|
+
this._tooltipElm.style.maxHeight = `${this._cellAddonOptions.maxHeight}px`;
|
|
316
|
+
}
|
|
317
|
+
if ((_j = this._cellAddonOptions) === null || _j === void 0 ? void 0 : _j.maxWidth) {
|
|
318
|
+
this._tooltipElm.style.maxWidth = `${this._cellAddonOptions.maxWidth}px`;
|
|
319
|
+
}
|
|
320
|
+
// when do have text to show, then append the new tooltip to the html body & reposition the tooltip
|
|
321
|
+
if (finalOutputText) {
|
|
322
|
+
document.body.appendChild(this._tooltipElm);
|
|
323
|
+
// reposition the tooltip on top of the cell that triggered the mouse over event
|
|
324
|
+
this.reposition(cell);
|
|
325
|
+
// user could optionally hide the tooltip arrow (we can simply update the CSS variables, that's the only way we have to update CSS pseudo)
|
|
326
|
+
if (!((_k = this._cellAddonOptions) === null || _k === void 0 ? void 0 : _k.hideArrow)) {
|
|
327
|
+
this._tooltipElm.classList.add('tooltip-arrow');
|
|
328
|
+
}
|
|
329
|
+
// also clear any "title" attribute to avoid showing a 2nd browser tooltip
|
|
330
|
+
this.swapAndClearTitleAttribute(inputTitleElm, outputText);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
/**
|
|
334
|
+
* Reposition the Tooltip to be top-left position over the cell.
|
|
335
|
+
* By default we use an "auto" mode which will allow to position the Tooltip to the best logical position in the window, also when we mention position, we are talking about the relative position against the grid cell.
|
|
336
|
+
* We can assume that in 80% of the time the default position is top-right, the default is "auto" but we can also override it and use a specific position.
|
|
337
|
+
* Most of the time positioning of the tooltip will be to the "top-right" of the cell is ok but if our column is completely on the right side then we'll want to change the position to "left" align.
|
|
338
|
+
* Same goes for the top/bottom position, Most of the time positioning the tooltip to the "top" but if we are hovering a cell at the top of the grid and there's no room to display it then we might need to reposition to "bottom" instead.
|
|
339
|
+
*/
|
|
340
|
+
reposition(cell) {
|
|
341
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
342
|
+
if (this._tooltipElm) {
|
|
343
|
+
this._cellNodeElm = this._cellNodeElm || this._grid.getCellNode(cell.row, cell.cell);
|
|
344
|
+
const cellPosition = getHtmlElementOffset(this._cellNodeElm) || { top: 0, left: 0 };
|
|
345
|
+
const cellContainerWidth = this._cellNodeElm.offsetWidth;
|
|
346
|
+
const calculatedTooltipHeight = this._tooltipElm.getBoundingClientRect().height;
|
|
347
|
+
const calculatedTooltipWidth = this._tooltipElm.getBoundingClientRect().width;
|
|
348
|
+
const calculatedBodyWidth = document.body.offsetWidth || window.innerWidth;
|
|
349
|
+
// first calculate the default (top/left) position
|
|
350
|
+
let newPositionTop = (cellPosition.top || 0) - this._tooltipElm.offsetHeight - ((_b = (_a = this._cellAddonOptions) === null || _a === void 0 ? void 0 : _a.offsetTopBottom) !== null && _b !== void 0 ? _b : 0);
|
|
351
|
+
let newPositionLeft = (cellPosition.left || 0) - ((_d = (_c = this._cellAddonOptions) === null || _c === void 0 ? void 0 : _c.offsetRight) !== null && _d !== void 0 ? _d : 0);
|
|
352
|
+
// user could explicitely use a "left-align" arrow position, (when user knows his column is completely on the right in the grid)
|
|
353
|
+
// or when using "auto" and we detect not enough available space then we'll position to the "left" of the cell
|
|
354
|
+
// NOTE the class name is for the arrow and is inverse compare to the tooltip itself, so if user ask for "left-align", then the arrow will in fact be "arrow-right-align"
|
|
355
|
+
const position = (_f = (_e = this._cellAddonOptions) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : 'auto';
|
|
356
|
+
if (position === 'center') {
|
|
357
|
+
newPositionLeft += (cellContainerWidth / 2) - (calculatedTooltipWidth / 2) + ((_h = (_g = this._cellAddonOptions) === null || _g === void 0 ? void 0 : _g.offsetRight) !== null && _h !== void 0 ? _h : 0);
|
|
358
|
+
this._tooltipElm.classList.remove('arrow-left-align');
|
|
359
|
+
this._tooltipElm.classList.remove('arrow-right-align');
|
|
360
|
+
this._tooltipElm.classList.add('arrow-center-align');
|
|
361
|
+
}
|
|
362
|
+
else if (position === 'right-align' || ((position === 'auto' || position !== 'left-align') && (newPositionLeft + calculatedTooltipWidth) > calculatedBodyWidth)) {
|
|
363
|
+
newPositionLeft -= (calculatedTooltipWidth - cellContainerWidth - ((_k = (_j = this._cellAddonOptions) === null || _j === void 0 ? void 0 : _j.offsetLeft) !== null && _k !== void 0 ? _k : 0));
|
|
364
|
+
this._tooltipElm.classList.remove('arrow-center-align');
|
|
365
|
+
this._tooltipElm.classList.remove('arrow-left-align');
|
|
366
|
+
this._tooltipElm.classList.add('arrow-right-align');
|
|
367
|
+
}
|
|
368
|
+
else {
|
|
369
|
+
this._tooltipElm.classList.remove('arrow-center-align');
|
|
370
|
+
this._tooltipElm.classList.remove('arrow-right-align');
|
|
371
|
+
this._tooltipElm.classList.add('arrow-left-align');
|
|
372
|
+
}
|
|
373
|
+
// do the same calculation/reposition with top/bottom (default is top of the cell or in other word starting from the cell going down)
|
|
374
|
+
// NOTE the class name is for the arrow and is inverse compare to the tooltip itself, so if user ask for "bottom", then the arrow will in fact be "arrow-top"
|
|
375
|
+
if (position === 'bottom' || ((position === 'auto' || position !== 'top') && calculatedTooltipHeight > calculateAvailableSpace(this._cellNodeElm).top)) {
|
|
376
|
+
newPositionTop = (cellPosition.top || 0) + ((_l = this.gridOptions.rowHeight) !== null && _l !== void 0 ? _l : 0) + ((_o = (_m = this._cellAddonOptions) === null || _m === void 0 ? void 0 : _m.offsetTopBottom) !== null && _o !== void 0 ? _o : 0);
|
|
377
|
+
this._tooltipElm.classList.remove('arrow-down');
|
|
378
|
+
this._tooltipElm.classList.add('arrow-up');
|
|
379
|
+
}
|
|
380
|
+
else {
|
|
381
|
+
this._tooltipElm.classList.add('arrow-down');
|
|
382
|
+
this._tooltipElm.classList.remove('arrow-up');
|
|
383
|
+
}
|
|
384
|
+
// reposition the tooltip over the cell (90% of the time this will end up using a position on the "right" of the cell)
|
|
385
|
+
this._tooltipElm.style.top = `${newPositionTop}px`;
|
|
386
|
+
this._tooltipElm.style.left = `${newPositionLeft}px`;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
/**
|
|
390
|
+
* swap and copy the "title" attribute into a new custom attribute then clear the "title" attribute
|
|
391
|
+
* from the grid div text content so that it won't show also as a 2nd browser tooltip
|
|
392
|
+
*/
|
|
393
|
+
swapAndClearTitleAttribute(inputTitleElm, tooltipText) {
|
|
394
|
+
var _a;
|
|
395
|
+
// the title attribute might be directly on the slick-cell container element (when formatter returns a result object)
|
|
396
|
+
// OR in a child element (most commonly as a custom formatter)
|
|
397
|
+
const titleElm = inputTitleElm || (this._cellNodeElm && ((this._cellNodeElm.hasAttribute('title') && this._cellNodeElm.getAttribute('title')) ? this._cellNodeElm : (_a = this._cellNodeElm) === null || _a === void 0 ? void 0 : _a.querySelector('[title]')));
|
|
398
|
+
// flip tooltip text from `title` to `data-slick-tooltip`
|
|
399
|
+
if (titleElm) {
|
|
400
|
+
titleElm.setAttribute('data-slick-tooltip', tooltipText || '');
|
|
401
|
+
if (titleElm.hasAttribute('title')) {
|
|
402
|
+
titleElm.setAttribute('title', '');
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
404
407
|
//# sourceMappingURL=slickCustomTooltip.js.map
|