@fiduswriter/image-manager 0.1.4 → 0.1.6

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

@@ -1,13 +1,48 @@
 import {CheckableList, ContentMenu, Dialog, addAlert, gettext} from "fwtoolkit"
+import type {CheckableListOptions} from "fwtoolkit"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
 import {E2EEEncryptor} from "fwtoolkit/e2ee/encryptor"
+
 import {imageEditModel} from "./model.js"
 import {imageEditTemplate} from "./templates.js"
+import type {ImageDB} from "../database.js"
+import type {
+    Copyright,
+    Image,
+    ImageCategory,
+    ImageManagerPage,
+    SaveImageRequest
+} from "../types.js"
+
 export class ImageEditDialog {
-    constructor(imageDB, imageId = false, page) {
+    imageDB: ImageDB
+
+    page: ImageManagerPage
+
+    imageId: number | false
+
+    dialog: Dialog | false = false
+
+    copyright: Copyright
+
+    menu: ContentMenuInit
+
+    catsList: CheckableList | {value: (string | number)[]} = {value: []}
+
+    mediaPreviewerDiv?: HTMLElement
+
+    mediaPreviewer?: HTMLElement
+
+    rotation = 0
+
+    cropped = false
+
+    mediaInput?: File
+
+    constructor(imageDB: ImageDB, imageId: number | false = false, page: ImageManagerPage) {
         this.imageDB = imageDB
         this.page = page
         this.imageId = imageId
-        this.dialog = false
         this.copyright = this.imageId
             ? this.imageDB.db[this.imageId].copyright
             : {
@@ -16,17 +51,20 @@ export class ImageEditDialog {
                   freeToRead: true,
                   licenses: []
               }
-        this.menu = this.page.menu?.imageEditModel || imageEditModel()
+        this.menu =
+            (this.page.menu as {imageEditModel?: ContentMenuInit} | undefined)
+                ?.imageEditModel || imageEditModel()
     }
 
     //open a dialog for uploading an image
-    init() {
+    init(): Promise<number | void> {
         if (this.page.app.isOffline()) {
             this.showOffline()
             return Promise.resolve()
         }
-        const returnPromise = new Promise(resolve => {
-            this.dialog = new Dialog({
+        const returnPromise = new Promise<number | void>(resolve => {
+            let dialog: Dialog
+            dialog = new Dialog({
                 title: this.imageId
                     ? gettext("Update Image Information")
                     : gettext("Upload Image"),
@@ -47,25 +85,29 @@ export class ImageEditDialog {
                     {
                         type: "cancel",
                         classes: "fw-orange",
-                        click: () => this.dialog.close()
+                        click: () => dialog.close()
                     }
                 ]
             })
-            this.dialog.open()
+            this.dialog = dialog
+            dialog.open()
         })
 
-        const image = this.imageId ? this.imageDB.db[this.imageId] : false
+        const image: Image | false = this.imageId
+            ? this.imageDB.db[this.imageId]
+            : false
         const catsEl = document.getElementById("image-edit-categories")
         if (catsEl) {
-            this.catsList = new CheckableList({
+            const checkableOptions: CheckableListOptions = {
                 dom: catsEl,
-                options: this.imageDB.cats.map(cat => ({
+                options: this.imageDB.cats.map((cat: ImageCategory) => ({
                     id: cat.id,
                     label: cat.category_title
                 })),
                 initialValue: image ? image.cats : [],
                 multiple: true
-            })
+            }
+            this.catsList = new CheckableList(checkableOptions)
         } else {
             this.catsList = {value: []}
         }
@@ -74,9 +116,9 @@ export class ImageEditDialog {
             this.bindMediaUploadEvents()
         }
 
-        document
-            .querySelector(".figure-edit-menu")
-            .addEventListener("click", event => {
+        const figureEditMenu = document.querySelector(".figure-edit-menu")
+        if (figureEditMenu) {
+            figureEditMenu.addEventListener("click", event => {
                 event.preventDefault()
                 event.stopImmediatePropagation()
 
@@ -84,75 +126,95 @@ export class ImageEditDialog {
                     menu: this.menu,
                     width: 220,
                     page: this,
-                    menuPos: {X: event.pageX - 50, Y: event.pageY + 50}
+                    menuPos: {X: (event as MouseEvent).pageX - 50, Y: (event as MouseEvent).pageY + 50}
                 })
                 contentMenu.open()
             })
+        }
 
         return returnPromise
     }
 
     //add image upload events
-    bindMediaUploadEvents() {
+    bindMediaUploadEvents(): void {
         const selectButton = document.querySelector(
                 "#editimage .fw-media-select-button"
-            ),
+            ) as HTMLButtonElement | null,
             mediaInputSelector = document.querySelector(
                 "#editimage .fw-media-file-input"
-            )
+            ) as HTMLInputElement | null
         this.mediaPreviewerDiv = document.querySelector(
             "#editimage .figure-preview > div"
-        )
+        ) as HTMLElement | null || undefined
         this.rotation = 0
         this.cropped = false
 
+        if (!selectButton || !mediaInputSelector || !this.mediaPreviewerDiv) {
+            return
+        }
+
         selectButton.addEventListener("click", () => {
             mediaInputSelector.click()
         })
 
+        const dialog = this.dialog
+        if (!dialog) {
+            return
+        }
+
         mediaInputSelector.addEventListener("change", () => {
-            this.mediaInput = mediaInputSelector.files[0]
+            this.mediaInput = mediaInputSelector.files![0]
             const fr = new window.FileReader()
             fr.onload = () => {
-                this.mediaPreviewerDiv.innerHTML = `<div class="img" style="background-image: url(${fr.result});" />`
+                this.mediaPreviewerDiv!.innerHTML = `<div class="img" style="background-image: url(${fr.result});" />`
                 this.mediaPreviewer =
-                    this.mediaPreviewerDiv.querySelector(".img")
-                this.mediaPreviewerDiv.classList.remove("crop-mode")
-                this.dialog.centerDialog()
+                    this.mediaPreviewerDiv!.querySelector(".img") || undefined
+                this.mediaPreviewerDiv!.classList.remove("crop-mode")
+                dialog.centerDialog()
             }
             fr.readAsDataURL(this.mediaInput)
         })
     }
 
-    displayCreateImageError(errors) {
+    displayCreateImageError(errors: Record<string, string>): void {
         Object.keys(errors).forEach(eKey => {
             const eMsg = `<div class="fw-warning">${errors[eKey]}</div>`
             if ("error" == eKey) {
                 document
-                    .getElementById("editimage")
+                    .getElementById("editimage")!
                     .insertAdjacentHTML("afterbegin", eMsg)
             } else {
-                document
-                    .getElementById(`id_${eKey}`)
-                    .insertAdjacentHTML("afterend", eMsg)
+                const fieldEl = document.getElementById(`id_${eKey}`)
+                if (fieldEl) {
+                    fieldEl.insertAdjacentHTML("afterend", eMsg)
+                }
             }
         })
     }
 
-    async saveImage() {
-        const imageData = {
-            title: document.querySelector("#editimage .fw-media-title").value,
+    async saveImage(): Promise<number | void> {
+        const titleInput = document.querySelector(
+            "#editimage .fw-media-title"
+        ) as HTMLInputElement | null
+        const imageData: SaveImageRequest = {
+            title: titleInput ? titleInput.value : "",
             copyright: this.copyright,
             cats: this.catsList.value
         }
         if (this.imageId) {
             imageData.id = this.imageId
-        } else if (!this.rotation && !this.cropped) {
+        } else if (!this.rotation && !this.cropped && this.mediaInput) {
             imageData.image = this.mediaInput
-        } else {
+        } else if (this.mediaPreviewer && this.mediaInput) {
+            const mediaPreviewer = this.mediaPreviewer as HTMLElement & {
+                currentStyle?: CSSStyleDeclaration
+            }
             const mediaPreviewerStyle =
-                this.mediaPreviewer.currentStyle ||
-                window.getComputedStyle(this.mediaPreviewer, false)
+                mediaPreviewer.currentStyle ||
+                window.getComputedStyle(
+                    mediaPreviewer,
+                    false as unknown as string | null
+                )
             const base64data = mediaPreviewerStyle.backgroundImage
                 .slice(4, -1)
                 .replace(/"/g, "")
@@ -171,25 +233,28 @@ export class ImageEditDialog {
         const isE2EE = this.page.e2ee?.encrypted === true
         if (isE2EE && imageData.image) {
             imageData.image = await E2EEEncryptor.encryptImage(
-                imageData.image,
-                this.page.e2ee.key
+                imageData.image as File | Blob,
+                this.page.e2ee!.key
             )
             imageData.original_file_type = this.mediaInput?.type || "image/png"
             // Encrypt copyright metadata so the server cannot read it
             imageData.copyright = await E2EEEncryptor.encryptObject(
                 imageData.copyright,
-                this.page.e2ee.key
+                this.page.e2ee!.key
             )
         }
 
         // Remove old warning messages
         document
             .querySelectorAll("#editimage .fw-warning")
-            .forEach(el => el.parentElement.removeChild(el))
-        return new Promise(resolve => {
+            .forEach(el => el.parentElement!.removeChild(el))
+        return new Promise<number | void>(resolve => {
+            const dialog = this.dialog
             this.imageDB.saveImage(imageData).then(
                 imageId => {
-                    this.dialog.close()
+                    if (dialog) {
+                        dialog.close()
+                    }
                     addAlert("success", gettext("The image has been updated."))
                     this.imageId = imageId
                     resolve(imageId)
@@ -199,7 +264,7 @@ export class ImageEditDialog {
                         this.showOffline()
                         return
                     }
-                    this.displayCreateImageError(errors)
+                    this.displayCreateImageError(errors as Record<string, string>)
                     addAlert(
                         "error",
                         gettext(
@@ -211,7 +276,7 @@ export class ImageEditDialog {
         })
     }
 
-    showOffline() {
+    showOffline(): void {
         addAlert(
             "info",
             gettext(

package/src/edit_dialog/{model.js → model.ts}

@@ -1,40 +1,56 @@
 import Cropper from "cropperjs"
 
 import {gettext} from "fwtoolkit"
-import {CopyrightDialog} from "@fiduswriter/image-manager/copyright_dialog/index"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
+import type {Dialog as FwDialog} from "fwtoolkit/dialog"
 
-let mediaPreviewerImg = false
+import {CopyrightDialog} from "../copyright_dialog/index.js"
+import type {ImageEditDialog} from "./index.js"
 
-export const imageEditModel = () => ({
+let mediaPreviewerImg: HTMLImageElement | false = false
+
+export const imageEditModel = (): ContentMenuInit => ({
     content: [
         {
             title: gettext("Rotate Left"),
             type: "action",
             tooltip: gettext("Rotate-left"),
             order: 0,
-            action: dialog => {
+            action: (dialog: unknown) => {
+                const d = dialog as ImageEditDialog
+                const mediaPreviewer = d.mediaPreviewer as
+                    | (HTMLElement & {
+                        currentStyle?: CSSStyleDeclaration
+                    })
+                    | undefined
+                if (!mediaPreviewer) {
+                    return
+                }
                 const mediaPreviewerStyle =
-                    dialog.mediaPreviewer.currentStyle ||
-                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                    mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(
+                        mediaPreviewer,
+                        false as unknown as string | null
+                    )
                 rotateBase64Image(
                     mediaPreviewerStyle.backgroundImage
                         .slice(4, -1)
                         .replace(/"/g, ""),
-                    dialog.mediaInput.type,
+                    d.mediaInput!.type,
                     "left"
                 ).then(response =>
-                    dialog.mediaPreviewer.setAttribute(
+                    d.mediaPreviewer!.setAttribute(
                         "style",
                         `background-image: url(${response});`
                     )
                 )
-                if (dialog.rotation === 0) {
-                    dialog.rotation = 270
+                if (d.rotation === 0) {
+                    d.rotation = 270
                 } else {
-                    dialog.rotation -= 90
+                    d.rotation -= 90
                 }
             },
-            disabled: dialog => dialog.imageId,
+            disabled: (dialog: unknown) => !!(dialog as ImageEditDialog).imageId,
             icon: "redo fa-rotate-180"
         },
         {
@@ -42,29 +58,41 @@ export const imageEditModel = () => ({
             type: "action",
             tooltip: gettext("Rotate-right"),
             order: 1,
-            action: dialog => {
+            action: (dialog: unknown) => {
+                const d = dialog as ImageEditDialog
+                const mediaPreviewer = d.mediaPreviewer as
+                    | (HTMLElement & {
+                        currentStyle?: CSSStyleDeclaration
+                    })
+                    | undefined
+                if (!mediaPreviewer) {
+                    return
+                }
                 const mediaPreviewerStyle =
-                    dialog.mediaPreviewer.currentStyle ||
-                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                    mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(
+                        mediaPreviewer,
+                        false as unknown as string | null
+                    )
                 rotateBase64Image(
                     mediaPreviewerStyle.backgroundImage
                         .slice(4, -1)
                         .replace(/"/g, ""),
-                    dialog.mediaInput.type,
+                    d.mediaInput!.type,
                     "right"
                 ).then(response =>
-                    dialog.mediaPreviewer.setAttribute(
+                    d.mediaPreviewer!.setAttribute(
                         "style",
                         `background-image: url(${response});`
                     )
                 )
-                if (dialog.rotation === 270) {
-                    dialog.rotation = 0
+                if (d.rotation === 270) {
+                    d.rotation = 0
                 } else {
-                    dialog.rotation += 90
+                    d.rotation += 90
                 }
             },
-            disabled: dialog => dialog.imageId,
+            disabled: (dialog: unknown) => !!(dialog as ImageEditDialog).imageId,
             icon: "undo"
         },
         {
@@ -72,27 +100,39 @@ export const imageEditModel = () => ({
             type: "action",
             tooltip: gettext("Crop image"),
             order: 2,
-            action: dialog => {
+            action: (dialog: unknown) => {
+                const d = dialog as ImageEditDialog
+                const mediaPreviewer = d.mediaPreviewer as
+                    | (HTMLElement & {
+                        currentStyle?: CSSStyleDeclaration
+                    })
+                    | undefined
+                if (!mediaPreviewer) {
+                    return
+                }
                 const mediaPreviewerStyle =
-                    dialog.mediaPreviewer.currentStyle ||
-                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                    mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(
+                        mediaPreviewer,
+                        false as unknown as string | null
+                    )
                 //const base64data = mediaPreviewerStyle.backgroundImage.slice(4, -1).replace(/"/g, "")
                 mediaPreviewerImg = document.createElement("img")
                 //img.src = `url(${base64data})`
                 mediaPreviewerImg.src = mediaPreviewerStyle.backgroundImage
                     .slice(4, -1)
                     .replace(/"/g, "")
-                dialog.mediaPreviewer.parentElement.replaceChild(
+                d.mediaPreviewer!.parentElement!.replaceChild(
                     mediaPreviewerImg,
-                    dialog.mediaPreviewer
+                    d.mediaPreviewer!
                 )
                 const cropper = new Cropper(mediaPreviewerImg, {
                     viewMode: 1,
                     responsive: true
                 })
-                toggleCropMode(true, dialog, cropper)
+                toggleCropMode(true, d, cropper)
             },
-            disabled: dialog => dialog.imageId,
+            disabled: (dialog: unknown) => !!(dialog as ImageEditDialog).imageId,
             icon: "crop"
         },
         {
@@ -100,11 +140,12 @@ export const imageEditModel = () => ({
             type: "action",
             tooltip: gettext("Specify copyright information"),
             order: 3,
-            action: dialog => {
-                const crDialog = new CopyrightDialog(dialog.copyright)
+            action: (dialog: unknown) => {
+                const d = dialog as ImageEditDialog
+                const crDialog = new CopyrightDialog(d.copyright)
                 crDialog.init().then(copyright => {
                     if (copyright) {
-                        dialog.copyright = copyright
+                        d.copyright = copyright
                     }
                 })
             }
@@ -112,21 +153,25 @@ export const imageEditModel = () => ({
     ]
 })
 
-let oldButtons = false
+let oldButtons: FwDialog["buttons"] | false = false
 
-const toggleCropMode = (val, dialog, cropper) => {
+const toggleCropMode = (val: boolean, dialog: ImageEditDialog, cropper: Cropper) => {
+    if (!dialog.dialog) {
+        return
+    }
+    const dialogEl = dialog.dialog
     if (val && !oldButtons) {
-        dialog.mediaPreviewerDiv.classList.add("crop-mode")
-        oldButtons = dialog.dialog.buttons
-        dialog.dialog.setButtons([
+        dialog.mediaPreviewerDiv!.classList.add("crop-mode")
+        oldButtons = dialogEl.buttons
+        dialogEl.setButtons([
             {
                 text: gettext("Crop"),
                 click: () => {
-                    dialog.mediaPreviewer.setAttribute(
+                    dialog.mediaPreviewer!.setAttribute(
                         "style",
                         `background-image: url(${cropper
                             .getCroppedCanvas()
-                            .toDataURL(dialog.mediaInput.type)});`
+                            .toDataURL(dialog.mediaInput!.type)});`
                     )
                     dialog.cropped = true
                     cropper.destroy()
@@ -144,27 +189,31 @@ const toggleCropMode = (val, dialog, cropper) => {
             }
         ])
     } else {
-        dialog.mediaPreviewerDiv.classList.remove("crop-mode")
+        dialog.mediaPreviewerDiv!.classList.remove("crop-mode")
         if (mediaPreviewerImg) {
-            mediaPreviewerImg.parentElement.replaceChild(
-                dialog.mediaPreviewer,
+            mediaPreviewerImg.parentElement!.replaceChild(
+                dialog.mediaPreviewer!,
                 mediaPreviewerImg
             )
             mediaPreviewerImg = false
         }
         if (oldButtons) {
-            dialog.dialog.buttons = oldButtons
+            dialogEl.buttons = oldButtons
             oldButtons = false
         }
     }
-    dialog.dialog.refreshButtons()
-    dialog.dialog.centerDialog()
+    dialogEl.refreshButtons()
+    dialogEl.centerDialog()
 }
 
-const rotateBase64Image = (base64data, type, direction) => {
+const rotateBase64Image = (
+    base64data: string,
+    type: string,
+    direction: "left" | "right"
+): Promise<string> => {
     return new Promise(resolve => {
         const canvas = document.createElement("canvas")
-        const ctx = canvas.getContext("2d")
+        const ctx = canvas.getContext("2d")!
         const image = new Image()
         image.src = base64data
         image.onload = () => {

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

@@ -1,7 +1,18 @@
 import {escapeText, gettext} from "fwtoolkit"
 
+import type {Image, ImageCategory} from "../types.js"
+
+interface ImageEditCategoryTemplateData {
+    cats: ImageCategory[]
+}
+
+interface ImageEditTemplateData {
+    image: Image | false
+    cats: ImageCategory[]
+}
+
 /* A template for the image category selection of the image selection dialog. */
-const imageEditCategoryTemplate = ({cats}) => {
+const imageEditCategoryTemplate = ({cats}: ImageEditCategoryTemplateData) => {
     if (!cats.length) {
         return ""
     }
@@ -12,7 +23,7 @@ const imageEditCategoryTemplate = ({cats}) => {
 }
 
 /* A template for the form for the image upload dialog. */
-export const imageEditTemplate = ({image, cats}) =>
+export const imageEditTemplate = ({image, cats}: ImageEditTemplateData) =>
     `<div>
         <input name="title" class="fw-media-title" type="text"
                 placeholder="${gettext("Insert a title")}" value="${

package/src/global.d.ts

@@ -0,0 +1,37 @@
+// Ambient declarations for dependencies without bundled types.
+
+declare module "@fiduswriter/common/common" {
+    export function baseBodyTemplate(...args: unknown[]): string
+}
+
+declare module "@fiduswriter/common/feedback" {
+    export class FeedbackTab {
+        init(): void
+    }
+}
+
+declare module "@fiduswriter/common/menu" {
+    export class SiteMenu {
+        constructor(app: unknown, section: string)
+        init(): void
+    }
+}
+
+// Globals provided by the Fidus Writer host page.
+
+declare function gettext(msgid: string): string
+
+declare function interpolate(
+    fmt: string,
+    args: unknown[],
+    named?: boolean
+): string
+
+declare function staticUrl(path: string): string
+
+declare const settings: Record<string, unknown>
+
+interface Window {
+    settings?: Record<string, unknown>
+    csrfToken?: string
+}