GPQAPP

Форк
0
/
dataTables.fixedColumns.js 
557 строк · 24.2 Кб
1
/*! FixedColumns 4.0.0
2
 * 2019-2020 SpryMedia Ltd - datatables.net/license
3
 */
4
(function () {
5
    'use strict';
6

7
    var $;
8
    var dataTable;
9
    function setJQuery(jq) {
10
        $ = jq;
11
        dataTable = $.fn.dataTable;
12
    }
13
    var FixedColumns = /** @class */ (function () {
14
        function FixedColumns(settings, opts) {
15
            var _this = this;
16
            // Check that the required version of DataTables is included
17
            if (!dataTable || !dataTable.versionCheck || !dataTable.versionCheck('1.10.0')) {
18
                throw new Error('StateRestore requires DataTables 1.10 or newer');
19
            }
20
            var table = new dataTable.Api(settings);
21
            this.classes = $.extend(true, {}, FixedColumns.classes);
22
            // Get options from user
23
            this.c = $.extend(true, {}, FixedColumns.defaults, opts);
24
            // Backwards compatibility for deprecated leftColumns
25
            if (opts.left === undefined && this.c.leftColumns !== undefined) {
26
                this.c.left = this.c.leftColumns;
27
            }
28
            // Backwards compatibility for deprecated rightColumns
29
            if (opts.right === undefined && this.c.rightColumns !== undefined) {
30
                this.c.right = this.c.rightColumns;
31
            }
32
            this.s = {
33
                barWidth: 0,
34
                dt: table,
35
                rtl: $(table.table().node()).css('direction') === 'rtl'
36
            };
37
            // Set the bar width if vertical scrolling is enabled
38
            if (this.s.dt.settings()[0].oInit.scrollY === true) {
39
                this.s.barWidth = this.s.dt.settings()[0].oBrowser.barWidth;
40
            }
41
            // Common CSS for all blockers
42
            var blockerCSS = {
43
                'background-color': 'white',
44
                'bottom': '0px',
45
                'display': 'block',
46
                'position': 'absolute',
47
                'width': this.s.barWidth + 1 + 'px'
48
            };
49
            this.dom = {
50
                leftBottomBlocker: $('<div>')
51
                    .css(blockerCSS)
52
                    .css('left', 0)
53
                    .addClass(this.classes.leftBottomBlocker),
54
                leftTopBlocker: $('<div>')
55
                    .css(blockerCSS)
56
                    .css({
57
                    left: 0,
58
                    top: 0
59
                })
60
                    .addClass(this.classes.leftTopBlocker),
61
                rightBottomBlocker: $('<div>')
62
                    .css(blockerCSS)
63
                    .css('right', 0)
64
                    .addClass(this.classes.rightBottomBlocker),
65
                rightTopBlocker: $('<div>')
66
                    .css(blockerCSS)
67
                    .css({
68
                    right: 0,
69
                    top: 0
70
                })
71
                    .addClass(this.classes.rightTopBlocker)
72
            };
73
            if (this.s.dt.settings()[0]._bInitComplete) {
74
                // Fixed Columns Initialisation
75
                this._addStyles();
76
                this._setKeyTableListener();
77
            }
78
            else {
79
                table.one('preInit.dt', function () {
80
                    // Fixed Columns Initialisation
81
                    _this._addStyles();
82
                    _this._setKeyTableListener();
83
                });
84
            }
85
            // Make class available through dt object
86
            table.settings()[0]._fixedColumns = this;
87
            return this;
88
        }
89
        /**
90
         * Getter/Setter for the fixedColumns.left property
91
         *
92
         * @param newVal Optional. If present this will be the new value for the number of left fixed columns
93
         * @returns The number of left fixed columns
94
         */
95
        FixedColumns.prototype.left = function (newVal) {
96
            // If the value is to change
97
            if (newVal !== undefined) {
98
                // Set the new values and redraw the columns
99
                this.c.left = newVal;
100
                this._addStyles();
101
            }
102
            return this.c.left;
103
        };
104
        /**
105
         * Getter/Setter for the fixedColumns.left property
106
         *
107
         * @param newVal Optional. If present this will be the new value for the number of right fixed columns
108
         * @returns The number of right fixed columns
109
         */
110
        FixedColumns.prototype.right = function (newVal) {
111
            // If the value is to change
112
            if (newVal !== undefined) {
113
                // Set the new values and redraw the columns
114
                this.c.right = newVal;
115
                this._addStyles();
116
            }
117
            return this.c.right;
118
        };
119
        /**
120
         * Iterates over the columns, fixing the appropriate ones to the left and right
121
         */
122
        FixedColumns.prototype._addStyles = function () {
123
            var parentDiv = null;
124
            // Get the header and it's height
125
            var header = this.s.dt.column(0).header();
126
            var headerHeight = null;
127
            if (header !== null) {
128
                header = $(header);
129
                headerHeight = header.outerHeight() + 1;
130
                parentDiv = $(header.closest('div.dataTables_scroll')).css('position', 'relative');
131
            }
132
            // Get the footer and it's height
133
            var footer = this.s.dt.column(0).footer();
134
            var footerHeight = null;
135
            if (footer !== null) {
136
                footer = $(footer);
137
                footerHeight = footer.outerHeight();
138
                // Only attempt to retrieve the parentDiv if it has not been retrieved already
139
                if (parentDiv === null) {
140
                    parentDiv = $(footer.closest('div.dataTables_scroll')).css('position', 'relative');
141
                }
142
            }
143
            // Get the number of columns in the table - this is used often so better to only make 1 api call
144
            var numCols = this.s.dt.columns().data().toArray().length;
145
            // Tracker for the number of pixels should be left to the left of the table
146
            var distLeft = 0;
147
            // Get all of the row elements in the table
148
            var rows = $(this.s.dt.table().node()).children('tbody').children('tr');
149
            var invisibles = 0;
150
            // Iterate over all of the columns
151
            for (var i = 0; i < numCols; i++) {
152
                var column = this.s.dt.column(i);
153
                if (!column.visible()) {
154
                    invisibles++;
155
                    continue;
156
                }
157
                // Get the columns header and footer element
158
                var colHeader = $(column.header());
159
                var colFooter = $(column.footer());
160
                // If i is less than the value of left then this column should be fixed left
161
                if (i < this.c.left) {
162
                    $(this.s.dt.table().node()).addClass(this.classes.tableFixedLeft);
163
                    parentDiv.addClass(this.classes.tableFixedLeft);
164
                    // Add the width of the previous node - only if we are on atleast the second column
165
                    if (i !== 0) {
166
                        var prevCol = this.s.dt.column(i - 1);
167
                        if (prevCol.visible()) {
168
                            distLeft += $(prevCol.nodes()[0]).outerWidth();
169
                        }
170
                    }
171
                    // Iterate over all of the rows, fixing the cell to the left
172
                    for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
173
                        var row = rows_1[_i];
174
                        $($(row).children()[i - invisibles])
175
                            .css(this._getCellCSS(false, distLeft, 'left'))
176
                            .addClass(this.classes.fixedLeft);
177
                    }
178
                    // Add the css for the header and the footer
179
                    colHeader
180
                        .css(this._getCellCSS(true, distLeft, 'left'))
181
                        .addClass(this.classes.fixedLeft);
182
                    colFooter
183
                        .css(this._getCellCSS(true, distLeft, 'left'))
184
                        .addClass(this.classes.fixedLeft);
185
                }
186
                else {
187
                    // Iteriate through all of the rows, making sure they aren't currently trying to fix left
188
                    for (var _a = 0, rows_2 = rows; _a < rows_2.length; _a++) {
189
                        var row = rows_2[_a];
190
                        var cell = $($(row).children()[i - invisibles]);
191
                        // If the cell is trying to fix to the left, remove the class and the css
192
                        if (cell.hasClass(this.classes.fixedLeft)) {
193
                            cell
194
                                .css(this._clearCellCSS('left'))
195
                                .removeClass(this.classes.fixedLeft);
196
                        }
197
                    }
198
                    // Make sure the header for this column isn't fixed left
199
                    if (colHeader.hasClass(this.classes.fixedLeft)) {
200
                        colHeader
201
                            .css(this._clearCellCSS('left'))
202
                            .removeClass(this.classes.fixedLeft);
203
                    }
204
                    // Make sure the footer for this column isn't fixed left
205
                    if (colFooter.hasClass(this.classes.fixedLeft)) {
206
                        colFooter
207
                            .css(this._clearCellCSS('left'))
208
                            .removeClass(this.classes.fixedLeft);
209
                    }
210
                }
211
            }
212
            // If there is a header with the index class and reading rtl then add left top blocker
213
            if (header !== null && !header.hasClass('index')) {
214
                if (this.s.rtl) {
215
                    this.dom.leftTopBlocker.outerHeight(headerHeight);
216
                    parentDiv.append(this.dom.leftTopBlocker);
217
                }
218
                else {
219
                    this.dom.rightTopBlocker.outerHeight(headerHeight);
220
                    parentDiv.append(this.dom.rightTopBlocker);
221
                }
222
            }
223
            // If there is a footer with the index class and reading rtl then add left bottom blocker
224
            if (footer !== null && !footer.hasClass('index')) {
225
                if (this.s.rtl) {
226
                    this.dom.leftBottomBlocker.outerHeight(footerHeight);
227
                    parentDiv.append(this.dom.leftBottomBlocker);
228
                }
229
                else {
230
                    this.dom.rightBottomBlocker.outerHeight(footerHeight);
231
                    parentDiv.append(this.dom.rightBottomBlocker);
232
                }
233
            }
234
            var distRight = 0;
235
            invisibles = 0;
236
            for (var i = numCols - 1; i >= 0; i--) {
237
                var column = this.s.dt.column(i);
238
                // Get the columns header and footer element
239
                var colHeader = $(column.header());
240
                var colFooter = $(column.footer());
241
                if (!column.visible()) {
242
                    invisibles++;
243
                    continue;
244
                }
245
                if (i >= numCols - this.c.right) {
246
                    $(this.s.dt.table().node()).addClass(this.classes.tableFixedRight);
247
                    parentDiv.addClass(this.classes.tableFixedLeft);
248
                    // Add the widht of the previous node, only if we are on atleast the second column
249
                    if (i !== numCols - 1) {
250
                        var prevCol = this.s.dt.column(i + 1);
251
                        if (prevCol.visible()) {
252
                            distRight += $(prevCol.nodes()[0]).outerWidth();
253
                        }
254
                    }
255
                    // Iterate over all of the rows, fixing the cell to the right
256
                    for (var _b = 0, rows_3 = rows; _b < rows_3.length; _b++) {
257
                        var row = rows_3[_b];
258
                        $($(row).children()[i + invisibles])
259
                            .css(this._getCellCSS(false, distRight, 'right'))
260
                            .addClass(this.classes.fixedRight);
261
                    }
262
                    // Add the css for the header and the footer
263
                    colHeader
264
                        .css(this._getCellCSS(true, distRight, 'right'))
265
                        .addClass(this.classes.fixedRight);
266
                    colFooter
267
                        .css(this._getCellCSS(true, distRight, 'right'))
268
                        .addClass(this.classes.fixedRight);
269
                }
270
                else {
271
                    // Iteriate through all of the rows, making sure they aren't currently trying to fix right
272
                    for (var _c = 0, rows_4 = rows; _c < rows_4.length; _c++) {
273
                        var row = rows_4[_c];
274
                        var cell = $($(row).children()[i + invisibles]);
275
                        // If the cell is trying to fix to the right, remove the class and the css
276
                        if (cell.hasClass(this.classes.fixedRight)) {
277
                            cell
278
                                .css(this._clearCellCSS('right'))
279
                                .removeClass(this.classes.fixedRight);
280
                        }
281
                    }
282
                    // Make sure the header for this column isn't fixed right
283
                    if (colHeader.hasClass(this.classes.fixedRight)) {
284
                        colHeader
285
                            .css(this._clearCellCSS('right'))
286
                            .removeClass(this.classes.fixedRight);
287
                    }
288
                    // Make sure the footer for this column isn't fixed right
289
                    if (colFooter.hasClass(this.classes.fixedRight)) {
290
                        colFooter
291
                            .css(this._clearCellCSS('right'))
292
                            .removeClass(this.classes.fixedRight);
293
                    }
294
                }
295
            }
296
            // If there is a header with the index class and reading rtl then add right top blocker
297
            if (header) {
298
                if (!this.s.rtl) {
299
                    this.dom.rightTopBlocker.outerHeight(headerHeight);
300
                    parentDiv.append(this.dom.rightTopBlocker);
301
                }
302
                else {
303
                    this.dom.leftTopBlocker.outerHeight(headerHeight);
304
                    parentDiv.append(this.dom.leftTopBlocker);
305
                }
306
            }
307
            // If there is a footer with the index class and reading rtl then add right bottom blocker
308
            if (footer) {
309
                if (!this.s.rtl) {
310
                    this.dom.rightBottomBlocker.outerHeight(footerHeight);
311
                    parentDiv.append(this.dom.rightBottomBlocker);
312
                }
313
                else {
314
                    this.dom.leftBottomBlocker.outerHeight(footerHeight);
315
                    parentDiv.append(this.dom.leftBottomBlocker);
316
                }
317
            }
318
        };
319
        /**
320
         * Gets the correct CSS for the cell, header or footer based on options provided
321
         *
322
         * @param header Whether this cell is a header or a footer
323
         * @param dist The distance that the cell should be moved away from the edge
324
         * @param lr Indicator of fixing to the left or the right
325
         * @returns An object containing the correct css
326
         */
327
        FixedColumns.prototype._getCellCSS = function (header, dist, lr) {
328
            if (lr === 'left') {
329
                return !this.s.rtl ?
330
                    {
331
                        left: dist + 'px',
332
                        position: 'sticky'
333
                    } :
334
                    {
335
                        position: 'sticky',
336
                        right: dist + (header ? this.s.barWidth : 0) + 'px'
337
                    };
338
            }
339
            else {
340
                return !this.s.rtl ?
341
                    {
342
                        position: 'sticky',
343
                        right: dist + (header ? this.s.barWidth : 0) + 'px'
344
                    } :
345
                    {
346
                        left: dist + 'px',
347
                        position: 'sticky'
348
                    };
349
            }
350
        };
351
        /**
352
         * Gets the css that is required to clear the fixing to a side
353
         *
354
         * @param lr Indicator of fixing to the left or the right
355
         * @returns An object containing the correct css
356
         */
357
        FixedColumns.prototype._clearCellCSS = function (lr) {
358
            if (lr === 'left') {
359
                return !this.s.rtl ?
360
                    {
361
                        left: '',
362
                        position: ''
363
                    } :
364
                    {
365
                        position: '',
366
                        right: ''
367
                    };
368
            }
369
            else {
370
                return !this.s.rtl ?
371
                    {
372
                        position: '',
373
                        right: ''
374
                    } :
375
                    {
376
                        left: '',
377
                        position: ''
378
                    };
379
            }
380
        };
381
        FixedColumns.prototype._setKeyTableListener = function () {
382
            var _this = this;
383
            this.s.dt.on('key-focus', function (e, dt, cell) {
384
                var cellPos = $(cell.node()).offset();
385
                var scroll = $($(_this.s.dt.table().node()).closest('div.dataTables_scrollBody'));
386
                // If there are fixed columns to the left
387
                if (_this.c.left > 0) {
388
                    // Get the rightmost left fixed column header, it's position and it's width
389
                    var rightMost = $(_this.s.dt.column(_this.c.left - 1).header());
390
                    var rightMostPos = rightMost.offset();
391
                    var rightMostWidth = rightMost.outerWidth();
392
                    // If the current highlighted cell is left of the rightmost cell on the screen
393
                    if (cellPos.left < rightMostPos.left + rightMostWidth) {
394
                        // Scroll it into view
395
                        var currScroll = scroll.scrollLeft();
396
                        scroll.scrollLeft(currScroll - (rightMostPos.left + rightMostWidth - cellPos.left));
397
                    }
398
                }
399
                // If there are fixed columns to the right
400
                if (_this.c.right > 0) {
401
                    // Get the number of columns and the width of the cell as doing right side calc
402
                    var numCols = _this.s.dt.columns().data().toArray().length;
403
                    var cellWidth = $(cell.node()).outerWidth();
404
                    // Get the leftmost right fixed column header and it's position
405
                    var leftMost = $(_this.s.dt.column(numCols - _this.c.right).header());
406
                    var leftMostPos = leftMost.offset();
407
                    // If the current highlighted cell is right of the leftmost cell on the screen
408
                    if (cellPos.left + cellWidth > leftMostPos.left) {
409
                        // Scroll it into view
410
                        var currScroll = scroll.scrollLeft();
411
                        scroll.scrollLeft(currScroll - (leftMostPos.left - (cellPos.left + cellWidth)));
412
                    }
413
                }
414
            });
415
            // Whenever a draw occurs there is potential for the data to have changed and therefore also the column widths
416
            // Therefore it is necessary to recalculate the values for the fixed columns
417
            this.s.dt.on('draw', function () {
418
                _this._addStyles();
419
            });
420
            this.s.dt.on('column-reorder', function () {
421
                _this._addStyles();
422
            });
423
            this.s.dt.on('column-visibility', function () {
424
                _this._addStyles();
425
            });
426
        };
427
        FixedColumns.version = '4.0.0';
428
        FixedColumns.classes = {
429
            fixedLeft: 'dtfc-fixed-left',
430
            fixedRight: 'dtfc-fixed-right',
431
            leftBottomBlocker: 'dtfc-left-bottom-blocker',
432
            leftTopBlocker: 'dtfc-left-top-blocker',
433
            rightBottomBlocker: 'dtfc-right-bottom-blocker',
434
            rightTopBlocker: 'dtfc-right-top-blocker',
435
            tableFixedLeft: 'dtfc-has-left',
436
            tableFixedRight: 'dtfc-has-right'
437
        };
438
        FixedColumns.defaults = {
439
            i18n: {
440
                button: 'FixedColumns'
441
            },
442
            left: 1,
443
            right: 0
444
        };
445
        return FixedColumns;
446
    }());
447

448
    /*! FixedColumns 4.0.0
449
     * 2019-2020 SpryMedia Ltd - datatables.net/license
450
     */
451
    // DataTables extensions common UMD. Note that this allows for AMD, CommonJS
452
    // (with window and jQuery being allowed as parameters to the returned
453
    // function) or just default browser loading.
454
    (function (factory) {
455
        if (typeof define === 'function' && define.amd) {
456
            // AMD
457
            define(['jquery', 'datatables.net'], function ($) {
458
                return factory($, window, document);
459
            });
460
        }
461
        else if (typeof exports === 'object') {
462
            // CommonJS
463
            module.exports = function (root, $) {
464
                if (!root) {
465
                    root = window;
466
                }
467
                if (!$ || !$.fn.dataTable) {
468
                    // eslint-disable-next-line @typescript-eslint/no-var-requires
469
                    $ = require('datatables.net')(root, $).$;
470
                }
471
                return factory($, root, root.document);
472
            };
473
        }
474
        else {
475
            // Browser - assume jQuery has already been loaded
476
            factory(window.jQuery, window, document);
477
        }
478
    }(function ($, window, document) {
479
        setJQuery($);
480
        var dataTable = $.fn.dataTable;
481
        $.fn.dataTable.FixedColumns = FixedColumns;
482
        $.fn.DataTable.FixedColumns = FixedColumns;
483
        var apiRegister = $.fn.dataTable.Api.register;
484
        apiRegister('fixedColumns()', function () {
485
            return this;
486
        });
487
        apiRegister('fixedColumns().left()', function (newVal) {
488
            var ctx = this.context[0];
489
            if (newVal !== undefined) {
490
                ctx._fixedColumns.left(newVal);
491
                return this;
492
            }
493
            else {
494
                return ctx._fixedColumns.left();
495
            }
496
        });
497
        apiRegister('fixedColumns().right()', function (newVal) {
498
            var ctx = this.context[0];
499
            if (newVal !== undefined) {
500
                ctx._fixedColumns.right(newVal);
501
                return this;
502
            }
503
            else {
504
                return ctx._fixedColumns.right();
505
            }
506
        });
507
        $.fn.dataTable.ext.buttons.fixedColumns = {
508
            action: function (e, dt, node, config) {
509
                if ($(node).attr('active')) {
510
                    $(node).removeAttr('active').removeClass('active');
511
                    dt.fixedColumns().left(0);
512
                    dt.fixedColumns().right(0);
513
                }
514
                else {
515
                    $(node).attr('active', true).addClass('active');
516
                    dt.fixedColumns().left(config.config.left);
517
                    dt.fixedColumns().right(config.config.right);
518
                }
519
            },
520
            config: {
521
                left: 1,
522
                right: 0
523
            },
524
            init: function (dt, node, config) {
525
                if (dt.settings()[0]._fixedColumns === undefined) {
526
                    _init(dt.settings(), config);
527
                }
528
                $(node).attr('active', true).addClass('active');
529
                dt.button(node).text(config.text || dt.i18n('buttons.fixedColumns', dt.settings()[0]._fixedColumns.c.i18n.button));
530
            },
531
            text: null
532
        };
533
        function _init(settings, options) {
534
            if (options === void 0) { options = null; }
535
            var api = new dataTable.Api(settings);
536
            var opts = options
537
                ? options
538
                : api.init().fixedColumns || dataTable.defaults.fixedColumns;
539
            var fixedColumns = new FixedColumns(api, opts);
540
            return fixedColumns;
541
        }
542
        // Attach a listener to the document which listens for DataTables initialisation
543
        // events so we can automatically initialise
544
        $(document).on('init.dt.dtfc', function (e, settings) {
545
            if (e.namespace !== 'dt') {
546
                return;
547
            }
548
            if (settings.oInit.fixedColumns ||
549
                dataTable.defaults.fixedColumns) {
550
                if (!settings._fixedColumns) {
551
                    _init(settings, null);
552
                }
553
            }
554
        });
555
    }));
556

557
}());
558

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.