fwtoolkit 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/content_menu.js

@@ -0,0 +1,475 @@
+const menuTemplate = ({
+    id,
+    classes,
+    height,
+    width,
+    zIndex,
+    menu,
+    scroll,
+    page
+}) =>
+    `<div tabindex="-1" role="incontent_menu"
+        class="ui-content-menu ui-corner-all ui-widget ui-widget-content ui-front"
+        ${id ? `aria-describedby="${id}"` : ""} style="z-index: ${zIndex};">
+    <div ${id ? `id="${id}"` : ""} class="ui-content-menu-content ui-widget-content${classes ? ` ${classes}` : ""}${scroll ? " ui-scrollable" : ""}" style="width: ${width}; height: ${height};">
+    <div>
+        <ul class="content-menu-list">
+        ${menu.content
+            .map((menuItem, index) => {
+                switch (menuItem.type) {
+                    case "header":
+                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                            typeof menuItem.title === "function"
+                                ? menuItem.title(page)
+                                : menuItem.title
+                        }</span></li>`
+                    case "separator":
+                        return '<li><hr class="content-menu-item-divider"/></li>'
+                    default:
+                        return `<li tabindex="0" data-index="${index}" class="content-menu-item${
+                            menuItem.disabled && menuItem.disabled(page)
+                                ? " disabled"
+                                : menuItem.selected
+                                  ? " selected"
+                                  : ""
+                        }" title='${menuItem.tooltip}'>
+                        ${
+                            typeof menuItem.title === "function"
+                                ? menuItem.title(page)
+                                : menuItem.title
+                        } ${
+                            menuItem.icon
+                                ? `<span class="content-menu-item-icon"><i class="fa fa-${menuItem.icon}"></i></span>`
+                                : ""
+                        }
+                        </li>`
+                }
+            })
+            .join("")}
+        </ul>
+    </div>
+    </div>
+</div>
+<div class="ui-widget-overlay ui-front" style="z-index: ${zIndex - 1}"></div>`
+
+export class ContentMenu {
+    constructor({
+        id = false,
+        page = false,
+        classes = false,
+        menu = {content: []},
+        height = false,
+        width = false,
+        onClose = false,
+        scroll = false,
+        dialogEl = false,
+        backdropEl = false,
+        menuPos = false
+    }) {
+        this.id = id
+        this.page = page
+        this.classes = classes
+        this.menu = menu
+        this.height = height ? `${height}px` : "auto"
+        this.width = width ? `${width}px` : "auto"
+        this.onClose = onClose
+        this.scroll = scroll
+        this.dialogEl = dialogEl
+        this.backdropEl = backdropEl
+        this.menuPos = menuPos
+
+        this.focusedIndex = 0
+        this.previouslyFocusedElement = null
+    }
+
+    open() {
+        if (this.dialogEl) {
+            return
+        }
+
+        this.previouslyFocusedElement = document.activeElement
+
+        document.body.insertAdjacentHTML(
+            "beforeend",
+            menuTemplate({
+                id: this.id,
+                classes: this.classes,
+                height: this.height,
+                width: this.width,
+                zIndex: this.getHighestDialogZIndex() + 2,
+                menu: this.menu,
+                scroll: this.scroll,
+                page: this.page
+            })
+        )
+        this.backdropEl = document.body.lastElementChild
+        this.dialogEl = this.backdropEl.previousElementSibling
+        if (this.menuPos?.X && this.menuPos?.Y) {
+            this.positionDialog()
+        } else {
+            this.centerDialog()
+        }
+        this.checkAndAddColumns()
+        this.bind()
+        this.focusFirstMenuItem()
+    }
+
+    renderColumnsHtml(columns) {
+        const itemsPerColumn = Math.ceil(this.menu.content.length / columns)
+        let html = '<div class="content-menu-columns">'
+        for (let col = 0; col < columns; col++) {
+            const start = col * itemsPerColumn
+            const end = Math.min(
+                start + itemsPerColumn,
+                this.menu.content.length
+            )
+            if (start >= this.menu.content.length) {
+                break
+            }
+            html += '<ul class="content-menu-list">'
+            for (let i = start; i < end; i++) {
+                const menuItem = this.menu.content[i]
+                switch (menuItem.type) {
+                    case "header":
+                        html += `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                            typeof menuItem.title === "function"
+                                ? menuItem.title(this.page)
+                                : menuItem.title
+                        }</span></li>`
+                        break
+                    case "separator":
+                        html +=
+                            '<li><hr class="content-menu-item-divider"/></li>'
+                        break
+                    default:
+                        html += `<li tabindex="0" data-index="${i}" class="content-menu-item${
+                            menuItem.disabled && menuItem.disabled(this.page)
+                                ? " disabled"
+                                : menuItem.selected
+                                  ? " selected"
+                                  : ""
+                        }" title='${menuItem.tooltip}'>
+                        ${
+                            typeof menuItem.title === "function"
+                                ? menuItem.title(this.page)
+                                : menuItem.title
+                        } ${
+                            menuItem.icon
+                                ? `<span class="content-menu-item-icon"><i class="fa fa-${menuItem.icon}"></i></span>`
+                                : ""
+                        }
+                        </li>`
+                }
+            }
+            html += "</ul>"
+        }
+        html += "</div>"
+        return html
+    }
+
+    checkAndAddColumns() {
+        const dialogRect = this.dialogEl.getBoundingClientRect()
+        const viewportHeight = window.innerHeight
+        const viewportWidth = window.innerWidth
+        const maxHeight = viewportHeight * 0.9
+        const maxWidth = viewportWidth * 0.95
+
+        if (dialogRect.height >= maxHeight) {
+            const contentEl = this.dialogEl.querySelector(
+                ".ui-content-menu-content"
+            )
+            const contentDiv = contentEl.querySelector(":scope > div")
+            let columns = 2
+            while (columns <= 6) {
+                contentDiv.innerHTML = this.renderColumnsHtml(columns)
+                const columnsDiv = contentDiv.querySelector(
+                    ".content-menu-columns"
+                )
+                if (columnsDiv) {
+                    const naturalWidth = columnsDiv.scrollWidth + 20
+                    contentEl.style.width = `${naturalWidth}px`
+                }
+                const newRect = this.dialogEl.getBoundingClientRect()
+                if (newRect.height < maxHeight && newRect.width < maxWidth) {
+                    if (this.menuPos?.X && this.menuPos?.Y) {
+                        this.positionDialog()
+                    } else {
+                        this.centerDialog()
+                    }
+                    return
+                }
+                columns++
+            }
+            // Fallback: restore single column with scrolling
+            contentDiv.innerHTML = `<ul class="content-menu-list">${this.renderSingleColumnHtml()}</ul>`
+            contentEl.style.width = this.width
+            this.dialogEl
+                .querySelector(".ui-content-menu-content")
+                .classList.add("ui-scrollable")
+            if (this.menuPos?.X && this.menuPos?.Y) {
+                this.positionDialog()
+            } else {
+                this.centerDialog()
+            }
+        }
+    }
+
+    renderSingleColumnHtml() {
+        return this.menu.content
+            .map((menuItem, index) => {
+                switch (menuItem.type) {
+                    case "header":
+                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                            typeof menuItem.title === "function"
+                                ? menuItem.title(this.page)
+                                : menuItem.title
+                        }</span></li>`
+                    case "separator":
+                        return '<li><hr class="content-menu-item-divider"/></li>'
+                    default:
+                        return `<li tabindex="0" data-index="${index}" class="content-menu-item${
+                            menuItem.disabled && menuItem.disabled(this.page)
+                                ? " disabled"
+                                : menuItem.selected
+                                  ? " selected"
+                                  : ""
+                        }" title='${menuItem.tooltip}'>
+                    ${
+                        typeof menuItem.title === "function"
+                            ? menuItem.title(this.page)
+                            : menuItem.title
+                    } ${
+                        menuItem.icon
+                            ? `<span class="content-menu-item-icon"><i class="fa fa-${menuItem.icon}"></i></span>`
+                            : ""
+                    }
+                    </li>`
+                }
+            })
+            .join("")
+    }
+
+    centerDialog() {
+        const totalWidth = window.innerWidth,
+            totalHeight = window.innerHeight,
+            dialogRect = this.dialogEl.getBoundingClientRect(),
+            dialogWidth = dialogRect.width + 10,
+            dialogHeight = dialogRect.height + 10,
+            scrollTopOffset = window.pageYOffset,
+            scrollLeftOffset = window.pageXOffset
+        this.dialogEl.style.top = `${(totalHeight - dialogHeight) / 2 + scrollTopOffset}px`
+        this.dialogEl.style.left = `${(totalWidth - dialogWidth) / 2 + scrollLeftOffset}px`
+    }
+
+    positionDialog() {
+        const dialogHeight = this.dialogEl.getBoundingClientRect().height + 10,
+            dialogWidth = this.dialogEl.getBoundingClientRect().width + 10,
+            scrollTopOffset = window.pageYOffset,
+            clientHeight = window.document.documentElement.clientHeight,
+            clientWidth = window.document.documentElement.clientWidth
+
+        // We try to ensure that the menu is seen in the browser at the preferred location.
+        // Adjustments are made in case it doesn't fit.
+        let top = this.menuPos.Y,
+            left = this.menuPos.X
+
+        if (top + dialogHeight > scrollTopOffset + clientHeight) {
+            top -= top + dialogHeight - (scrollTopOffset + clientHeight)
+        }
+
+        if (top < scrollTopOffset) {
+            top = scrollTopOffset + 10
+        }
+
+        if (left + dialogWidth > clientWidth) {
+            left -= left + dialogWidth - clientWidth
+        }
+
+        this.dialogEl.style.top = `${top}px`
+        this.dialogEl.style.left = `${left}px`
+    }
+
+    bind() {
+        this.backdropEl.addEventListener("click", () => this.close())
+        this.dialogEl.addEventListener("click", event => this.onclick(event))
+        this.dialogEl.addEventListener("keydown", event =>
+            this.onKeyDown(event)
+        )
+        this.dialogEl.focus()
+    }
+
+    getHighestDialogZIndex() {
+        let zIndex = 100
+        document
+            .querySelectorAll("div.ui-content-menu")
+            .forEach(
+                dialogEl => (zIndex = Math.max(zIndex, dialogEl.style.zIndex))
+            )
+        document
+            .querySelectorAll("div.ui-dialog")
+            .forEach(
+                dialogEl => (zIndex = Math.max(zIndex, dialogEl.style.zIndex))
+            )
+        return zIndex
+    }
+
+    close() {
+        if (!this.dialogEl || !this.dialogEl.parentElement) {
+            return
+        }
+        this.dialogEl.parentElement.removeChild(this.dialogEl)
+        this.backdropEl.parentElement.removeChild(this.backdropEl)
+
+        // Restore focus to the previously focused element
+        if (
+            this.previouslyFocusedElement &&
+            this.previouslyFocusedElement.focus
+        ) {
+            this.previouslyFocusedElement.focus()
+        }
+
+        if (this.onClose) {
+            this.onClose()
+        }
+    }
+
+    onclick(event) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        const target = event.target.closest("li.content-menu-item")
+        if (target) {
+            const menuNumber = target.dataset.index
+            const menuItem = this.menu.content[menuNumber]
+            if (menuItem.disabled?.(this.page)) {
+                return
+            }
+            menuItem.action(this.page)
+            this.close()
+        }
+    }
+
+    onKeyDown(event) {
+        const {key} = event
+        const menuItems = this.dialogEl.querySelectorAll(
+            "li.content-menu-item:not(.disabled)"
+        )
+
+        const columnsDiv = this.dialogEl.querySelector(".content-menu-columns")
+        const totalColumns = columnsDiv
+            ? columnsDiv.querySelectorAll(".content-menu-list").length
+            : 1
+        const itemsPerColumn =
+            totalColumns > 1
+                ? Math.ceil(menuItems.length / totalColumns)
+                : menuItems.length
+
+        switch (key) {
+            case "Escape":
+                this.close()
+                break
+            case "ArrowUp":
+                event.preventDefault()
+                this.focusedIndex =
+                    (this.focusedIndex - 1 + menuItems.length) %
+                    menuItems.length
+                this.focusMenuItem(this.focusedIndex)
+                break
+            case "ArrowDown":
+                event.preventDefault()
+                this.focusedIndex = (this.focusedIndex + 1) % menuItems.length
+                this.focusMenuItem(this.focusedIndex)
+                break
+            case "ArrowLeft":
+                if (totalColumns <= 1) {
+                    break
+                }
+                event.preventDefault()
+                {
+                    const currentCol = Math.floor(
+                        this.focusedIndex / itemsPerColumn
+                    )
+                    const currentRow = this.focusedIndex % itemsPerColumn
+                    if (currentCol > 0) {
+                        let newIndex =
+                            (currentCol - 1) * itemsPerColumn + currentRow
+                        const prevColEnd = Math.min(
+                            currentCol * itemsPerColumn,
+                            menuItems.length
+                        )
+                        if (newIndex >= prevColEnd) {
+                            newIndex = prevColEnd - 1
+                        }
+                        this.focusedIndex = newIndex
+                        this.focusMenuItem(this.focusedIndex)
+                    }
+                }
+                break
+            case "ArrowRight":
+                if (totalColumns <= 1) {
+                    break
+                }
+                event.preventDefault()
+                {
+                    const currentCol = Math.floor(
+                        this.focusedIndex / itemsPerColumn
+                    )
+                    const currentRow = this.focusedIndex % itemsPerColumn
+                    if (currentCol < totalColumns - 1) {
+                        let newIndex =
+                            (currentCol + 1) * itemsPerColumn + currentRow
+                        const nextColEnd = Math.min(
+                            (currentCol + 2) * itemsPerColumn,
+                            menuItems.length
+                        )
+                        if (newIndex >= nextColEnd) {
+                            newIndex = nextColEnd - 1
+                        }
+                        this.focusedIndex = newIndex
+                        this.focusMenuItem(this.focusedIndex)
+                    }
+                }
+                break
+            case "Tab":
+                event.preventDefault()
+                if (event.shiftKey) {
+                    this.focusedIndex =
+                        (this.focusedIndex - 1 + menuItems.length) %
+                        menuItems.length
+                } else {
+                    this.focusedIndex =
+                        (this.focusedIndex + 1) % menuItems.length
+                }
+                this.focusMenuItem(this.focusedIndex)
+                break
+            case "Enter":
+            case " ": {
+                event.preventDefault()
+                const menuItem = this.menu.content[this.focusedIndex]
+                if (!menuItem.disabled?.(this.page)) {
+                    menuItem.action(this.page)
+                    this.close()
+                }
+                break
+            }
+        }
+    }
+
+    focusFirstMenuItem() {
+        const menuItems = this.dialogEl.querySelectorAll(
+            "li.content-menu-item:not(.disabled)"
+        )
+        if (menuItems.length > 0) {
+            this.focusedIndex = 0
+            this.focusMenuItem(this.focusedIndex)
+        }
+    }
+
+    focusMenuItem(index) {
+        const menuItems = this.dialogEl.querySelectorAll(
+            "li.content-menu-item:not(.disabled)"
+        )
+        if (menuItems[index]) {
+            menuItems[index].focus()
+        }
+    }
+}

package/src/datatable_bulk.js

@@ -0,0 +1,208 @@
+import {keyName} from "w3c-keyname"
+
+import {whenReady} from "./basic.js"
+import {ContentMenu} from "./content_menu.js"
+
+let bulkId = 0
+
+export class DatatableBulk {
+    constructor(page, model, checkboxColumn) {
+        this.page = page
+        this.model = model
+        this.checkboxColumn = checkboxColumn
+
+        this.id = `dt-bulk-${++bulkId}`
+    }
+
+    init(table) {
+        this.table = table
+        whenReady().then(() => this.bindEvents())
+    }
+
+    update() {
+        this.model.content = this.model.content.sort(
+            (a, b) => a.order - b.order
+        )
+    }
+
+    bindEvents() {
+        // Store the bound functions as instance variables so we can remove them later
+        this.boundOnClick = this.onClick.bind(this)
+        this.boundOnTableCheckChange = this.onTableCheckChange.bind(this)
+        this.boundOnKeyDown = this.onKeyDown.bind(this)
+
+        this.page.dom.addEventListener("click", this.boundOnClick)
+        this.table.dom.addEventListener("change", this.boundOnTableCheckChange)
+        this.table.dom.addEventListener("keydown", this.boundOnKeyDown)
+        this.onTableCheckChange()
+    }
+
+    // The new destroy() method removes all event listeners that were added and cleans up DOM elements.
+    destroy() {
+        if (this.page && this.page.dom && this.boundOnClick) {
+            this.page.dom.removeEventListener("click", this.boundOnClick)
+        }
+        if (this.table && this.table.dom) {
+            if (this.boundOnTableCheckChange) {
+                this.table.dom.removeEventListener(
+                    "change",
+                    this.boundOnTableCheckChange
+                )
+            }
+            if (this.boundOnKeyDown) {
+                this.table.dom.removeEventListener(
+                    "keydown",
+                    this.boundOnKeyDown
+                )
+            }
+        }
+
+        // Remove the bulk element from the DOM if it exists
+        const el = document.getElementById(this.id)
+        if (el && el.parentNode) {
+            el.parentNode.removeChild(el)
+        }
+
+        // Clear any references to help garbage collection
+        this.page = null
+        this.table = null
+        this.model = null
+    }
+
+    onKeyDown(event) {
+        const key = keyName(event)
+        const el = this.page.dom.querySelector(`#${this.id}`)
+
+        if (!el) {
+            return
+        }
+
+        if (key === "Enter" && this.page.getSelected().length > 0) {
+            // Open the content menu when Enter is pressed and at least one row is selected
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            event.stopPropagation()
+
+            const contentMenu = new ContentMenu({
+                menu: this.model,
+                width: 280,
+                page: this.page,
+                menuPos: {
+                    X: Number.parseInt(el.getBoundingClientRect().left),
+                    Y: Number.parseInt(el.getBoundingClientRect().bottom)
+                }
+            })
+            contentMenu.open()
+        } else if (
+            key === " " &&
+            event.target === el.querySelector("input[type=checkbox]")
+        ) {
+            // Toggle "Select All" when Space is pressed on the checkbox
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            event.stopPropagation()
+
+            const isChecked = this.isAllChecked()
+            this.toggleSelectAll(!isChecked)
+        } else if ((event.ctrlKey || event.metaKey) && key === "a") {
+            // Select all when Ctrl+A is pressed
+            const isChecked = this.isAllChecked()
+            this.toggleSelectAll(!isChecked)
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            event.stopPropagation()
+        }
+    }
+
+    toggleSelectAll(checked) {
+        // Update the DataTable instance
+        if (this.table) {
+            this.table.data.data.forEach(row => {
+                if (row.cells[this.checkboxColumn]) {
+                    row.cells[this.checkboxColumn].data = checked
+                    row.cells[this.checkboxColumn].text = String(checked)
+                }
+            })
+            this.table.update()
+        }
+
+        this.onTableCheckChange()
+    }
+
+    onTableCheckChange() {
+        const el = this.page.dom.querySelector(`#${this.id}`)
+        if (!el) {
+            return
+        }
+
+        const allChecked = this.isAllChecked()
+        el.querySelector("input[type=checkbox]").checked = allChecked
+    }
+
+    isAllChecked() {
+        const checkboxes = Array.from(
+            this.table.dom.querySelectorAll("input.entry-select[type=checkbox]")
+        )
+        const unchecked = checkboxes.filter(box => !box.checked)
+        return !unchecked.length && checkboxes.length
+    }
+
+    onClick(event) {
+        const target = event.target
+        if (target.matches(`#${this.id} *`)) {
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            event.stopPropagation()
+
+            if (target.matches(".dt-bulk-dropdown, .dt-bulk-dropdown *")) {
+                // Dropdown
+                const el = document.querySelector(`#${this.id}`)
+                if (el) {
+                    const contentMenu = new ContentMenu({
+                        menu: this.model,
+                        width: 280,
+                        page: this.page,
+                        menuPos: {
+                            X: Number.parseInt(event.pageX),
+                            Y: Number.parseInt(event.pageY)
+                        }
+                    })
+                    contentMenu.open()
+                }
+            } else if (
+                target.matches(".fw-check + label, .fw-check + label *")
+            ) {
+                // Click on bulk checkbox
+                const isChecked = this.isAllChecked()
+                this.toggleSelectAll(!isChecked)
+                target
+                    .closest("div.datatable-wrapper")
+                    .querySelector("input[type=checkbox]").checked = !isChecked
+                this.onTableCheckChange()
+            }
+        } else if (target.matches(".fw-data-table .entry-select + label")) {
+            // The browser will try to scroll the checkbox into view and that will break the page layout.
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            event.stopPropagation()
+            const tr = target.closest("tr")
+            const index = parseInt(tr.dataset.index)
+            const row = this.table.data.data[index]
+            const cell = row.cells[this.checkboxColumn]
+            cell.data = !cell.data
+            cell.text = String(cell.data)
+            this.table.update()
+            this.onTableCheckChange()
+        }
+    }
+
+    getHTML() {
+        return `<div id="${this.id}" class="dt-bulk" role="group" aria-label="Bulk actions">
+                        <input type="checkbox" id="${this.id}_check" class="fw-check" aria-label="Select all">
+                        <label for="${this.id}_check"></label>
+                        <span class="dt-bulk-dropdown" tabindex="0" role="button" aria-label="Open bulk actions menu">
+                            <i class="fa fa-caret-down"></i>
+                        </span>
+                    </div>`
+    }
+}