101 lines
3.1 KiB
Plaintext
101 lines
3.1 KiB
Plaintext
(function collonadeClosure() {
|
|
'use strict';
|
|
|
|
document.addEventListener('setup', function DOMContentLoaded(e) {
|
|
|
|
console.log('dbtable', e);
|
|
|
|
if (e.detail.module && e.detail.module !== 'dbtable')
|
|
return;
|
|
|
|
function setupAsync(wrapper) {
|
|
|
|
var table = wrapper.querySelector('#' + #{String $ dbtIdent});
|
|
if (!table)
|
|
return;
|
|
|
|
var ths = Array.from(table.querySelectorAll('th.sortable'));
|
|
var pagination = wrapper.querySelector('#' + #{String $ dbtIdent} + '-pagination');
|
|
|
|
ths.forEach(function(th) {
|
|
th.addEventListener('click', clickHandler);
|
|
});
|
|
|
|
if (pagination) {
|
|
Array.from(pagination.querySelectorAll('.pagination-link'))
|
|
.forEach(function(p) {
|
|
p.addEventListener('click', clickHandler);
|
|
});
|
|
}
|
|
|
|
function clickHandler(event) {
|
|
event.preventDefault();
|
|
var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this));
|
|
updateTableFrom(url);
|
|
|
|
|
|
ths.forEach(function(th) {
|
|
// th.removeEventListener('click', clickHandler);
|
|
console.log('removed handler from', th);
|
|
});
|
|
}
|
|
|
|
function getClickDestination(el) {
|
|
console.log(el);
|
|
if (!el.querySelector('a')) {
|
|
return false;
|
|
}
|
|
return el.querySelector('a').getAttribute('href');
|
|
}
|
|
|
|
// fetches new sorted table from url with params and replaces contents of current table
|
|
function updateTableFrom(url) {
|
|
fetch(url, {
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
'Accept': 'text/html',
|
|
#{String (toPathPiece HeaderDBTableShortcircuit)}: #{String dbtIdent}
|
|
}
|
|
}).then(function(response) {
|
|
if (!response.ok) {
|
|
throw ('Looks like there was a problem fetching ' + url.toString() + '. Status Code: ' + response.status);
|
|
}
|
|
return response.text();
|
|
}).then(function(data) {
|
|
// remove listeners
|
|
ths.forEach(function(th) {
|
|
th.removeEventListener('click', clickHandler);
|
|
});
|
|
|
|
// replace contents of table body
|
|
wrapper.innerHTML = data;
|
|
|
|
// set up async functionality again
|
|
wrapper.classList.remove("js-initialized");
|
|
document.dispatchEvent(new CustomEvent('setup', {
|
|
detail: { scope: wrapper },
|
|
bubbles: true,
|
|
cancelable: true
|
|
}));
|
|
// table.querySelector('tbody').innerHTML = data;
|
|
}).catch(function(err) {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
wrapper.classList.add("js-initialized");
|
|
}
|
|
|
|
var selector = '#' + #{String $ dbtIdent} + '-table-wrapper:not(.js-initialized)';
|
|
var wrapperEl = e.detail.scope.querySelector(selector);
|
|
if (wrapperEl)
|
|
setupAsync(wrapperEl);
|
|
else if (e.detail.scope.matches(selector))
|
|
setupAsync(e.detail.scope);
|
|
});
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'dbtable' }, bubbles: true, cancelable: true }));
|
|
});
|