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

package/src/basic.ts

@@ -1,23 +1,41 @@
-// @ts-nocheck
 import {keyName} from "w3c-keyname"
 
-import {ContentMenu} from "./content_menu.js"
+import {ContentMenu, ContentMenuInit} from "./content_menu.js"
 import {Dialog} from "./dialog.js"
 import {isActivationEvent} from "./events.js"
 
+export interface DropdownSelectOptions {
+    onChange?: (value: string | false) => void
+    width?: number | string | false
+    value?: string | false
+    button?: HTMLElement | false
+}
+
+export interface DropdownSelectAPI {
+    setValue: (newValue: string | false) => void
+    getValue: () => string | false
+    enable: () => void
+    disable: () => void
+}
+
 /** Creates a styled select with a contentmenu from a select tag.
  * @param select The select-tag which is to be replaced.
  * @param options
  */
 
 export const dropdownSelect = (
-    selectDOM,
-    {onChange = _newValue => {}, width = false, value = false, button = false}
-) => {
+    selectDOM: HTMLSelectElement,
+    {
+        onChange = () => {},
+        width = false,
+        value = false,
+        button = false
+    }: DropdownSelectOptions = {}
+): DropdownSelectAPI | undefined => {
     if (!selectDOM.parentElement) {
         return
     }
-    let buttonDOM
+    let buttonDOM: HTMLElement
     if (button) {
         buttonDOM = button
         selectDOM.parentElement.removeChild(selectDOM) // Remove the <select> from the main dom.
@@ -32,9 +50,9 @@ export const dropdownSelect = (
             "fw-dropdown"
         )
         if (width) {
-            buttonDOM.style.width = Number.isInteger(width)
+            buttonDOM.style.width = Number.isInteger(width as number)
                 ? `${width}px`
-                : width
+                : (width as string)
         }
         selectDOM.classList.forEach(className =>
             buttonDOM.classList.add(className)
@@ -55,46 +73,51 @@ export const dropdownSelect = (
         // There are no options, so we only create the button.
         return {
             setValue: () => {},
-            getValue: () => false
+            getValue: () => false,
+            enable: () => {},
+            disable: () => {}
         }
     }
-    let selected
-    const menu = {
+    let selected: HTMLOptionElement | undefined
+    const menu: ContentMenuInit = {
         content: options.map((option, order) => {
-            if (option.selected || option.value === value) {
-                selected = option
+            const optionEl = option as HTMLOptionElement
+            if (optionEl.selected || optionEl.value === value) {
+                selected = optionEl
             }
             return {
-                title: option.innerHTML,
+                title: optionEl.innerHTML,
                 type: "action",
-                tooltip: option.title || "",
+                tooltip: optionEl.title || "",
                 order,
                 action: () => {
                     if (!button) {
-                        buttonDOM.firstElementChild.innerText = option.innerText
+                        ;(buttonDOM.firstElementChild as HTMLElement).innerText =
+                            optionEl.innerText
                     }
-                    value = option.value || option.dataset.value
+                    value = optionEl.value || optionEl.dataset.value || false
                     onChange(value)
                     menu.content.forEach(item => (item.selected = false))
                     menu.content[order].selected = true
                     return false
                 },
-                selected: !!(option.selected || option.dataset.selected)
+                selected: !!(optionEl.selected || optionEl.dataset.selected)
             }
         })
     }
     if (!selected && !button) {
-        selected = selectDOM.firstElementChild
+        selected = selectDOM.firstElementChild as HTMLOptionElement
         menu.content[0].selected = true
     }
 
     if (!button) {
-        buttonDOM.firstElementChild.innerText = selected.innerText
+        ;(buttonDOM.firstElementChild as HTMLElement).innerText =
+            selected ? selected.innerText : ""
     }
 
     value = selected ? selected.value : false
 
-    const openMenu = event => {
+    const openMenu = (event: Event) => {
         if (!isActivationEvent(event)) {
             return
         }
@@ -105,9 +128,10 @@ export const dropdownSelect = (
             return
         }
         // Determine menu position
-        let menuPos
+        let menuPos: {X: number; Y: number}
         if (event.type === "click") {
-            menuPos = {X: event.pageX, Y: event.pageY}
+            const mouseEvent = event as MouseEvent
+            menuPos = {X: mouseEvent.pageX, Y: mouseEvent.pageY}
         } else {
             // Keyboard event
             const rect = buttonDOM.getBoundingClientRect()
@@ -132,16 +156,17 @@ export const dropdownSelect = (
     return {
         setValue: newValue => {
             const optionIndex = options.findIndex(
-                option => option.value === newValue
-            )
+                option => (option as HTMLOptionElement).value === newValue
+            ) as number | undefined
             if (optionIndex === undefined) {
                 return
             }
             menu.content.forEach(item => (item.selected = false))
             menu.content[optionIndex].selected = true
-            const option = options[optionIndex]
+            const option = options[optionIndex] as HTMLOptionElement
             if (!button) {
-                buttonDOM.firstElementChild.innerText = option.innerText
+                ;(buttonDOM.firstElementChild as HTMLElement).innerText =
+                    option.innerText
             }
             value = newValue
         },
@@ -154,7 +179,7 @@ export const dropdownSelect = (
 /** Checks or unchecks a checkable label. This is used for example for bibliography categories when editing bibliography items.
  * @param label The node who's parent has to be checked or unchecked.
  */
-export const setCheckableLabel = labelEl => {
+export const setCheckableLabel = (labelEl: HTMLElement): void => {
     if (labelEl.classList.contains("checked")) {
         labelEl.classList.remove("checked")
     } else {
@@ -162,49 +187,51 @@ export const setCheckableLabel = labelEl => {
     }
 }
 
-let messageWaiter = false
+let messageWaiter: number | false = false
 let waitMessage = ""
 /** Cover the page signaling to the user to wait.
  */
-export const activateWait = (full = false, message = "") => {
+export const activateWait = (full = false, message = ""): void => {
     const waitEl = document.getElementById("wait")
+    if (!waitEl) {
+        return
+    }
     if (message) {
         let messageEl = waitEl.querySelector("span.message")
         if (messageEl) {
             // Another message is already showing. We update directly.
-            messageEl.innerText = message
+            ;(messageEl as HTMLElement).innerText = message
         } else {
             waitMessage = message // We update the message if there is one waiting already
             if (!messageWaiter) {
-                messageWaiter = setTimeout(() => {
+                messageWaiter = window.setTimeout(() => {
                     messageEl = document.createElement("span")
                     messageEl.classList.add("message")
-                    messageEl.innerText = waitMessage
+                    ;(messageEl as HTMLElement).innerText = waitMessage
                     waitEl.appendChild(messageEl)
                     messageWaiter = false
                 }, 2000)
             }
         }
     }
-    if (waitEl) {
-        waitEl.classList.add("active")
-        if (full) {
-            waitEl.classList.add("full")
-        }
+    waitEl.classList.add("active")
+    if (full) {
+        waitEl.classList.add("full")
     }
 }
 
 /** Remove the wait cover.
  */
-export const deactivateWait = () => {
+export const deactivateWait = (): void => {
     const waitEl = document.getElementById("wait")
-    if (waitEl) {
-        waitEl.classList.remove("active")
-        waitEl.classList.remove("full")
+    if (!waitEl) {
+        return
     }
+    waitEl.classList.remove("active")
+    waitEl.classList.remove("full")
     const messageEl = waitEl.querySelector("span.message")
     if (messageEl) {
-        messageEl.parentElement.removeChild(messageEl)
+        messageEl.parentElement?.removeChild(messageEl)
     }
     if (messageWaiter) {
         clearTimeout(messageWaiter)
@@ -216,11 +243,14 @@ export const deactivateWait = () => {
  * @param alertType The type of message that is shown (error, warning, info or success).
  * @param alertMsg The message text.
  */
-export const addAlert = (alertType, alertMsg) => {
+export const addAlert = (
+    alertType: "error" | "warning" | "info" | "success",
+    alertMsg: string
+): void => {
     if (!document.body) {
         return
     }
-    const iconNames = {
+    const iconNames: Record<typeof alertType, string> = {
         error: "circle-exclamation",
         warning: "circle-exclamation",
         info: "circle-info",
@@ -233,11 +263,17 @@ export const addAlert = (alertType, alertMsg) => {
         )
     }
     const alertsWrapper = document.getElementById("alerts-wrapper")
+    if (!alertsWrapper) {
+        return
+    }
     alertsWrapper.insertAdjacentHTML(
         "beforeend",
         `<li class="alerts-${alertType} fa-before fa-${iconNames[alertType]}">${alertMsg}</li>`
     )
     const alertBox = alertsWrapper.lastElementChild
+    if (!alertBox) {
+        return
+    }
     setTimeout(() => {
         alertBox.classList.add("visible")
         setTimeout(() => {
@@ -247,8 +283,20 @@ export const addAlert = (alertType, alertMsg) => {
     }, 1)
 }
 
-// Used for system mesages
-export const showSystemMessage = (message, buttons = [{type: "close"}]) => {
+export interface DialogButtonSpec {
+    type?: "close" | "cancel" | "ok"
+    text?: string
+    classes?: string
+    click?: (event?: Event) => void
+    icon?: string
+    dropdown?: boolean
+}
+
+// Used for system messages
+export const showSystemMessage = (
+    message: string,
+    buttons: DialogButtonSpec[] = [{type: "close"}]
+): Dialog => {
     const dialog = new Dialog({
         title: gettext("System message"),
         body: `<p>${escapeText(message)}</p>`,
@@ -259,22 +307,27 @@ export const showSystemMessage = (message, buttons = [{type: "close"}]) => {
 }
 
 /** Turn milliseconds since epoch (UTC) into a local date string.
- * @param {number} milliseconds Number of milliseconds since epoch (1/1/1970 midnight, UTC).
- * @param {boolean} type 'full' for full date (default), 'sortable-date' for sortable date, 'minutes' for minute accuracy
+ * @param milliseconds Number of milliseconds since epoch (1/1/1970 midnight, UTC).
+ * @param type 'full' for full date (default), 'sortable-date' for sortable date, 'minutes' for minute accuracy
  */
-const CACHED_DATES = {
+type DateType = "sortable-date" | "minutes" | "full"
+
+const CACHED_DATES: Record<DateType, Record<number, string>> = {
     "sortable-date": {},
     minutes: {},
     full: {}
 }
-export const localizeDate = (milliseconds, type = "full") => {
+export const localizeDate = (
+    milliseconds: number,
+    type: DateType = "full"
+): string => {
     if (milliseconds === 0) {
         return ""
     } else if (CACHED_DATES[type][milliseconds]) {
         return CACHED_DATES[type][milliseconds]
     }
     const theDate = new Date(milliseconds)
-    let returnValue
+    let returnValue: string
     switch (type) {
         case "sortable-date": {
             const yyyy = theDate.getFullYear()
@@ -306,7 +359,10 @@ export const localizeDate = (milliseconds, type = "full") => {
  * Turn string literals into single line, removing spaces at start of line
  */
 
-export const noSpaceTmp = (strings, ...values) => {
+export const noSpaceTmp = (
+    strings: TemplateStringsArray,
+    ...values: unknown[]
+): string => {
     const tmpStrings = Array.from(strings)
 
     let combined = ""
@@ -315,7 +371,8 @@ export const noSpaceTmp = (strings, ...values) => {
             combined += tmpStrings.shift()
         }
         if (values.length > 0) {
-            combined += values.shift()
+            const value = values.shift()
+            combined += value !== undefined && value !== null ? String(value) : ""
         }
     }
 
@@ -326,7 +383,7 @@ export const noSpaceTmp = (strings, ...values) => {
     return out
 }
 
-export const escapeText = text => {
+export const escapeText = (text: string): string => {
     return text
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
@@ -340,13 +397,13 @@ export const escapeText = text => {
  * Return an inline info-icon with a hover tooltip containing the given HTML.
  * Use only with trusted HTML content.
  *
- * @param {string} html - The tooltip content (HTML string)
- * @returns {string} HTML for the info tooltip
+ * @param html - The tooltip content (HTML string)
+ * @returns HTML for the info tooltip
  */
-export const infoTooltip = html =>
+export const infoTooltip = (html: string): string =>
     `<span class="fw-info-tooltip"><i class="fa-solid fa-info-circle"></i><span class="fw-info-tooltip-text">${html}</span></span>`
 
-export const unescapeText = text =>
+export const unescapeText = (text: string): string =>
     text
         .replace(/&lt;/g, "<")
         .replace(/&gt;/g, ">")
@@ -357,12 +414,16 @@ export const unescapeText = text =>
  * ES6 promises are not (yet) cancelable.
  */
 
-export const cancelPromise = () => new Promise(() => {})
+export const cancelPromise = (): Promise<never> => new Promise(() => {})
 
 // Check if selector matches one of the ancestors of the event target.
 // Used in switch statements of document event listeners.
-export const findTarget = (event, selector, el = {}) => {
-    el.target = event.target.closest(selector)
+export const findTarget = (
+    event: Event,
+    selector: string,
+    el: {target?: Element | null}
+): boolean => {
+    el.target = (event.target as Element).closest(selector)
     if (el.target) {
         event.stopPropagation()
         return true
@@ -371,7 +432,7 @@ export const findTarget = (event, selector, el = {}) => {
 }
 
 // Promise when page has been loaded.
-export const whenReady = () => {
+export const whenReady = (): Promise<void> => {
     if (document.readyState === "complete") {
         return Promise.resolve()
     } else {
@@ -385,14 +446,14 @@ export const whenReady = () => {
     }
 }
 
-export const setDocTitle = (title, app) => {
+export const setDocTitle = (title: string, app: {name: string}): void => {
     const titleText = `${title} - ${app.name}`
     if (document.title !== titleText) {
         document.title = titleText
     }
 }
 
-const LANGUAGES = {
+const LANGUAGES: Record<string, string> = {
     ar: "العربية",
     bg: "Български",
     cs: "Čeština",
@@ -415,16 +476,19 @@ const LANGUAGES = {
     "zh-hans": "简体中文"
 }
 
-export const langName = code => {
+export const langName = (code: string): string => {
     return LANGUAGES[code] || code
 }
 
 /** Enable ISO date picker on a text input by overlaying a native date picker.
  * The text input displays ISO format (YYYY-MM-DD) while using the native picker for selection.
- * @param {HTMLInputElement} inputEl - The text input element to enhance
- * @param {boolean} minToday - If true, sets min date to today (default: false)
+ * @param inputEl - The text input element to enhance
+ * @param minToday - If true, sets min date to today (default: false)
  */
-export const enableDatePicker = (inputEl, minToday = false) => {
+export const enableDatePicker = (
+    inputEl: HTMLInputElement,
+    minToday = false
+): void => {
     const datePicker = document.createElement("input")
     datePicker.type = "date"
     if (minToday) {
@@ -435,6 +499,9 @@ export const enableDatePicker = (inputEl, minToday = false) => {
     datePicker.style.pointerEvents = "none"
 
     const parent = inputEl.parentElement
+    if (!parent) {
+        return
+    }
     parent.style.position = "relative"
     parent.appendChild(datePicker)
 

package/src/blob.ts

@@ -1,5 +1,4 @@
-// @ts-nocheck
-export function convertDataURIToBlob(dataURI) {
+export function convertDataURIToBlob(dataURI: string): Blob {
     const byteString = atob(dataURI.split(",")[1])
     const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0]
     const ab = new ArrayBuffer(byteString.length)