Projet

Général

Profil

0001-js-make-table-widgets-reponsive-41734.patch

Thomas Jund, 08 octobre 2020 14:31

Télécharger (3,28 ko)

Voir les différences:

Subject: [PATCH] js: make table widgets reponsive (#41734)

 wcs/qommon/static/js/qommon.forms.js | 70 ++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
wcs/qommon/static/js/qommon.forms.js
75 75
  return weight;
76 76
}
77 77

  
78
/* Make table widget responsive
79
 *    new Responsive_table_widget(table, {
80
 *      col_headers_selector: 'thead th',
81
 *      row_headers_selector: 'tbody th'
82
 *    })
83
 */
84
const Responsive_table_widget = function (table, options) {
85
    'use strict';
86
    const defaults = {
87
        col_headers_selector: 'thead th',
88
        row_headers_selector: "tbody th"
89
    };
90
    this.options = $.extend({}, defaults, options);
91
    this.table = table;
92
    this.col_headers = table.querySelectorAll(this.options.col_headers_selector);
93
    this.col_headers_text = [];
94
    this.row_headers = table.querySelectorAll(this.options.row_headers_selector);
95
    this.body_rows = table.querySelectorAll('tbody tr');
96
    this.parent = table.parentElement;
97
    this.init();
98
};
99
Responsive_table_widget.prototype.storeHeaders = function () {
100
    'use strict';
101
    let _self = this;
102
    $(this.col_headers).each(function (idx, header) {
103
        _self.col_headers_text.push(header.innerText);
104
    });
105
    $(this.body_rows).each(function (idx, tr) {
106
        $(tr.querySelectorAll('td')).each( function (id, td) {
107
            td.dataset.colHeader = _self.col_headers_text[id];
108
        });
109
    });
110
};
111
Responsive_table_widget.prototype.fit = function () {
112
    'use strict';
113
    this.table.style.width = "auto";
114
    if (this.parent.clientWidth < this.table.clientWidth)
115
        this.table.style.width = "100%";
116
};
117
Responsive_table_widget.prototype.init = function () {
118
    'use strict';
119
    let _self = this;
120
    this.table.classList.add('responsive-tableWidget');
121
    $(this.col_headers).addClass('responsive-tableWidget--col-header');
122
    $(this.row_headers).addClass('responsive-tableWidget--row-header');
123
    this.storeHeaders();
124
    this.fit();
125
    // debounce resize event
126
    let callback;
127
    window.addEventListener("resize", function () {
128
        clearTimeout(callback);
129
        callback = setTimeout( function () {
130
            _self.fit.call(_self)
131
        }, 200);
132
    });
133
};
134

  
78 135
$(function() {
79 136
  var autosave_timeout_id = null;
80 137
  if ($('form[data-has-draft]').length == 1) {
......
372 429
      $(elem).select2('data', {id: $(elem).data('value'), text: $(elem).data('initial-display-value')});
373 430
    }
374 431
  });
432

  
433
  /* Make table widgets responsive */
434
  $('.TableWidget, .SingleSelectTableWidget').each(function (i, elem) {
435
    const table = elem.querySelector('table');
436
    new Responsive_table_widget(table);
437
  });
438
  $('.TableListRowsWidget').each(function (i, elem) {
439
    const table = elem.querySelector('table');
440
    new Responsive_table_widget(table, {
441
      col_headers_selector: 'tbody tr:first-child th',
442
      row_headers_selector: null
443
    });
444
  });
375 445
});
376
-