fwtoolkit 0.1.0-alpha.6 → 0.1.0-beta.1

package/src/content_menu.ts

@@ -1,4 +1,59 @@
-// @ts-nocheck
+export type ContentMenuItemTitle = string | ((page: unknown) => string)
+
+export interface ContentMenuBaseItem {
+    type?: "header" | "separator" | "action"
+    title?: ContentMenuItemTitle
+    tooltip?: string
+    action?: (page: unknown) => void
+    disabled?: (page: unknown) => boolean
+    selected?: boolean
+    order?: number
+    icon?: string
+}
+
+export interface ContentMenuHeaderItem extends ContentMenuBaseItem {
+    type: "header"
+    title: ContentMenuItemTitle
+}
+
+export interface ContentMenuSeparatorItem extends ContentMenuBaseItem {
+    type: "separator"
+}
+
+export interface ContentMenuActionItem extends ContentMenuBaseItem {
+    type?: "action"
+    title: ContentMenuItemTitle
+    action: (page: unknown) => void
+}
+
+export type ContentMenuItem =
+    | ContentMenuHeaderItem
+    | ContentMenuSeparatorItem
+    | ContentMenuActionItem
+
+export interface ContentMenuInit {
+    content: ContentMenuItem[]
+}
+
+export interface ContentMenuPosition {
+    X: number
+    Y: number
+}
+
+export interface ContentMenuOptions {
+    id?: string | false
+    page?: unknown | false
+    classes?: string | false
+    menu?: ContentMenuInit
+    height?: number | false
+    width?: number | false
+    onClose?: (() => void) | false
+    scroll?: boolean | false
+    dialogEl?: HTMLElement | false
+    backdropEl?: HTMLElement | false
+    menuPos?: ContentMenuPosition | false
+}
+
 const menuTemplate = ({
     id,
     classes,
@@ -8,6 +63,15 @@ const menuTemplate = ({
     menu,
     scroll,
     page
+}: {
+    id: string | false
+    classes: string | false
+    height: string
+    width: string
+    zIndex: number
+    menu: ContentMenuInit
+    scroll: boolean | false
+    page: unknown | false
 }) =>
     `<div tabindex="-1" role="incontent_menu"
         class="ui-content-menu ui-corner-all ui-widget ui-widget-content ui-front"
@@ -19,7 +83,7 @@ const menuTemplate = ({
             .map((menuItem, index) => {
                 switch (menuItem.type) {
                     case "header":
-                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip || ""}">${
                             typeof menuItem.title === "function"
                                 ? menuItem.title(page)
                                 : menuItem.title
@@ -33,7 +97,7 @@ const menuTemplate = ({
                                 : menuItem.selected
                                   ? " selected"
                                   : ""
-                        }" title='${menuItem.tooltip}'>
+                        }" title='${menuItem.tooltip || ""}'>
                         ${
                             typeof menuItem.title === "function"
                                 ? menuItem.title(page)
@@ -54,6 +118,21 @@ const menuTemplate = ({
 <div class="ui-widget-overlay ui-front" style="z-index: ${zIndex - 1}"></div>`
 
 export class ContentMenu {
+    id: string | false
+    page: unknown | false
+    classes: string | false
+    menu: ContentMenuInit
+    height: string
+    width: string
+    onClose: (() => void) | false
+    scroll: boolean | false
+    dialogEl!: HTMLElement
+    backdropEl!: HTMLElement
+    menuPos: ContentMenuPosition | false
+
+    focusedIndex: number
+    previouslyFocusedElement: Element | null
+
     constructor({
         id = false,
         page = false,
@@ -66,7 +145,7 @@ export class ContentMenu {
         dialogEl = false,
         backdropEl = false,
         menuPos = false
-    }) {
+    }: ContentMenuOptions = {}) {
         this.id = id
         this.page = page
         this.classes = classes
@@ -75,15 +154,15 @@ export class ContentMenu {
         this.width = width ? `${width}px` : "auto"
         this.onClose = onClose
         this.scroll = scroll
-        this.dialogEl = dialogEl
-        this.backdropEl = backdropEl
+        this.dialogEl = (dialogEl || null) as HTMLElement
+        this.backdropEl = (backdropEl || null) as HTMLElement
         this.menuPos = menuPos
 
         this.focusedIndex = 0
         this.previouslyFocusedElement = null
     }
 
-    open() {
+    open(): void {
         if (this.dialogEl) {
             return
         }
@@ -103,9 +182,10 @@ export class ContentMenu {
                 page: this.page
             })
         )
-        this.backdropEl = document.body.lastElementChild
-        this.dialogEl = this.backdropEl.previousElementSibling
-        if (this.menuPos?.X && this.menuPos?.Y) {
+        this.backdropEl = document.body.lastElementChild as HTMLElement
+        this.dialogEl = this.backdropEl
+            .previousElementSibling as HTMLElement
+        if (this.menuPos && this.menuPos.X && this.menuPos.Y) {
             this.positionDialog()
         } else {
             this.centerDialog()
@@ -115,7 +195,7 @@ export class ContentMenu {
         this.focusFirstMenuItem()
     }
 
-    renderColumnsHtml(columns) {
+    renderColumnsHtml(columns: number): string {
         const itemsPerColumn = Math.ceil(this.menu.content.length / columns)
         let html = '<div class="content-menu-columns">'
         for (let col = 0; col < columns; col++) {
@@ -132,7 +212,7 @@ export class ContentMenu {
                 const menuItem = this.menu.content[i]
                 switch (menuItem.type) {
                     case "header":
-                        html += `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                        html += `<li><span class="content-menu-item-header" title="${menuItem.tooltip || ""}">${
                             typeof menuItem.title === "function"
                                 ? menuItem.title(this.page)
                                 : menuItem.title
@@ -149,7 +229,7 @@ export class ContentMenu {
                                 : menuItem.selected
                                   ? " selected"
                                   : ""
-                        }" title='${menuItem.tooltip}'>
+                        }" title='${menuItem.tooltip || ""}'>
                         ${
                             typeof menuItem.title === "function"
                                 ? menuItem.title(this.page)
@@ -168,7 +248,7 @@ export class ContentMenu {
         return html
     }
 
-    checkAndAddColumns() {
+    checkAndAddColumns(): void {
         const dialogRect = this.dialogEl.getBoundingClientRect()
         const viewportHeight = window.innerHeight
         const viewportWidth = window.innerWidth
@@ -178,8 +258,8 @@ export class ContentMenu {
         if (dialogRect.height >= maxHeight) {
             const contentEl = this.dialogEl.querySelector(
                 ".ui-content-menu-content"
-            )
-            const contentDiv = contentEl.querySelector(":scope > div")
+            ) as HTMLElement
+            const contentDiv = contentEl.querySelector(":scope > div") as HTMLElement
             let columns = 2
             while (columns <= 6) {
                 contentDiv.innerHTML = this.renderColumnsHtml(columns)
@@ -192,7 +272,7 @@ export class ContentMenu {
                 }
                 const newRect = this.dialogEl.getBoundingClientRect()
                 if (newRect.height < maxHeight && newRect.width < maxWidth) {
-                    if (this.menuPos?.X && this.menuPos?.Y) {
+                    if (this.menuPos && this.menuPos.X && this.menuPos.Y) {
                         this.positionDialog()
                     } else {
                         this.centerDialog()
@@ -205,9 +285,9 @@ export class ContentMenu {
             contentDiv.innerHTML = `<ul class="content-menu-list">${this.renderSingleColumnHtml()}</ul>`
             contentEl.style.width = this.width
             this.dialogEl
-                .querySelector(".ui-content-menu-content")
+                .querySelector(".ui-content-menu-content")!
                 .classList.add("ui-scrollable")
-            if (this.menuPos?.X && this.menuPos?.Y) {
+            if (this.menuPos && this.menuPos.X && this.menuPos.Y) {
                 this.positionDialog()
             } else {
                 this.centerDialog()
@@ -215,12 +295,12 @@ export class ContentMenu {
         }
     }
 
-    renderSingleColumnHtml() {
+    renderSingleColumnHtml(): string {
         return this.menu.content
             .map((menuItem, index) => {
                 switch (menuItem.type) {
                     case "header":
-                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip}">${
+                        return `<li><span class="content-menu-item-header" title="${menuItem.tooltip || ""}">${
                             typeof menuItem.title === "function"
                                 ? menuItem.title(this.page)
                                 : menuItem.title
@@ -234,7 +314,7 @@ export class ContentMenu {
                                 : menuItem.selected
                                   ? " selected"
                                   : ""
-                        }" title='${menuItem.tooltip}'>
+                        }" title='${menuItem.tooltip || ""}'>
                     ${
                         typeof menuItem.title === "function"
                             ? menuItem.title(this.page)
@@ -250,7 +330,7 @@ export class ContentMenu {
             .join("")
     }
 
-    centerDialog() {
+    centerDialog(): void {
         const totalWidth = window.innerWidth,
             totalHeight = window.innerHeight,
             dialogRect = this.dialogEl.getBoundingClientRect(),
@@ -262,7 +342,7 @@ export class ContentMenu {
         this.dialogEl.style.left = `${(totalWidth - dialogWidth) / 2 + scrollLeftOffset}px`
     }
 
-    positionDialog() {
+    positionDialog(): void {
         const dialogHeight = this.dialogEl.getBoundingClientRect().height + 10,
             dialogWidth = this.dialogEl.getBoundingClientRect().width + 10,
             scrollTopOffset = window.pageYOffset,
@@ -271,8 +351,8 @@ export class ContentMenu {
 
         // 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
+        let top = this.menuPos ? this.menuPos.Y : 0,
+            left = this.menuPos ? this.menuPos.X : 0
 
         if (top + dialogHeight > scrollTopOffset + clientHeight) {
             top -= top + dialogHeight - (scrollTopOffset + clientHeight)
@@ -290,7 +370,7 @@ export class ContentMenu {
         this.dialogEl.style.left = `${left}px`
     }
 
-    bind() {
+    bind(): void {
         this.backdropEl.addEventListener("click", () => this.close())
         this.dialogEl.addEventListener("click", event => this.onclick(event))
         this.dialogEl.addEventListener("keydown", event =>
@@ -299,34 +379,34 @@ export class ContentMenu {
         this.dialogEl.focus()
     }
 
-    getHighestDialogZIndex() {
+    getHighestDialogZIndex(): number {
         let zIndex = 100
         document
             .querySelectorAll("div.ui-content-menu")
             .forEach(
-                dialogEl => (zIndex = Math.max(zIndex, dialogEl.style.zIndex))
+                dialogEl => (zIndex = Math.max(zIndex, parseInt((dialogEl as HTMLElement).style.zIndex) || 100))
             )
         document
             .querySelectorAll("div.ui-dialog")
             .forEach(
-                dialogEl => (zIndex = Math.max(zIndex, dialogEl.style.zIndex))
+                dialogEl => (zIndex = Math.max(zIndex, parseInt((dialogEl as HTMLElement).style.zIndex) || 100))
             )
         return zIndex
     }
 
-    close() {
+    close(): void {
         if (!this.dialogEl || !this.dialogEl.parentElement) {
             return
         }
         this.dialogEl.parentElement.removeChild(this.dialogEl)
-        this.backdropEl.parentElement.removeChild(this.backdropEl)
+        this.backdropEl.parentElement!.removeChild(this.backdropEl)
 
         // Restore focus to the previously focused element
         if (
             this.previouslyFocusedElement &&
-            this.previouslyFocusedElement.focus
+            (this.previouslyFocusedElement as HTMLElement).focus
         ) {
-            this.previouslyFocusedElement.focus()
+            (this.previouslyFocusedElement as HTMLElement).focus()
         }
 
         if (this.onClose) {
@@ -334,13 +414,16 @@ export class ContentMenu {
         }
     }
 
-    onclick(event) {
+    onclick(event: MouseEvent): void {
         event.preventDefault()
         event.stopImmediatePropagation()
-        const target = event.target.closest("li.content-menu-item")
+        const target = (event.target as Element).closest("li.content-menu-item") as HTMLElement
         if (target) {
             const menuNumber = target.dataset.index
-            const menuItem = this.menu.content[menuNumber]
+            if (menuNumber === undefined) {
+                return
+            }
+            const menuItem = this.menu.content[parseInt(menuNumber)] as ContentMenuActionItem
             if (menuItem.disabled?.(this.page)) {
                 return
             }
@@ -349,7 +432,7 @@ export class ContentMenu {
         }
     }
 
-    onKeyDown(event) {
+    onKeyDown(event: KeyboardEvent): void {
         const {key} = event
         const menuItems = this.dialogEl.querySelectorAll(
             "li.content-menu-item:not(.disabled)"
@@ -381,10 +464,10 @@ export class ContentMenu {
                 this.focusMenuItem(this.focusedIndex)
                 break
             case "ArrowLeft":
+                event.preventDefault()
                 if (totalColumns <= 1) {
                     break
                 }
-                event.preventDefault()
                 {
                     const currentCol = Math.floor(
                         this.focusedIndex / itemsPerColumn
@@ -406,10 +489,10 @@ export class ContentMenu {
                 }
                 break
             case "ArrowRight":
+                event.preventDefault()
                 if (totalColumns <= 1) {
                     break
                 }
-                event.preventDefault()
                 {
                     const currentCol = Math.floor(
                         this.focusedIndex / itemsPerColumn
@@ -445,7 +528,7 @@ export class ContentMenu {
             case "Enter":
             case " ": {
                 event.preventDefault()
-                const menuItem = this.menu.content[this.focusedIndex]
+                const menuItem = this.menu.content[this.focusedIndex] as ContentMenuActionItem
                 if (!menuItem.disabled?.(this.page)) {
                     menuItem.action(this.page)
                     this.close()
@@ -455,7 +538,7 @@ export class ContentMenu {
         }
     }
 
-    focusFirstMenuItem() {
+    focusFirstMenuItem(): void {
         const menuItems = this.dialogEl.querySelectorAll(
             "li.content-menu-item:not(.disabled)"
         )
@@ -465,12 +548,12 @@ export class ContentMenu {
         }
     }
 
-    focusMenuItem(index) {
+    focusMenuItem(index: number): void {
         const menuItems = this.dialogEl.querySelectorAll(
             "li.content-menu-item:not(.disabled)"
         )
         if (menuItems[index]) {
-            menuItems[index].focus()
+            (menuItems[index] as HTMLElement).focus()
         }
     }
 }

package/src/datatable_bulk.ts

@@ -1,13 +1,50 @@
-// @ts-nocheck
 import {keyName} from "w3c-keyname"
 
 import {whenReady} from "./basic.js"
-import {ContentMenu} from "./content_menu.js"
+import {ContentMenu, ContentMenuInit} from "./content_menu.js"
+
+export interface DataTableCell {
+    data: unknown
+    text: string
+}
+
+export interface DataTableRow {
+    cells: DataTableCell[]
+}
+
+export interface DataTableData {
+    data: DataTableRow[]
+}
+
+export interface DataTable {
+    dom: HTMLElement
+    data: DataTableData
+    update: () => void
+}
+
+export interface DatatableBulkPage {
+    dom: HTMLElement
+    getSelected: () => unknown[]
+}
 
 let bulkId = 0
 
 export class DatatableBulk {
-    constructor(page, model, checkboxColumn) {
+    page: DatatableBulkPage
+    model: ContentMenuInit
+    checkboxColumn: number
+
+    id: string
+    table: DataTable | undefined
+    boundOnClick: ((event: MouseEvent) => void) | undefined
+    boundOnTableCheckChange: ((event: Event) => void) | undefined
+    boundOnKeyDown: ((event: KeyboardEvent) => void) | undefined
+
+    constructor(
+        page: DatatableBulkPage,
+        model: ContentMenuInit,
+        checkboxColumn: number
+    ) {
         this.page = page
         this.model = model
         this.checkboxColumn = checkboxColumn
@@ -15,31 +52,31 @@ export class DatatableBulk {
         this.id = `dt-bulk-${++bulkId}`
     }
 
-    init(table) {
+    init(table: DataTable): void {
         this.table = table
         whenReady().then(() => this.bindEvents())
     }
 
-    update() {
+    update(): void {
         this.model.content = this.model.content.sort(
-            (a, b) => a.order - b.order
+            (a, b) => (a.order || 0) - (b.order || 0)
         )
     }
 
-    bindEvents() {
+    bindEvents(): void {
         // 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.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() {
+    destroy(): void {
         if (this.page && this.page.dom && this.boundOnClick) {
             this.page.dom.removeEventListener("click", this.boundOnClick)
         }
@@ -65,12 +102,12 @@ export class DatatableBulk {
         }
 
         // Clear any references to help garbage collection
-        this.page = null
-        this.table = null
-        this.model = null
+        this.page = null as unknown as DatatableBulkPage
+        this.table = undefined
+        this.model = {content: []}
     }
 
-    onKeyDown(event) {
+    onKeyDown(event: KeyboardEvent): void {
         const key = keyName(event)
         const el = this.page.dom.querySelector(`#${this.id}`)
 
@@ -89,8 +126,8 @@ export class DatatableBulk {
                 width: 280,
                 page: this.page,
                 menuPos: {
-                    X: Number.parseInt(el.getBoundingClientRect().left),
-                    Y: Number.parseInt(el.getBoundingClientRect().bottom)
+                    X: Number.parseInt(el.getBoundingClientRect().left as unknown as string),
+                    Y: Number.parseInt(el.getBoundingClientRect().bottom as unknown as string)
                 }
             })
             contentMenu.open()
@@ -115,7 +152,7 @@ export class DatatableBulk {
         }
     }
 
-    toggleSelectAll(checked) {
+    toggleSelectAll(checked: boolean): void {
         // Update the DataTable instance
         if (this.table) {
             this.table.data.data.forEach(row => {
@@ -130,26 +167,26 @@ export class DatatableBulk {
         this.onTableCheckChange()
     }
 
-    onTableCheckChange() {
+    onTableCheckChange(): void {
         const el = this.page.dom.querySelector(`#${this.id}`)
         if (!el) {
             return
         }
 
         const allChecked = this.isAllChecked()
-        el.querySelector("input[type=checkbox]").checked = allChecked
+        ;(el.querySelector("input[type=checkbox]") as HTMLInputElement).checked = allChecked
     }
 
-    isAllChecked() {
+    isAllChecked(): boolean {
         const checkboxes = Array.from(
-            this.table.dom.querySelectorAll("input.entry-select[type=checkbox]")
+            this.table!.dom.querySelectorAll("input.entry-select[type=checkbox]")
         )
-        const unchecked = checkboxes.filter(box => !box.checked)
-        return !unchecked.length && checkboxes.length
+        const unchecked = checkboxes.filter(box => !(box as HTMLInputElement).checked)
+        return !unchecked.length && checkboxes.length > 0
     }
 
-    onClick(event) {
-        const target = event.target
+    onClick(event: MouseEvent): void {
+        const target = event.target as Element
         if (target.matches(`#${this.id} *`)) {
             event.preventDefault()
             event.stopImmediatePropagation()
@@ -164,8 +201,8 @@ export class DatatableBulk {
                         width: 280,
                         page: this.page,
                         menuPos: {
-                            X: Number.parseInt(event.pageX),
-                            Y: Number.parseInt(event.pageY)
+                            X: Number.parseInt(event.pageX as unknown as string),
+                            Y: Number.parseInt(event.pageY as unknown as string)
                         }
                     })
                     contentMenu.open()
@@ -176,9 +213,9 @@ export class DatatableBulk {
                 // Click on bulk checkbox
                 const isChecked = this.isAllChecked()
                 this.toggleSelectAll(!isChecked)
-                target
-                    .closest("div.datatable-wrapper")
-                    .querySelector("input[type=checkbox]").checked = !isChecked
+                ;(target
+                    .closest("div.datatable-wrapper")!
+                    .querySelector("input[type=checkbox]") as HTMLInputElement).checked = !isChecked
                 this.onTableCheckChange()
             }
         } else if (target.matches(".fw-data-table .entry-select + label")) {
@@ -186,18 +223,18 @@ export class DatatableBulk {
             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 tr = target.closest("tr") as HTMLTableRowElement
+            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.table!.update()
             this.onTableCheckChange()
         }
     }
 
-    getHTML() {
+    getHTML(): string {
         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>