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

package/src/file/new_folder_dialog.ts

@@ -1,9 +1,11 @@
-// @ts-nocheck
 import {Dialog} from "../dialog.js"
 import {newFolderTemplate} from "./templates.js"
 
 export class NewFolderDialog {
-    constructor(callback = _foldername => {}) {
+    callback: (folderName: string) => void
+    dialog: Dialog
+
+    constructor(callback: (folderName: string) => void = () => {}) {
         this.callback = callback
         this.dialog = new Dialog({
             title: gettext("New folder"),
@@ -18,9 +20,9 @@ export class NewFolderDialog {
                     classes: "fw-dark",
                     click: () => {
                         const folderName =
-                            this.dialog.dialogEl.querySelector(
+                            (this.dialog.dialogEl!.querySelector(
                                 "#new-folder-name"
-                            ).value
+                            ) as HTMLInputElement).value
                         this.dialog.close()
                         if (!folderName.length) {
                             return
@@ -32,7 +34,7 @@ export class NewFolderDialog {
         })
     }
 
-    open() {
+    open(): void {
         return this.dialog.open()
     }
 }

package/src/file/selector.ts

@@ -1,18 +1,65 @@
-// @ts-nocheck
 import {escapeText, findTarget} from "../basic.js"
 import {ensureCSS} from "../network.js"
 
+export interface FileDescriptor {
+    id?: number
+    title?: string
+    path: string
+    [key: string]: unknown
+}
+
+export interface FileSelectorFolder {
+    name: string
+    type: "folder"
+    open: boolean
+    selected: boolean
+    path: string
+    children: FileSelectorEntry[]
+}
+
+export interface FileSelectorFile {
+    name: string
+    type: "file"
+    path: string
+    selected?: boolean
+    file: FileDescriptor
+}
+
+export type FileSelectorEntry = FileSelectorFolder | FileSelectorFile
+
+export interface FileSelectorOptions {
+    dom: HTMLElement
+    files: FileDescriptor[]
+    showFiles?: boolean
+    selectFolders?: boolean
+    multiSelect?: boolean
+    selectDir?: (path: string) => void
+    selectFile?: (path: string) => void
+    fileIcon?: string
+}
+
 export class FileSelector {
+    dom: HTMLElement
+    files: FileDescriptor[]
+    showFiles: boolean
+    selectFolders: boolean
+    multiSelect: boolean
+    selectDir: (path: string) => void
+    selectFile: (path: string) => void
+    fileIcon: string
+    root: FileSelectorFolder
+    selected: FileSelectorEntry[]
+
     constructor({
         dom,
         files,
         showFiles = true,
         selectFolders = true,
         multiSelect = false,
-        selectDir = _path => {},
-        selectFile = _path => {},
+        selectDir = () => {},
+        selectFile = () => {},
         fileIcon = "far fa-file-alt"
-    }) {
+    }: FileSelectorOptions) {
         this.dom = dom
         this.files = files
         this.showFiles = showFiles // Whether to show existing files or only folders
@@ -36,7 +83,7 @@ export class FileSelector {
         }
     }
 
-    init() {
+    init(): void {
         this.readDirStructure()
         this.sortDirStructure()
         ensureCSS(staticUrl("css/file_selector.css"))
@@ -45,7 +92,7 @@ export class FileSelector {
         this.bind()
     }
 
-    readDirStructure() {
+    readDirStructure(): void {
         // Read directory structure from existing file paths.
         // A file's title is used as the final path segment when the file has
         // no explicit folder path. We strip any "/" from that segment because
@@ -80,7 +127,7 @@ export class FileSelector {
                 }
                 let folder = treeWalker.find(
                     item => item.name === pathPart && item.type === "folder"
-                )
+                ) as FileSelectorFolder | undefined
                 if (!folder) {
                     folder = {
                         name: pathPart,
@@ -97,7 +144,7 @@ export class FileSelector {
         })
     }
 
-    sortDirStructure(entries = this.root.children) {
+    sortDirStructure(entries = this.root.children): void {
         entries.sort((a, b) => {
             if (a.type !== b.type) {
                 return a.type === "folder" ? -1 : 1
@@ -111,32 +158,33 @@ export class FileSelector {
         })
     }
 
-    addFolder(rawName) {
+    addFolder(rawName: string): void {
         const name = rawName.replace(/\//g, "")
         // Add a new folder as a subfolder to the currently selected folder
         if (
             !this.selected.length ||
             this.selected[0].type !== "folder" ||
-            this.selected[0].children.find(
+            (this.selected[0] as FileSelectorFolder).children.find(
                 child => child.type === "folder" && child.name === name
             )
         ) {
             // A file is selected. Give up.
             return
         }
-        const newFolder = {
+        const selectedFolder = this.selected[0] as FileSelectorFolder
+        const newFolder: FileSelectorFolder = {
             name,
             type: "folder",
             open: true,
             selected: true,
-            path: this.selected[0].path + name + "/",
+            path: selectedFolder.path + name + "/",
             children: []
         }
-        this.selected[0].children.push(newFolder)
-        this.sortDirStructure(this.selected[0].children)
-        this.selected[0].open = true
+        selectedFolder.children.push(newFolder)
+        this.sortDirStructure(selectedFolder.children)
+        selectedFolder.open = true
         if (!this.multiSelect) {
-            this.selected[0].selected = false
+            selectedFolder.selected = false
             this.selected = []
         }
         this.selected.push(newFolder)
@@ -144,17 +192,17 @@ export class FileSelector {
         this.render()
     }
 
-    deselectAll() {
+    deselectAll(): void {
         this.selected.forEach(entry => (entry.selected = false))
         this.selected = []
         this.render()
     }
 
-    render() {
+    render(): void {
         this.dom.innerHTML = this.renderFolder(this.root)
     }
 
-    renderFolder(folder, indentLevel = 0) {
+    renderFolder(folder: FileSelectorFolder, indentLevel = 0): string {
         let returnString = ""
         returnString += `<div class="folder${folder.open ? "" : " closed"}">`
         returnString += `<p style="margin-left:${indentLevel * 10}px;">${
@@ -179,42 +227,44 @@ export class FileSelector {
         return returnString
     }
 
-    findEntry(dom) {
-        const searchPath = []
-        let seekItem = dom
-        while (seekItem.closest("div.folder, p.file")) {
+    findEntry(dom: Element): FileSelectorEntry {
+        const searchPath: number[] = []
+        let seekItem: Element | null = dom
+        let closest = seekItem.closest("div.folder, p.file")
+        while (closest) {
+            seekItem = closest
             let itemNumber = 0
-            seekItem = seekItem.closest("div.folder, p.file")
             while (seekItem.previousElementSibling) {
                 itemNumber++
                 seekItem = seekItem.previousElementSibling
             }
             searchPath.push(itemNumber)
             seekItem = seekItem.parentElement
+            closest = seekItem?.closest("div.folder, p.file") ?? null
         }
-        let entry = this.root
+        let entry: FileSelectorEntry = this.root
         searchPath.pop()
         while (searchPath.length) {
-            entry = entry.children[searchPath.pop()]
+            entry = (entry as FileSelectorFolder).children[searchPath.pop()!]
         }
         return entry
     }
 
-    bind() {
+    bind(): void {
         this.dom.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: Element | null} = {}
             switch (true) {
                 case findTarget(event, ".fa-plus-square", el): {
                     event.preventDefault()
-                    const entry = this.findEntry(el.target)
-                    entry.open = true
+                    const entry = this.findEntry(el.target!)
+                    ;(entry as FileSelectorFolder).open = true
                     this.render()
                     break
                 }
                 case findTarget(event, ".fa-minus-square", el): {
                     event.preventDefault()
-                    const entry = this.findEntry(el.target)
-                    entry.open = false
+                    const entry = this.findEntry(el.target!)
+                    ;(entry as FileSelectorFolder).open = false
                     this.render()
                     break
                 }
@@ -224,7 +274,7 @@ export class FileSelector {
                         // Folders cannot be selected
                         return
                     }
-                    const entry = this.findEntry(el.target)
+                    const entry = this.findEntry(el.target!)
                     if (this.selected.includes(entry)) {
                         entry.selected = false
                         this.selected = this.selected.filter(e => e !== entry)
@@ -236,13 +286,13 @@ export class FileSelector {
                         }
                         this.selected.push(entry)
                         this.render()
-                        this.selectDir(entry.path)
+                        this.selectDir((entry as FileSelectorFolder).path)
                     }
                     break
                 }
                 case findTarget(event, ".file-name", el): {
                     event.preventDefault()
-                    const entry = this.findEntry(el.target)
+                    const entry = this.findEntry(el.target!)
                     if (this.selected.includes(entry)) {
                         entry.selected = false
                         this.selected = this.selected.filter(e => e !== entry)
@@ -254,7 +304,7 @@ export class FileSelector {
                         }
                         this.selected.push(entry)
                         this.render()
-                        this.selectFile(entry.path)
+                        this.selectFile((entry as FileSelectorFile).path)
                     }
                     break
                 }

package/src/file/templates.ts

@@ -1,12 +1,11 @@
-// @ts-nocheck
 import {escapeText} from "../index.js"
 
-export const moveTemplate = ({path}) =>
+export const moveTemplate = ({path}: {path: string}): string =>
     `<div>
     <span>${gettext("Path")}:</span>
     <input type="text" value="${escapeText(path)}" id="path" placeholder="${gettext("Insert path")}">
     <div class="file-selector"></div>
     </div>`
 
-export const newFolderTemplate = () =>
+export const newFolderTemplate = (): string =>
     `<div><input type="text" id="new-folder-name" placeholder="${gettext("Insert folder name")}"></div>`

package/src/file/tools.ts

@@ -1,15 +1,18 @@
-// @ts-nocheck
 import {escapeText} from "../basic.js"
 import {postJson} from "../network.js"
 
-export const shortFileTitle = (title, path) => {
+export const shortFileTitle = (title: string, path: string): string => {
     if (!path.length || path.endsWith("/")) {
         return escapeText(title || gettext("Untitled"))
     }
-    return escapeText(path.split("/").pop())
+    return escapeText(path.split("/").pop() || "")
 }
 
-export const longFilePath = (title, path, prefix = "") => {
+export const longFilePath = (
+    title: string,
+    path: string,
+    prefix = ""
+): string => {
     if (!path.length) {
         path = "/"
     }
@@ -26,7 +29,7 @@ export const longFilePath = (title, path, prefix = "") => {
     return path
 }
 
-export const cleanPath = (title, path) => {
+export const cleanPath = (title: string, path: string): string => {
     if (!path.startsWith("/")) {
         path = "/" + path
     }
@@ -45,14 +48,20 @@ export const cleanPath = (title, path) => {
     return path
 }
 
-export const moveFile = (fileId, title, path, moveUrl) => {
+export const moveFile = (
+    fileId: number,
+    title: string,
+    path: string,
+    moveUrl: string
+): Promise<string> => {
     path = cleanPath(title, path)
     return new Promise((resolve, reject) => {
         postJson(moveUrl, {id: fileId, path}).then(({json}) => {
-            if (json.done) {
+            const response = json as {done?: boolean}
+            if (response.done) {
                 resolve(path)
             } else {
-                reject()
+                reject(new Error("Could not move file"))
             }
         })
     })

package/src/focus.ts

@@ -1,21 +1,19 @@
-// @ts-nocheck
-// Get the index number of currently focused selement. This it to set tyhe focus close by after doing some dom changes.
+const FOCUSABLE_SELECTOR =
+    "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"
 
-export const getFocusIndex = () => {
-    return Array.from(
-        document.querySelectorAll(
-            "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"
-        )
-    ).findIndex(el => el === document.activeElement)
+// Get the index number of currently focused element. This is to set the focus close by after doing some dom changes.
+
+export const getFocusIndex = (): number => {
+    return Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR)).findIndex(
+        el => el === document.activeElement
+    )
 }
 
-export const setFocusIndex = index => {
+export const setFocusIndex = (index: number): void => {
     const focusableElements = Array.from(
-        document.querySelectorAll(
-            "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"
-        )
+        document.querySelectorAll(FOCUSABLE_SELECTOR)
     )
     if (index >= 0 && index < focusableElements.length) {
-        focusableElements[index].focus()
+        (focusableElements[index] as HTMLElement).focus()
     }
 }

package/src/global.d.ts

@@ -1,11 +1,18 @@
 // Globals provided by the Fidus Writer host page.
 
-declare const gettext: (msgid: string) => string
+declare function gettext(msgid: string): string
 
-declare const staticUrl: (path: string) => string
+declare function interpolate(
+    fmt: string,
+    args: unknown[],
+    named?: boolean
+): string
 
-declare const settings: Record<string, any>
+declare function staticUrl(path: string): string
+
+declare const settings: Record<string, unknown>
 
 interface Window {
-    settings?: Record<string, any>
+    settings?: Record<string, unknown>
+    csrfToken?: string
 }

package/src/index.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export {OverviewMenuView} from "./overview_menu.js"
 export {
     dropdownSelect,

package/src/network.ts

@@ -1,10 +1,21 @@
-// @ts-nocheck
 import {getSettings} from "./settings.js"
 
+export interface FileUploadValue {
+    file: Blob
+    filename: string
+}
+
+export type PostFiles = Record<string, Blob | File | FileUploadValue | Blob[] | File[] | string[] | string>
+
+export interface PostOptions {
+    csrfToken?: string
+    keepalive?: boolean
+}
+
 /** Get cookie to set as part of the request header of all AJAX requests to the server.
  * @param name The name of the token to look for in the cookie.
  */
-export const getCookie = name => {
+export const getCookie = (name: string): string | null => {
     if (!document.cookie || document.cookie === "") {
         return null
     }
@@ -25,18 +36,20 @@ export const getCookie = name => {
 }
 
 /* from https://www.tjvantoll.com/2015/09/13/fetch-and-errors/ */
-const handleFetchErrors = response => {
+const handleFetchErrors = (response: Response): Response => {
     if (!response.ok) {
         throw response
     }
     return response
 }
 
-export const get = (url, params = {}, csrfToken = false) => {
+export const get = (
+    url: string,
+    params: Record<string, string> = {},
+    csrfToken: string | false = false
+): Promise<Response> => {
     const settings = getSettings()
-    if (!csrfToken) {
-        csrfToken = settings.getCsrfToken() // Won't work in web worker.
-    }
+    const token = csrfToken || settings.getCsrfToken() // Won't work in web worker.
     const queryString = Object.keys(params)
         .map(
             key =>
@@ -49,7 +62,7 @@ export const get = (url, params = {}, csrfToken = false) => {
     return fetch(settings.apiUrl(url), {
         method: "GET",
         headers: {
-            "X-CSRFToken": csrfToken,
+            "X-CSRFToken": token,
             Accept: "application/json",
             "X-Requested-With": "XMLHttpRequest"
         },
@@ -57,16 +70,24 @@ export const get = (url, params = {}, csrfToken = false) => {
     }).then(handleFetchErrors)
 }
 
-export const getJson = (url, params = {}, csrfToken = false) =>
-    get(url, params, csrfToken).then(response => response.json())
+export const getJson = (
+    url: string,
+    params: Record<string, string> = {},
+    csrfToken: string | false = false
+): Promise<unknown> => get(url, params, csrfToken).then(response => response.json())
 
-export const postBare = (url, object = {}, files = {}, options = {}) => {
+export const postBare = (
+    url: string,
+    object: Record<string, unknown> = {},
+    files: PostFiles = {},
+    options: PostOptions = {}
+): Promise<Response> => {
     const settings = getSettings()
 
     const {csrfToken: csrfTokenOpt, keepalive = false} = options
     const csrfToken = csrfTokenOpt || settings.getCsrfToken() // Won't work in web worker.
 
-    const fetchOptions = {
+    const fetchOptions: RequestInit = {
         method: "POST",
         headers: {
             "X-CSRFToken": csrfToken,
@@ -83,34 +104,51 @@ export const postBare = (url, object = {}, files = {}, options = {}) => {
         body.append("json", JSON.stringify(object))
         Object.keys(files).forEach(key => {
             const value = files[key]
-            if (typeof value === "object" && value.file && value.filename) {
-                body.append(key, value.file, value.filename)
+            if (
+                typeof value === "object" &&
+                value !== null &&
+                "file" in value &&
+                "filename" in value
+            ) {
+                const uploadValue = value as FileUploadValue
+                body.append(key, uploadValue.file, uploadValue.filename)
             } else if (Array.isArray(value)) {
                 value.forEach(item => body.append(`${key}[]`, item))
-            } else {
-                body.append(key, value)
+            } else if (value !== undefined && value !== null) {
+                body.append(key, value as Blob | string)
             }
         })
         fetchOptions.body = body
     } else {
-        fetchOptions.headers["Content-Type"] = "application/json"
+        ;(fetchOptions.headers as Record<string, string>)["Content-Type"] =
+            "application/json"
         fetchOptions.body = JSON.stringify(object)
     }
 
     return fetch(settings.apiUrl(url), fetchOptions)
 }
 
-export const post = (url, object = {}, files = {}, options = {}) => {
+export const post = (
+    url: string,
+    object: Record<string, unknown> = {},
+    files: PostFiles = {},
+    options: PostOptions = {}
+): Promise<Response> => {
     return postBare(url, object, files, options).then(handleFetchErrors)
 }
 
 // post json object and return json and status
-export const postJson = (url, object = {}, files = {}, options = {}) =>
+export const postJson = (
+    url: string,
+    object: Record<string, unknown> = {},
+    files: PostFiles = {},
+    options: PostOptions = {}
+): Promise<{json: unknown; status: number}> =>
     post(url, object, files, options).then(response =>
         response.json().then(json => ({json, status: response.status}))
     )
 
-export const ensureCSS = cssUrl => {
+export const ensureCSS = (cssUrl: string | string[]): boolean | void => {
     if (typeof cssUrl === "object") {
         cssUrl.forEach(url => ensureCSS(url))
         return