@fiduswriter/image-manager 0.1.0

package/dist/selection_dialog/index.js

@@ -0,0 +1,149 @@
+import { Dialog, SelectionDataTable, cancelPromise, escapeText, gettext } from "fwtoolkit";
+export class ImageSelectionDialog {
+    constructor(imageDB, userImageDB, imgId, page) {
+        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
+        this.images = []; // images from both databases
+    }
+    isE2EE() {
+        return this.page.e2ee?.encrypted === true;
+    }
+    init() {
+        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"
+            };
+        });
+        Object.values(this.userImageDB.db).forEach(image => {
+            if (this.imageDB.db[image.id]) {
+                return;
+            }
+            this.images.push({
+                image,
+                db: "user"
+            });
+        });
+        console.log("DEBUG selection images=", this.images.length);
+        const buttons = [];
+        const p = new Promise(resolve => {
+            if (!this.page.app.isOffline()) {
+                buttons.push({
+                    text: gettext("Add new image"),
+                    icon: "plus-circle",
+                    click: () => {
+                        import("../edit_dialog").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();
+                            }));
+                        });
+                    }
+                });
+            }
+            buttons.push({
+                text: gettext("Use image"),
+                classes: "fw-dark",
+                click: () => {
+                    this.imageDialog.close();
+                    resolve({ id: this.imgId, db: this.imgDb });
+                }
+            });
+            buttons.push({
+                type: "cancel",
+                click: () => {
+                    this.imageDialog.close();
+                    resolve(cancelPromise());
+                }
+            });
+        });
+        this.imageDialog = new Dialog({
+            buttons,
+            width: 300,
+            body: '<div class="image-selection-table"></div>',
+            title: gettext("Images"),
+            id: "select-image-dialog"
+        });
+        this.imageDialog.open();
+        this.initTable();
+        this.imageDialog.centerDialog();
+        return p;
+    }
+    initTable() {
+        /* 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");
+        host.innerHTML = "";
+        host.appendChild(tableEl);
+        const selectedIds = this.imgId === false ? [] : [`${this.imgDb}-${this.imgId}`];
+        this.selectionTable = new SelectionDataTable({
+            dom: host,
+            classes: ["fw-data-table", "fw-small"],
+            columns: [
+                {
+                    select: 0,
+                    hidden: true
+                },
+                {
+                    select: [0, 2],
+                    type: "string"
+                },
+                {
+                    select: [1, 3],
+                    sortable: false
+                }
+            ],
+            data: this.images.map(image => this.createTableRow(image)),
+            idColumn: 0,
+            multiple: false,
+            selectedIds,
+            scrollY: "270px",
+            labels: {
+                noRows: gettext("No images available"), // Message shown when there are no images
+                noResults: gettext("No images found"), // Message shown when no images are found after search
+                placeholder: gettext("Search...") // placeholder for search field
+            },
+            onChange: selected => {
+                if (selected.length) {
+                    const [db, id] = String(selected[0]).split("-");
+                    this.imgId = Number.parseInt(id);
+                    this.imgDb = db;
+                }
+                else {
+                    this.imgId = false;
+                }
+            }
+        });
+        this.selectionTable.init();
+        this.table = this.selectionTable.table;
+    }
+    createTableRow(image) {
+        return [
+            `${image.db}-${image.image.id}`,
+            image.image.thumbnail === undefined
+                ? `<img src="${image.image.image}" style="max-heigth:30px;max-width:30px;">`
+                : `<img src="${image.image.thumbnail}" style="max-heigth:30px;max-width:30px;">`,
+            escapeText(image.image.title)
+        ];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/selection_dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/selection_dialog/index.js"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@fiduswriter/image-manager",
+    "version": "0.1.0",
+    "description": "Fidus Writer image/media manager",
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@codeberg.org/fiduswriter/fiduswriter-image-manager-js.git"
+    },
+    "license": "AGPL-3.0",
+    "author": "Johannes Wilm",
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./*": {
+            "types": "./dist/*.d.ts",
+            "default": "./dist/*.js"
+        }
+    },
+    "files": [
+        "dist/",
+        "src/",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "prepare": "npm run build",
+        "prepublishOnly": "npm run build",
+        "typecheck": "tsc --noEmit",
+        "lint": "eslint src",
+        "lint:fix": "eslint src --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check ."
+    },
+    "dependencies": {
+        "@fiduswriter/common": "^0.1.4",
+        "cropperjs": "^1.6.2",
+        "fwtoolkit": "^0.1.9"
+    },
+    "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "eslint": "^10.6.0",
+        "globals": "^15.15.0",
+        "prettier": "^3.5.3",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.62.0"
+    }
+}

package/src/copyright_dialog/index.js

@@ -0,0 +1,179 @@
+import {edtfParse} from "bibliojson"
+import deepEqual from "fast-deep-equal"
+import {Dialog, InputList, TypeSwitch, escapeText} from "fwtoolkit"
+import {
+    copyrightTemplate,
+    licenseInputTemplate,
+    licenseSelectTemplate
+} from "./templates"
+
+export const LICENSE_URLS = [
+    ["CC BY 4.0", "https://creativecommons.org/licenses/by/4.0/"],
+    ["CC BY-SA 4.0", "https://creativecommons.org/licenses/by-sa/4.0/"],
+    ["CC BY-ND 4.0", "https://creativecommons.org/licenses/by-nd/4.0/"],
+    ["CC BY-NC 4.0", "https://creativecommons.org/licenses/by-nc/4.0/"],
+    ["CC BY-NC-SA 4.0", "https://creativecommons.org/licenses/by-nc-sa/4.0/"],
+    ["CC BY-NC-ND 4.0", "https://creativecommons.org/licenses/by-nc-nd/4.0/"],
+    ["CC0", "https://creativecommons.org/publicdomain/zero/1.0/"]
+]
+
+function getLicenseTitle(url) {
+    const license = LICENSE_URLS.find(license => license[1] === url)
+    return license ? license[0] : ""
+}
+
+export class CopyrightDialog {
+    constructor(copyright) {
+        this.copyright = copyright
+        this.origCopyright = copyright
+        this.dialog = false
+    }
+
+    getCurrentValue() {
+        this.copyright = {}
+        const holder = this.dialog.dialogEl.querySelector(".holder").value
+        this.copyright.holder = holder.length ? holder : false
+        const year = this.dialog.dialogEl.querySelector(".year").value
+        this.copyright.year = year.length
+            ? Math.max(0, Math.min(Number.parseInt(year) || 0, 2100))
+            : false
+        this.copyright.freeToRead = this.dialog.dialogEl.querySelector(
+            ".free-to-read:checked"
+        )
+            ? true
+            : false
+        const licenseStartDates = Array.from(
+            this.dialog.dialogEl.querySelectorAll(".license-start")
+        ).map(el => el.value)
+        this.copyright.licenses = this.licensesList.values
+            .map((license, index) => {
+                if (!license.url.length) {
+                    return false
+                }
+                const returnValue = {
+                    url: license.url,
+                    title: license.title
+                }
+                const startDate = edtfParse(licenseStartDates[index])
+                if (
+                    startDate.valid &&
+                    (startDate.type === "Date" ||
+                        startDate.type === "YearMonth" ||
+                        startDate.type === "Year") &&
+                    !startDate.uncertain &&
+                    !startDate.approximate
+                ) {
+                    returnValue.start = startDate.cleanedString
+                }
+                return returnValue
+            })
+            .filter(license => license)
+    }
+
+    init() {
+        return new Promise(resolve => {
+            const buttons = []
+            buttons.push({
+                text: gettext("Change"),
+                classes: "fw-dark",
+                click: () => {
+                    this.dialog.close()
+                    this.getCurrentValue()
+                    if (deepEqual(this.copyright, this.origCopyright)) {
+                        // No change.
+                        resolve(false)
+                    }
+                    resolve(this.copyright)
+                }
+            })
+
+            buttons.push({
+                type: "cancel"
+            })
+
+            this.dialog = new Dialog({
+                width: 940,
+                height: 300,
+                id: "configure-copyright",
+                title: gettext("Set copyright information"),
+                body: copyrightTemplate(this.copyright),
+                buttons
+            })
+
+            this.dialog.open()
+            this.bind()
+        })
+    }
+
+    bind() {
+        this.licensesList = new InputList({
+            dom: this.dialog.dialogEl.querySelector(".copyright-licenses-list"),
+            initialValues: this.copyright.licenses || [],
+            emptyValue: {url: "", title: "", start: false},
+            renderItem: license => ({
+                html: `<div class="copyright-license-switch"></div>
+                    <div class="field-part field-part-small">
+                        <input type="text" class="license-start" value="${license.start ? escapeText(license.start) : ""}" placeholder="${gettext("Start date")}">
+                    </div>`,
+                bind: el => {
+                    const licenseContainer = el.closest("tr")
+                    const startInput =
+                        licenseContainer.querySelector(".license-start")
+                    if (license.start) {
+                        startInput.value = license.start
+                    }
+
+                    const mode =
+                        license.url === "" ||
+                        LICENSE_URLS.find(
+                            licenseUrl => licenseUrl[1] === license.url
+                        )
+                            ? 1
+                            : 2
+                    new TypeSwitch({
+                        dom: el.querySelector(".copyright-license-switch"),
+                        label1: gettext("From list"),
+                        label2: gettext("Custom"),
+                        initialMode: mode,
+                        render1: () =>
+                            licenseSelectTemplate({url: license.url}),
+                        render2: () =>
+                            licenseInputTemplate({
+                                url: license.url,
+                                title: license.title
+                            }),
+                        onChange: () => {
+                            // Restore focus to the license input after switching.
+                            const focusable = el.querySelector(
+                                ".fw-type-switch-input-inner input, .fw-type-switch-input-inner select"
+                            )
+                            if (focusable) {
+                                focusable.focus()
+                            }
+                        }
+                    })
+                }
+            }),
+            getValue: el => {
+                const licenseInput = el.querySelector(
+                    ".fw-type-switch-input-inner"
+                )
+                const selectEl = licenseInput.querySelector("select.license")
+                let url, title
+                if (selectEl) {
+                    url = selectEl.value
+                    title = getLicenseTitle(url)
+                } else {
+                    url = licenseInput.querySelector("input.license").value
+                    title = licenseInput.querySelector(
+                        "input.license-title"
+                    ).value
+                }
+                const start =
+                    el.closest("tr").querySelector(".license-start").value ||
+                    false
+                return {url, title, start}
+            }
+        })
+    }
+}

package/src/copyright_dialog/templates.js

@@ -0,0 +1,56 @@
+import {escapeText} from "fwtoolkit"
+import {LICENSE_URLS} from "./index"
+
+export const licenseSelectTemplate = ({url}) =>
+    `<select class="license">
+        <option value=""></option>
+        ${LICENSE_URLS.map(
+            licenseUrl =>
+                `<option value="${licenseUrl[1]}"${url === licenseUrl[1] ? " selected" : ""}>${licenseUrl[0]}</option>`
+        ).join("")}
+    </select>
+    <div class="fw-select-arrow fa fa-caret-down"></div>`
+
+export const licenseInputTemplate = ({url, title}) =>
+    `<div class="field-part field-part-huge">
+        <input type='text' class='license' value="${escapeText(url)}" placeholder="${gettext("License URL")}">
+    </div>
+    <div class="field-part field-part-huge">
+        <input type='text' class='license-title' value="${escapeText(title)}" placeholder="${gettext("License Title")}">
+    </div>`
+
+export const copyrightTemplate = ({holder, year, freeToRead}) =>
+    `<table class="fw-dialog-table">
+        <tbody>
+            <tr>
+                <th><h4 class="fw-tablerow-title fw-wtooltip">
+                    ${gettext("Copyright holder")}
+                    <span class="fw-tooltip">${gettext("If the work is not in the public domain, specify who the copyright holder is.")}</span>
+                </h4></th>
+                <td class="fw-entry-field"><input type="text" class="holder" value="${holder ? escapeText(holder) : ""}"></td>
+            </tr>
+            <tr>
+                <th><h4 class="fw-tablerow-title fw-wtooltip">
+                    ${gettext("Copyright year")}
+                    <span class="fw-tooltip">${gettext("If the work is not in the public domain, specify the year of the copyright.")}</span>
+                </h4></th>
+                <td class="fw-entry-field"><input type="number" class="year" min=0 max=2100 value="${year ? year : ""}"></td>
+            </tr>
+            <tr>
+                <th><h4 class="fw-tablerow-title fw-wtooltip">
+                    ${gettext("Available to read for free?")}
+                    <span class="fw-tooltip">${gettext("Specify whether the work can be accessed without paying a fee.")}</span>
+                </h4></th>
+                <td class="fw-entry-field"><input type="checkbox" class="free-to-read"${freeToRead ? " checked" : ""}></td>
+            </tr>
+            <tr>
+                <th><h4 class="fw-tablerow-title fw-wtooltip">
+                    ${gettext("License(s)")}
+                    <span class="fw-tooltip">${gettext('List any licenses the work is available under. If the license only applies from a given date, please specify the date in the ISO8601 format (such as "2012-10-15").')}</span>
+                </h4></th>
+                <td class="fw-entry-field licenses">
+                    <div class="copyright-licenses-list"></div>
+                </td>
+            </tr>
+        </tbody>
+    </table>`

package/src/database.js

@@ -0,0 +1,57 @@
+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
+            })
+    }
+}