@fiduswriter/image-manager 0.1.4 → 0.1.5

package/src/overview/{templates.js → templates.ts}

@@ -1,7 +1,19 @@
 import {escapeText} from "fwtoolkit"
 
+import type {ImageCategory} from "../types.js"
+
+interface CategoryFormsTemplateData {
+    categories: ImageCategory[]
+}
+
+interface EditcategoriesTemplateData {
+    categories: ImageCategory[]
+}
+
 /** A template for the image category edit form. */
-const usermediaCategoryformsTemplate = ({categories}) =>
+const usermediaCategoryformsTemplate = ({
+    categories
+}: CategoryFormsTemplateData) =>
     `${categories
         .map(
             cat =>
@@ -22,7 +34,9 @@ const usermediaCategoryformsTemplate = ({categories}) =>
     </tr>`
 
 /** A template to edit image categories. */
-export const usermediaEditcategoriesTemplate = ({categories}) =>
+export const usermediaEditcategoriesTemplate = ({
+    categories
+}: EditcategoriesTemplateData) =>
     `<table id="editCategoryList" class="fw-dialog-table">
         <tbody>
             ${usermediaCategoryformsTemplate({categories})}

package/src/selection_dialog/{index.js → index.ts}

@@ -1,80 +1,113 @@
 import {Dialog, SelectionDataTable, cancelPromise, escapeText, gettext} from "fwtoolkit"
+import type {DialogButtonSpec} from "fwtoolkit/basic"
+import type {DataTable} from "simple-datatables"
+
+import type {ImageDB} from "../database.js"
+import type {
+    ImageManagerPage,
+    ImageSelectionItem
+} from "../types.js"
 
 export class ImageSelectionDialog {
-    constructor(imageDB, userImageDB, imgId, page) {
+    imageDB: ImageDB
+
+    userImageDB: ImageDB
+
+    page: ImageManagerPage
+
+    imgId: number | false
+
+    imgDb: "document" | "user" = "document"
+
+    images: ImageSelectionItem[] = []
+
+    imageDialog!: Dialog
+
+    selectionTable!: SelectionDataTable
+
+    table: DataTable | null = null
+
+    constructor(
+        imageDB: ImageDB,
+        userImageDB: ImageDB,
+        imgId: number | false,
+        page: ImageManagerPage
+    ) {
         this.imageDB = imageDB
         this.userImageDB = userImageDB
         this.page = page
         this.imgId = imgId // a preselected image
-        this.imgDb = "document" // the preselection image will always come from the document
+        // the preselection image will always come from the document
         this.images = [] // images from both databases
     }
 
-    isE2EE() {
+    isE2EE(): boolean {
         return this.page.e2ee?.encrypted === true
     }
 
-    init() {
+    init(): Promise<unknown> {
         console.log(
             "DEBUG selection init: docImages=",
             Object.keys(this.imageDB.db).length,
             "userImages=",
             Object.keys(this.userImageDB.db).length
         )
-        this.images = Object.values(this.imageDB.db).map(image => {
-            return {
-                image,
-                db: "document"
-            }
-        })
+        this.images = Object.values(this.imageDB.db).map(image => ({
+            image,
+            db: "document" as const
+        }))
         Object.values(this.userImageDB.db).forEach(image => {
             if (this.imageDB.db[image.id]) {
                 return
             }
             this.images.push({
                 image,
-                db: "user"
+                db: "user" as const
             })
         })
         console.log("DEBUG selection images=", this.images.length)
-        const buttons = []
+        const buttons: DialogButtonSpec[] = []
         const p = new Promise(resolve => {
             if (!this.page.app.isOffline()) {
                 buttons.push({
                     text: gettext("Add new image"),
                     icon: "plus-circle",
                     click: () => {
-                        import("../edit_dialog/index.js").then(({ImageEditDialog}) => {
-                            const targetDB = this.isE2EE()
-                                ? this.imageDB
-                                : this.userImageDB
-                            const imageUpload = new ImageEditDialog(
-                                targetDB,
-                                false,
-                                this.page
-                            )
-
-                            resolve(
-                                imageUpload.init().then(imageId => {
-                                    console.log(
-                                        "DEBUG upload resolved imageId=",
-                                        imageId
-                                    )
-                                    this.imgId = imageId
-                                    // For E2EE docs the image goes straight
-                                    // into the document DB, not the user's.
-                                    this.imgDb = this.isE2EE()
-                                        ? "document"
-                                        : "user"
-                                    console.log(
-                                        "DEBUG closing selection dialog"
-                                    )
-                                    this.imageDialog.close()
-                                    console.log("DEBUG reinit selection dialog")
-                                    return this.init()
-                                })
-                            )
-                        })
+                        import("../edit_dialog/index.js").then(
+                            ({ImageEditDialog}) => {
+                                const targetDB = this.isE2EE()
+                                    ? this.imageDB
+                                    : this.userImageDB
+                                const imageUpload = new ImageEditDialog(
+                                    targetDB,
+                                    false,
+                                    this.page
+                                )
+
+                                resolve(
+                                    imageUpload.init().then(imageId => {
+                                        console.log(
+                                            "DEBUG upload resolved imageId=",
+                                            imageId
+                                        )
+                                        this.imgId = imageId || false
+                                        // For E2EE docs the image goes straight
+                                        // into the document DB, not the user's.
+                                        this.imgDb = this.isE2EE()
+                                            ? "document"
+                                            : "user"
+                                        console.log(
+                                            "DEBUG closing selection dialog"
+                                        )
+                                        this.imageDialog.close()
+                                        console.log(
+                                            "DEBUG reinit selection dialog"
+                                        )
+                                        return this.init()
+                                    })
+                                )
+                            }
+                        )
                     }
                 })
             }
@@ -89,7 +122,7 @@ export class ImageSelectionDialog {
             })
 
             buttons.push({
-                type: "cancel",
+                type: "cancel" as const,
                 click: () => {
                     this.imageDialog.close()
                     resolve(cancelPromise())
@@ -109,14 +142,17 @@ export class ImageSelectionDialog {
         return p
     }
 
-    initTable() {
+    initTable(): void {
         /* Initialize the overview table */
         const tableEl = document.createElement("table")
         tableEl.classList.add("fw-data-table")
         tableEl.classList.add("fw-small")
         const host = this.imageDialog.dialogEl.querySelector(
             "div.image-selection-table"
-        )
+        ) as HTMLElement | null
+        if (!host) {
+            return
+        }
         host.innerHTML = ""
         host.appendChild(tableEl)
 
@@ -154,17 +190,17 @@ export class ImageSelectionDialog {
                 if (selected.length) {
                     const [db, id] = String(selected[0]).split("-")
                     this.imgId = Number.parseInt(id)
-                    this.imgDb = db
+                    this.imgDb = db as "document" | "user"
                 } else {
                     this.imgId = false
                 }
             }
         })
         this.selectionTable.init()
-        this.table = this.selectionTable.table
+        this.table = this.selectionTable.table!
     }
 
-    createTableRow(image) {
+    createTableRow(image: ImageSelectionItem): [string, string, string] {
         return [
             `${image.db}-${image.image.id}`,
             image.image.thumbnail === undefined

package/src/types.ts

@@ -0,0 +1,133 @@
+import type {DataTable} from "simple-datatables"
+import type {ImageDB} from "./database.js"
+
+/** A single license under which an image is available. */
+export interface License {
+    url: string
+    title: string
+    start?: string | false
+}
+
+/** Copyright and licensing information for an image. */
+export interface Copyright {
+    holder?: string | false
+    year?: number | false
+    freeToRead: boolean
+    licenses: License[]
+}
+
+/** A category used to group images. */
+export interface ImageCategory {
+    id: number
+    category_title: string
+}
+
+/** A single image as stored in the client-side image database. */
+export interface Image {
+    id: number
+    title: string
+    file_type: string
+    image: string
+    thumbnail?: string
+    width: number
+    height: number
+    added: number
+    cats: number[]
+    copyright: Copyright
+    [key: string]: unknown
+}
+
+/** End-to-end encryption context passed to dialogs that handle images. */
+export interface E2EEContext {
+    encrypted: boolean
+    key: CryptoKey
+}
+
+/** Subset of the main Fidus Writer app object used by image-manager code. */
+export interface ImageManagerApp {
+    imageDB: ImageDB
+    isOffline: () => boolean
+    settings: {
+        APPS: string[]
+        MEDIA_MAX_SIZE?: number
+        [key: string]: unknown
+    }
+    name: string
+    [key: string]: unknown
+}
+
+/** Page object passed to image dialogs. */
+export interface ImageManagerPage {
+    app: ImageManagerApp
+    e2ee?: E2EEContext
+    menu?: unknown
+    [key: string]: unknown
+}
+
+/** Plugin instance created by the overview's plugin activation. */
+export interface ImageOverviewPlugin {
+    init?: () => Promise<unknown> | unknown
+    [key: string]: unknown
+}
+
+/** Constructor for an image-overview plugin. */
+export interface ImageOverviewPluginConstructor {
+    new (overview: unknown): ImageOverviewPlugin
+}
+
+/** Row displayed in the image overview data table. */
+export type ImageTableRow = [
+    id: number,
+    selected: boolean,
+    file: string,
+    size: string,
+    added: string,
+    actions: string
+]
+
+/** An image selection item coming from either the document or user DB. */
+export interface ImageSelectionItem {
+    image: Image
+    db: "document" | "user"
+}
+
+/** Response body from `POST /api/usermedia/images/`. */
+export interface ImagesResponse {
+    imageCategories: ImageCategory[]
+    images: Image[]
+}
+
+/** Response body from `POST /api/usermedia/save/`. */
+export interface SaveImageResponse {
+    errormsg: Record<string, string> & {error?: string}
+    values: Image
+}
+
+/** Request body for `POST /api/usermedia/save/`. */
+export interface SaveImageRequest {
+    id?: number
+    title: string
+    copyright: Copyright | string
+    cats: (string | number)[]
+    image?: File | Blob
+    original_file_type?: string
+    [key: string]: unknown
+}
+
+/** Request body for `POST /api/usermedia/save_category/`. */
+export interface SaveCategoriesRequest {
+    ids: (string | number)[]
+    titles: string[]
+}
+
+/** Response body from `POST /api/usermedia/save_category/`. */
+export interface SaveCategoriesResponse {
+    entries: ImageCategory[]
+}
+
+/** Request body for `POST /api/usermedia/delete/`. */
+export interface DeleteImagesRequest {
+    ids: (string | number)[]
+}
+
+export type {DataTable}

package/src/database.js

@@ -1,57 +0,0 @@
-import {activateWait, addAlert, deactivateWait, gettext, postJson} from "fwtoolkit"
-
-/* A class that holds information about images uploaded by the user. */
-
-export class ImageDB {
-    constructor(app) {
-        this.app = app
-        this.db = {}
-        this.cats = []
-    }
-
-    getDB() {
-        this.db = {}
-        this.cats = []
-
-        activateWait()
-
-        return postJson("/api/usermedia/images/").then(({json}) => {
-            this.cats = json.imageCategories
-            json.images.forEach(image => {
-                this.db[image.id] = image
-            })
-            deactivateWait()
-            return
-        })
-    }
-
-    saveImage(imageData) {
-        activateWait()
-        const {image, ...jsonData} = imageData
-
-        return postJson("/api/usermedia/save/", jsonData, image ? {image} : {})
-            .then(({json}) => {
-                deactivateWait()
-                if (Object.keys(json.errormsg).length) {
-                    return Promise.reject(new Error(json.errormsg.error))
-                } else {
-                    this.db[json.values.id] = json.values
-                    return json.values.id
-                }
-            })
-            .catch(error => {
-                if (error.status === 413) {
-                    addAlert(
-                        "error",
-                        `${gettext("Image is larger than the maximum permitted size")}${this.app.settings?.MEDIA_MAX_SIZE ? `: ${Number.parseInt(this.app.settings.MEDIA_MAX_SIZE / 1000000)}MB` : "."}`
-                    )
-                } else if (error.message) {
-                    addAlert("error", gettext(error.message))
-                } else {
-                    addAlert("error", gettext(error.statusText))
-                }
-                deactivateWait()
-                throw error
-            })
-    }
-}

package/src/overview/menu.js

@@ -1,75 +0,0 @@
-import {gettext} from "fwtoolkit"
-
-export const bulkMenuModel = () => ({
-    content: [
-        {
-            title: gettext("Delete selected"),
-            tooltip: gettext("Delete selected images."),
-            action: overview => {
-                const ids = overview.getSelected()
-                if (ids.length) {
-                    overview.deleteImageDialog(ids)
-                }
-            },
-            disabled: overview =>
-                !overview.getSelected().length || overview.app.isOffline()
-        }
-    ]
-})
-
-export const menuModel = () => ({
-    content: [
-        {
-            type: "dropdown",
-            id: "cat_selector",
-            keys: "Alt-c",
-            content: [
-                {
-                    title: gettext("All categories"),
-                    action: _overview => {
-                        const trs = document.querySelectorAll(
-                            "#imagelist > tbody > tr"
-                        )
-                        trs.forEach(tr => (tr.style.display = ""))
-                    }
-                }
-            ],
-            order: 1
-        },
-        {
-            type: "text",
-            title: gettext("Edit categories"),
-            keys: "Alt-e",
-            action: overview => overview.mod.categories.editCategoryDialog(),
-            order: 2,
-            disabled: overview => overview.app.isOffline()
-        },
-        {
-            type: "text",
-            title: gettext("Upload new image"),
-            keys: "Alt-u",
-            action: overview => {
-                import("../edit_dialog/index.js").then(({ImageEditDialog}) => {
-                    const imageUpload = new ImageEditDialog(
-                        overview.app.imageDB,
-                        false,
-                        overview
-                    )
-                    imageUpload.init().then(imageId => {
-                        overview.updateTable([imageId])
-                    })
-                })
-            },
-            order: 3,
-            disabled: overview => overview.app.isOffline()
-        },
-        {
-            type: "search",
-            icon: "search",
-            title: gettext("Search images"),
-            keys: "Alt-s",
-            input: (overview, text) => overview.table.search(text),
-            order: 4
-        }
-    ]
-})