@fiduswriter/image-manager 0.1.0

package/src/edit_dialog/index.js

@@ -0,0 +1,222 @@
+import {CheckableList, ContentMenu, Dialog, addAlert, gettext} from "fwtoolkit"
+import {E2EEEncryptor} from "fwtoolkit/e2ee/encryptor"
+import {imageEditModel} from "./model"
+import {imageEditTemplate} from "./templates"
+export class ImageEditDialog {
+    constructor(imageDB, imageId = false, page) {
+        this.imageDB = imageDB
+        this.page = page
+        this.imageId = imageId
+        this.dialog = false
+        this.copyright = this.imageId
+            ? this.imageDB.db[this.imageId].copyright
+            : {
+                  holder: false,
+                  year: false,
+                  freeToRead: true,
+                  licenses: []
+              }
+        this.menu = this.page.menu?.imageEditModel || imageEditModel()
+    }
+
+    //open a dialog for uploading an image
+    init() {
+        if (this.page.app.isOffline()) {
+            this.showOffline()
+            return Promise.resolve()
+        }
+        const returnPromise = new Promise(resolve => {
+            this.dialog = new Dialog({
+                title: this.imageId
+                    ? gettext("Update Image Information")
+                    : gettext("Upload Image"),
+                id: "editimage",
+                classes: "fw-media-uploader",
+                body: imageEditTemplate({
+                    image: this.imageId ? this.imageDB.db[this.imageId] : false,
+                    cats: this.imageDB.cats
+                }),
+                buttons: [
+                    {
+                        text: this.imageId
+                            ? gettext("Update")
+                            : gettext("Upload"),
+                        click: () => resolve(this.saveImage()),
+                        classes: "fw-dark"
+                    },
+                    {
+                        type: "cancel",
+                        classes: "fw-orange",
+                        click: () => this.dialog.close()
+                    }
+                ]
+            })
+            this.dialog.open()
+        })
+
+        const image = this.imageId ? this.imageDB.db[this.imageId] : false
+        const catsEl = document.getElementById("image-edit-categories")
+        if (catsEl) {
+            this.catsList = new CheckableList({
+                dom: catsEl,
+                options: this.imageDB.cats.map(cat => ({
+                    id: cat.id,
+                    label: cat.category_title
+                })),
+                initialValue: image ? image.cats : [],
+                multiple: true
+            })
+        } else {
+            this.catsList = {value: []}
+        }
+
+        if (!this.imageId) {
+            this.bindMediaUploadEvents()
+        }
+
+        document
+            .querySelector(".figure-edit-menu")
+            .addEventListener("click", event => {
+                event.preventDefault()
+                event.stopImmediatePropagation()
+
+                const contentMenu = new ContentMenu({
+                    menu: this.menu,
+                    width: 220,
+                    page: this,
+                    menuPos: {X: event.pageX - 50, Y: event.pageY + 50}
+                })
+                contentMenu.open()
+            })
+
+        return returnPromise
+    }
+
+    //add image upload events
+    bindMediaUploadEvents() {
+        const selectButton = document.querySelector(
+                "#editimage .fw-media-select-button"
+            ),
+            mediaInputSelector = document.querySelector(
+                "#editimage .fw-media-file-input"
+            )
+        this.mediaPreviewerDiv = document.querySelector(
+            "#editimage .figure-preview > div"
+        )
+        this.rotation = 0
+        this.cropped = false
+
+        selectButton.addEventListener("click", () => {
+            mediaInputSelector.click()
+        })
+
+        mediaInputSelector.addEventListener("change", () => {
+            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.mediaPreviewer =
+                    this.mediaPreviewerDiv.querySelector(".img")
+                this.mediaPreviewerDiv.classList.remove("crop-mode")
+                this.dialog.centerDialog()
+            }
+            fr.readAsDataURL(this.mediaInput)
+        })
+    }
+
+    displayCreateImageError(errors) {
+        Object.keys(errors).forEach(eKey => {
+            const eMsg = `<div class="fw-warning">${errors[eKey]}</div>`
+            if ("error" == eKey) {
+                document
+                    .getElementById("editimage")
+                    .insertAdjacentHTML("afterbegin", eMsg)
+            } else {
+                document
+                    .getElementById(`id_${eKey}`)
+                    .insertAdjacentHTML("afterend", eMsg)
+            }
+        })
+    }
+
+    async saveImage() {
+        const imageData = {
+            title: document.querySelector("#editimage .fw-media-title").value,
+            copyright: this.copyright,
+            cats: this.catsList.value
+        }
+        if (this.imageId) {
+            imageData.id = this.imageId
+        } else if (!this.rotation && !this.cropped) {
+            imageData.image = this.mediaInput
+        } else {
+            const mediaPreviewerStyle =
+                this.mediaPreviewer.currentStyle ||
+                window.getComputedStyle(this.mediaPreviewer, false)
+            const base64data = mediaPreviewerStyle.backgroundImage
+                .slice(4, -1)
+                .replace(/"/g, "")
+            const bstr = atob(base64data.split(",")[1])
+            let n = bstr.length
+            const u8arr = new Uint8Array(n)
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n)
+            }
+            imageData.image = new File([u8arr], this.mediaInput.name, {
+                type: this.mediaInput.type
+            })
+        }
+
+        // For E2EE documents, encrypt the image and copyright before uploading
+        const isE2EE = this.page.e2ee?.encrypted === true
+        if (isE2EE && imageData.image) {
+            imageData.image = await E2EEEncryptor.encryptImage(
+                imageData.image,
+                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
+            )
+        }
+
+        // Remove old warning messages
+        document
+            .querySelectorAll("#editimage .fw-warning")
+            .forEach(el => el.parentElement.removeChild(el))
+        return new Promise(resolve => {
+            this.imageDB.saveImage(imageData).then(
+                imageId => {
+                    this.dialog.close()
+                    addAlert("success", gettext("The image has been updated."))
+                    this.imageId = imageId
+                    resolve(imageId)
+                },
+                errors => {
+                    if (this.page.app.isOffline()) {
+                        this.showOffline()
+                        return
+                    }
+                    this.displayCreateImageError(errors)
+                    addAlert(
+                        "error",
+                        gettext(
+                            "Some errors were found. Please examine the form."
+                        )
+                    )
+                }
+            )
+        })
+    }
+
+    showOffline() {
+        addAlert(
+            "info",
+            gettext(
+                "You are currently offline. Please try again after going online."
+            )
+        )
+    }
+}

package/src/edit_dialog/model.js

@@ -0,0 +1,184 @@
+import Cropper from "cropperjs"
+
+import {gettext} from "fwtoolkit"
+import {CopyrightDialog} from "../../copyright_dialog"
+
+let mediaPreviewerImg = false
+
+export const imageEditModel = () => ({
+    content: [
+        {
+            title: gettext("Rotate Left"),
+            type: "action",
+            tooltip: gettext("Rotate-left"),
+            order: 0,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                rotateBase64Image(
+                    mediaPreviewerStyle.backgroundImage
+                        .slice(4, -1)
+                        .replace(/"/g, ""),
+                    dialog.mediaInput.type,
+                    "left"
+                ).then(response =>
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${response});`
+                    )
+                )
+                if (dialog.rotation === 0) {
+                    dialog.rotation = 270
+                } else {
+                    dialog.rotation -= 90
+                }
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "redo fa-rotate-180"
+        },
+        {
+            title: gettext("Rotate Right"),
+            type: "action",
+            tooltip: gettext("Rotate-right"),
+            order: 1,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                rotateBase64Image(
+                    mediaPreviewerStyle.backgroundImage
+                        .slice(4, -1)
+                        .replace(/"/g, ""),
+                    dialog.mediaInput.type,
+                    "right"
+                ).then(response =>
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${response});`
+                    )
+                )
+                if (dialog.rotation === 270) {
+                    dialog.rotation = 0
+                } else {
+                    dialog.rotation += 90
+                }
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "undo"
+        },
+        {
+            title: gettext("Crop"),
+            type: "action",
+            tooltip: gettext("Crop image"),
+            order: 2,
+            action: dialog => {
+                const mediaPreviewerStyle =
+                    dialog.mediaPreviewer.currentStyle ||
+                    window.getComputedStyle(dialog.mediaPreviewer, false)
+                //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(
+                    mediaPreviewerImg,
+                    dialog.mediaPreviewer
+                )
+                const cropper = new Cropper(mediaPreviewerImg, {
+                    viewMode: 1,
+                    responsive: true
+                })
+                toggleCropMode(true, dialog, cropper)
+            },
+            disabled: dialog => dialog.imageId,
+            icon: "crop"
+        },
+        {
+            title: gettext("Set Copyright"),
+            type: "action",
+            tooltip: gettext("Specify copyright information"),
+            order: 3,
+            action: dialog => {
+                const crDialog = new CopyrightDialog(dialog.copyright)
+                crDialog.init().then(copyright => {
+                    if (copyright) {
+                        dialog.copyright = copyright
+                    }
+                })
+            }
+        }
+    ]
+})
+
+let oldButtons = false
+
+const toggleCropMode = (val, dialog, cropper) => {
+    if (val && !oldButtons) {
+        dialog.mediaPreviewerDiv.classList.add("crop-mode")
+        oldButtons = dialog.dialog.buttons
+        dialog.dialog.setButtons([
+            {
+                text: gettext("Crop"),
+                click: () => {
+                    dialog.mediaPreviewer.setAttribute(
+                        "style",
+                        `background-image: url(${cropper
+                            .getCroppedCanvas()
+                            .toDataURL(dialog.mediaInput.type)});`
+                    )
+                    dialog.cropped = true
+                    cropper.destroy()
+                    toggleCropMode(false, dialog, cropper)
+                },
+                classes: "fw-dark"
+            },
+            {
+                type: "cancel",
+                classes: "fw-orange",
+                click: () => {
+                    cropper.destroy()
+                    toggleCropMode(false, dialog, cropper)
+                }
+            }
+        ])
+    } else {
+        dialog.mediaPreviewerDiv.classList.remove("crop-mode")
+        if (mediaPreviewerImg) {
+            mediaPreviewerImg.parentElement.replaceChild(
+                dialog.mediaPreviewer,
+                mediaPreviewerImg
+            )
+            mediaPreviewerImg = false
+        }
+        if (oldButtons) {
+            dialog.dialog.buttons = oldButtons
+            oldButtons = false
+        }
+    }
+    dialog.dialog.refreshButtons()
+    dialog.dialog.centerDialog()
+}
+
+const rotateBase64Image = (base64data, type, direction) => {
+    return new Promise(resolve => {
+        const canvas = document.createElement("canvas")
+        const ctx = canvas.getContext("2d")
+        const image = new Image()
+        image.src = base64data
+        image.onload = () => {
+            canvas.height = image.width
+            canvas.width = image.height
+            if (direction == "left") {
+                ctx.rotate((90 * Math.PI) / 180)
+                ctx.translate(0, -canvas.width)
+            } else {
+                ctx.rotate((-90 * Math.PI) / 180)
+                ctx.translate(-canvas.height, 0)
+            }
+            ctx.drawImage(image, 0, 0)
+            resolve(canvas.toDataURL(type))
+        }
+    })
+}

package/src/edit_dialog/templates.js

@@ -0,0 +1,41 @@
+import {escapeText, gettext} from "fwtoolkit"
+
+/* A template for the image category selection of the image selection dialog. */
+const imageEditCategoryTemplate = ({cats}) => {
+    if (!cats.length) {
+        return ""
+    }
+    return `<div class="fw-media-category">
+            <div>${gettext("Select categories")}</div>
+            <div id="image-edit-categories"></div>
+        </div>`
+}
+
+/* A template for the form for the image upload dialog. */
+export const imageEditTemplate = ({image, cats}) =>
+    `<div>
+        <input name="title" class="fw-media-title" type="text"
+                placeholder="${gettext("Insert a title")}" value="${
+                    image ? escapeText(image.title) : ""
+                }" />
+        ${
+            image
+                ? ""
+                : `<button type="button" class="fw-media-select-button fw-button fw-light">
+                ${gettext("Select a file")}
+            </button>
+            <input name="image" type="file" class="fw-media-file-input">`
+        }
+    </div>
+    <div class="figure-preview">
+        <button class="figure-edit-menu" title="${gettext("Edit Image")}">
+            <span class="dot-menu-icon"><i class="fa fa-ellipsis-v"></i></span>
+        </button>
+    <div>
+        ${
+            image && image.image
+                ? `<div class="img" style="background-image: url(${image.image});"></div>`
+                : ""
+        }
+    </div></div>
+    ${imageEditCategoryTemplate({cats})}`

package/src/index.js

@@ -0,0 +1,4 @@
+export {ImageDB} from "./database.js"
+export {ImageOverview} from "./overview/index.js"
+export {ImageEditDialog} from "./edit_dialog/index.js"
+export {ImageSelectionDialog} from "./selection_dialog/index.js"

package/src/overview/categories.js

@@ -0,0 +1,115 @@
+import {
+    Dialog,
+    activateWait,
+    addAlert,
+    deactivateWait,
+    gettext,
+    postJson
+} from "fwtoolkit"
+import {usermediaEditcategoriesTemplate} from "./templates"
+
+export class ImageOverviewCategories {
+    constructor(imageOverview) {
+        this.imageOverview = imageOverview
+        imageOverview.mod.categories = this
+    }
+
+    //save changes or create a new category
+    saveCategories(cats) {
+        activateWait()
+
+        postJson("/api/usermedia/save_category/", {
+            ids: cats.ids,
+            titles: cats.titles
+        })
+            .catch(error => {
+                addAlert("error", gettext("Could not update categories"))
+                deactivateWait()
+                throw error
+            })
+            .then(({json}) => {
+                this.imageOverview.app.imageDB.cats = json.entries
+                this.setImageCategoryList(json.entries)
+                addAlert("success", gettext("The categories have been updated"))
+                deactivateWait()
+            })
+    }
+
+    setImageCategoryList(imageCategories) {
+        const catSelector = this.imageOverview.menu.model.content.find(
+            menuItem => menuItem.id === "cat_selector"
+        )
+        catSelector.content = catSelector.content.filter(
+            cat => cat.type !== "category"
+        )
+        catSelector.content = catSelector.content.concat(
+            imageCategories.map(cat => ({
+                type: "category",
+                title: cat.category_title,
+                action: _overview => {
+                    const trs = document.querySelectorAll(
+                        "#imagelist > tbody > tr"
+                    )
+                    trs.forEach(tr => {
+                        if (
+                            tr
+                                .querySelector(".fw-usermedia-image")
+                                .classList.contains(`cat_${cat.id}`)
+                        ) {
+                            tr.style.display = ""
+                        } else {
+                            tr.style.display = "none"
+                        }
+                    })
+                }
+            }))
+        )
+        this.imageOverview.menu.update()
+    }
+
+    //open a dialog for editing categories
+    editCategoryDialog() {
+        const buttons = [
+            {
+                text: gettext("Submit"),
+                classes: "fw-dark",
+                click: () => {
+                    const cats = {
+                        ids: [],
+                        titles: []
+                    }
+                    document
+                        .querySelectorAll("#edit-categories .category-form")
+                        .forEach(el => {
+                            const thisVal = el.value.trim()
+                            let thisId = el.dataset.id
+                            if ("undefined" == typeof thisId) {
+                                thisId = 0
+                            }
+                            if ("" !== thisVal) {
+                                cats.ids.push(thisId)
+                                cats.titles.push(thisVal)
+                            }
+                        })
+                    this.saveCategories(cats)
+                    dialog.close()
+                }
+            },
+            {
+                type: "cancel"
+            }
+        ]
+
+        const dialog = new Dialog({
+            id: "edit-categories",
+            title: gettext("Edit Categories"),
+            body: usermediaEditcategoriesTemplate({
+                categories: this.imageOverview.app.imageDB.cats
+            }),
+            width: 350,
+            height: 350,
+            buttons
+        })
+        dialog.open()
+    }
+}