|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
function label(element, value) {
|
|
|
|
if (element.hasAttribute('value')) {
|
|
|
|
if (value !== undefined) {
|
|
|
|
element.setAttribute('value', value)
|
|
|
|
} else {
|
|
|
|
return element.getAttribute('value')
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (value !== undefined) {
|
|
|
|
element.textContent = value
|
|
|
|
} else {
|
|
|
|
return element.textContent
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function countdownDeleteButton(event) {
|
|
|
|
const btn = event.target
|
|
|
|
const countdown = btn.getAttribute('data-countdown')
|
|
|
|
|
|
|
|
if (countdown !== '1') {
|
|
|
|
event.preventDefault()
|
|
|
|
btn.classList.add('__on-countdown')
|
|
|
|
|
|
|
|
const hasCountdown = countdown !== null
|
|
|
|
const newCountdown = hasCountdown ? countdown - 1 : 3
|
|
|
|
|
|
|
|
if (!hasCountdown) {
|
|
|
|
btn.setAttribute('data-label', label(btn))
|
|
|
|
}
|
|
|
|
|
|
|
|
label(btn, newCountdown)
|
|
|
|
btn.setAttribute('data-countdown', newCountdown)
|
|
|
|
setTimeout(countdownDeleteButton, 1000, event)
|
|
|
|
} else {
|
|
|
|
label(btn, btn.getAttribute('data-label'))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
document.querySelectorAll('.delete-btn').forEach(function (btn) {
|
|
|
|
btn.addEventListener('click', countdownDeleteButton)
|
|
|
|
})
|
|
|
|
|
|
|
|
function dynamicTables() {
|
|
|
|
const pageSize = 25
|
|
|
|
|
|
|
|
const range = (x, y) =>
|
|
|
|
x > y ? [] : [x, ...range(x + 1, y)];
|
|
|
|
const visibleRows = page =>
|
|
|
|
range(page * pageSize, (page + 1) * pageSize - 1)
|
|
|
|
const tblRows = tbl =>
|
|
|
|
[...tbl.tBodies[0].rows]
|
|
|
|
|
|
|
|
function toggleVisibilities(tbl, ixsToShow) {
|
|
|
|
tblRows(tbl).forEach(function (row, ix) {
|
|
|
|
row.style.display = ixsToShow.includes(ix) ? 'table-row' : 'none';
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function setCurrPage(tbl, currPageIx) {
|
|
|
|
const elems = document.querySelectorAll('.tbl-toolbar .row-info')
|
|
|
|
const rows = tbl.tBodies[0].rows.length
|
|
|
|
const pages = Math.ceil(rows / pageSize)
|
|
|
|
|
|
|
|
elems.forEach(function(elem) {
|
|
|
|
elem.children[0].innerText = (currPageIx + 1) + ' / ' + pages
|
|
|
|
elem.children[1].innerText = rows
|
|
|
|
})
|
|
|
|
|
|
|
|
tbl.setAttribute('data-page', currPageIx)
|
|
|
|
}
|
|
|
|
|
|
|
|
function changePage(tbl, ix) {
|
|
|
|
toggleVisibilities(tbl, visibleRows(ix))
|
|
|
|
setCurrPage(tbl, ix)
|
|
|
|
}
|
|
|
|
|
|
|
|
function enablePagination(on) {
|
|
|
|
document.querySelectorAll('.pg-btn').forEach(function(btn) {
|
|
|
|
btn.disabled = !on
|
|
|
|
})
|
|
|
|
document.querySelectorAll('.row-info .page').forEach(function(elem) {
|
|
|
|
elem.style.display = on ? 'inline' : 'none'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function prevButton(tbl) {
|
|
|
|
const btn = document.createElement('button')
|
|
|
|
btn.classList.add('prev')
|
|
|
|
btn.classList.add('pg-btn')
|
|
|
|
btn.innerText = 'Prev'
|
|
|
|
btn.addEventListener('click', function () {
|
|
|
|
const page = tbl.getAttribute('data-page') * 1
|
|
|
|
|
|
|
|
if (page > 0) {
|
|
|
|
changePage(tbl, page - 1)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return btn;
|
|
|
|
}
|
|
|
|
|
|
|
|
function nextButton(tbl) {
|
|
|
|
const btn = document.createElement('button')
|
|
|
|
btn.classList.add('next')
|
|
|
|
btn.classList.add('pg-btn')
|
|
|
|
btn.innerText = 'Next'
|
|
|
|
btn.addEventListener('click', function () {
|
|
|
|
const page = tbl.getAttribute('data-page') * 1
|
|
|
|
const lastRowNum = (page + 1) * pageSize
|
|
|
|
|
|
|
|
if (lastRowNum < tblRows(tbl).length) {
|
|
|
|
changePage(tbl, page + 1)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return btn
|
|
|
|
}
|
|
|
|
|
|
|
|
function currPage() {
|
|
|
|
const rowInfo = document.createElement('span')
|
|
|
|
rowInfo.classList.add('row-info')
|
|
|
|
const rows = document.createElement('span')
|
|
|
|
rows.classList.add('rows')
|
|
|
|
rows.innerText = 0
|
|
|
|
const page = document.createElement('span')
|
|
|
|
page.classList.add('page')
|
|
|
|
page.innerText = 1
|
|
|
|
|
|
|
|
rowInfo.insertAdjacentElement('afterbegin', rows)
|
|
|
|
rowInfo.insertAdjacentElement('afterbegin', page)
|
|
|
|
|
|
|
|
return rowInfo
|
|
|
|
}
|
|
|
|
|
|
|
|
function searchBox(tbl) {
|
|
|
|
const input = document.createElement('input')
|
|
|
|
input.classList.add('search')
|
|
|
|
input.type = 'search'
|
|
|
|
input.placeholder = 'search...'
|
|
|
|
|
|
|
|
const contents = tblRows(tbl).map(function(row) {
|
|
|
|
return Array.from(row.cells).reduce(function(carr, cell) {
|
|
|
|
return carr + cell.innerText.toLocaleLowerCase()
|
|
|
|
}, "")
|
|
|
|
})
|
|
|
|
|
|
|
|
input.addEventListener('input', function(evt, a) {
|
|
|
|
const term = evt.target.value.toLocaleLowerCase()
|
|
|
|
if (term.length === 0) {
|
|
|
|
changePage(tbl, 0)
|
|
|
|
enablePagination(true)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
enablePagination(false)
|
|
|
|
|
|
|
|
const ixs = []
|
|
|
|
contents.forEach(function(rowContent, ix) {
|
|
|
|
if (rowContent.match(term)) {
|
|
|
|
ixs.push(ix)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
document.querySelectorAll('.row-info .rows').forEach(function(elem) {
|
|
|
|
elem.innerText = ixs.length
|
|
|
|
})
|
|
|
|
toggleVisibilities(tbl, ixs)
|
|
|
|
})
|
|
|
|
return input
|
|
|
|
}
|
|
|
|
|
|
|
|
function addToolbar(tbl) {
|
|
|
|
const toolbarTop = document.createElement('section')
|
|
|
|
toolbarTop.classList.add('tbl-toolbar')
|
|
|
|
toolbarTop.insertAdjacentElement('beforeend', currPage())
|
|
|
|
toolbarTop.insertAdjacentElement('beforeend', searchBox(tbl))
|
|
|
|
toolbarTop.insertAdjacentElement('beforeend', prevButton(tbl))
|
|
|
|
toolbarTop.insertAdjacentElement('beforeend', nextButton(tbl))
|
|
|
|
|
|
|
|
const toolbarBottom = document.createElement('section')
|
|
|
|
toolbarBottom.classList.add('tbl-toolbar')
|
|
|
|
toolbarBottom.insertAdjacentElement('beforeend', currPage())
|
|
|
|
toolbarBottom.insertAdjacentElement('beforeend', prevButton(tbl))
|
|
|
|
toolbarBottom.insertAdjacentElement('beforeend', nextButton(tbl))
|
|
|
|
|
|
|
|
tbl.insertAdjacentElement('afterend', toolbarBottom)
|
|
|
|
tbl.insertAdjacentElement('beforebegin', toolbarTop)
|
|
|
|
}
|
|
|
|
|
|
|
|
document.querySelectorAll('table').forEach(function (tbl) {
|
|
|
|
toggleVisibilities(tbl, visibleRows(0))
|
|
|
|
tbl.setAttribute('data-page', 0)
|
|
|
|
addToolbar(tbl)
|
|
|
|
setCurrPage(tbl, 0)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
dynamicTables()
|
|
|
|
})
|