entrouvert/wcs
entrouvert
/
wcs
14
1
Fork 0
Code Issues Pull Requests 45 Releases Activity

js: make table widgets reponsive (#41734)

This commit is contained in:
Thomas Jund 2020-10-08 14:13:01 +02:00
parent 65cdabd1f0
commit 8407016c97
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
wcs/qommon/static/js/qommon.forms.js
View File

@ -75,6 +75,52 @@ String.prototype.similarity = function(string) {
return weight;
}
/* 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 (i, header) {
_self.col_headers_text.push(header.innerText);
});
$(this.body_rows).each(function (i, tr) {
$(tr.querySelectorAll('td')).each(function (i, td) {
td.dataset.colHeader = _self.col_headers_text[i];
});
});
};
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);
});
};
$(function() {
var autosave_timeout_id = null;
if ($('form[data-has-draft]').length == 1) {
@ -372,4 +418,10 @@ $(function() {
$(elem).select2('data', {id: $(elem).data('value'), text: $(elem).data('initial-display-value')});
}
});
/* Make table widgets responsive */
$('.TableWidget, .SingleSelectTableWidget, .TableListRowsWidget').each(function (i, elem) {
const table = elem.querySelector('table');
new Responsive_table_widget(table);
});
});