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)

        function toggleVisibilities(tbl, ixsToShow) {
            const rows = [...tbl.tBodies[0].rows]
            rows.forEach(function (row, ix) {
                row.style.display = ixsToShow.includes(ix) ? 'table-row' : 'none';
            })
        }

        function setCurrPage(tbl, currPageIx) {
            const elems = document.querySelectorAll('.tbl-toolbar .curr-page')
            const rows = tbl.tBodies[0].rows.length
            const pages = Math.ceil(rows / pageSize)

            elems.forEach(function(elem) {
                elem.innerText = (currPageIx + 1) + ' / ' + pages + ' (' + rows + ' rows)'
            })
        }

        function prevButton(tbl) {
            const btn = document.createElement('button')
            btn.classList.add('prev')
            btn.innerText = 'Prev'
            btn.addEventListener('click', function () {
                const page = tbl.getAttribute('data-page') * 1

                if (page > 0) {
                    const newPageIx = page - 1
                    tbl.setAttribute('data-page', newPageIx)
                    toggleVisibilities(tbl, visibleRows(newPageIx))
                    setCurrPage(tbl, newPageIx)
                }
            })
            return btn;
        }

        function nextButton(tbl) {
            const btn = document.createElement('button')
            btn.classList.add('next')
            btn.innerText = 'Next'
            btn.addEventListener('click', function () {
                const page = tbl.getAttribute('data-page') * 1
                const lastRowNum = (page + 1) * pageSize

                if (lastRowNum < tbl.tBodies[0].rows.length) {
                    const newPageIx = page + 1
                    tbl.setAttribute('data-page', newPageIx)
                    toggleVisibilities(tbl, visibleRows(newPageIx))
                    setCurrPage(tbl, newPageIx)
                }
            })
            return btn
        }

        function currPage() {
            const span = document.createElement('span')
            span.classList.add('curr-page')
            span.innerText = 1
            return span
        }

        function addToolbar(tbl) {
            const toolbarTop = document.createElement('section')
            toolbarTop.classList.add('tbl-toolbar')
            toolbarTop.insertAdjacentElement('beforeend', currPage())
            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', toolbarTop)
            tbl.insertAdjacentElement('beforebegin', toolbarBottom)
        }

        document.querySelectorAll('table').forEach(function (tbl) {
            toggleVisibilities(tbl, visibleRows(0))
            tbl.setAttribute('data-page', 0)
            addToolbar(tbl)
            setCurrPage(tbl, 0)
        })
    }

    dynamicTables()
})