wanijo/resources/public/js/scripts.js

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()
})