Produits Entr'ouvert » Intégrations graphiques Publik

/* Make table widget responsive

 *    new Responsive_table_widget(table)

 */

const Responsive_table_widget = function (table) {

    'use strict';

    this.table = table;

    this.col_headers = table.querySelectorAll('thead th');

    this.col_headers_text = [];

    this.body_rows = table.querySelectorAll('tbody tr');

    this.parent = table.parentElement;

    this.init();

};

Responsive_table_widget.prototype.storeHeaders = function () {

    'use strict';

    let _self = this;

    $(this.col_headers).each(function (idx, header) {

        _self.col_headers_text.push(header.innerText);

    });

    $(this.body_rows).each(function (idx, tr) {

        $(tr.querySelectorAll('td')).each( function (id, td) {

            td.dataset.colHeader = _self.col_headers_text[id];

        });

    });

};

Responsive_table_widget.prototype.fit = function () {

    'use strict';

    this.table.style.width = "auto";

    if (this.parent.clientWidth < this.table.clientWidth)

        this.table.style.width = "100%";

};

Responsive_table_widget.prototype.init = function () {

    'use strict';

    let _self = this;

    this.table.classList.add('responsive-tableWidget');

    this.storeHeaders();

    this.fit();

    // debounce resize event

    let callback;

    window.addEventListener("resize", function () {

        clearTimeout(callback);

        callback = setTimeout( function () {

            _self.fit.call(_self)

        }, 200);

    });

};

  /* Make table widgets responsive */

  $('.TableWidget, .SingleSelectTableWidget, .TableListRowsWidget').each(function (i, elem) {

    const table = elem.querySelector('table');

    new Responsive_table_widget(table);

  });