@fiduswriter/image-manager 0.1.0

package/src/overview/index.js

@@ -0,0 +1,435 @@
+import {baseBodyTemplate} from "@fiduswriter/common/common"
+import {FeedbackTab} from "@fiduswriter/common/feedback"
+import {SiteMenu} from "@fiduswriter/common/menu"
+import {
+    Dialog,
+    OverviewDataTable,
+    OverviewMenuView,
+    activateWait,
+    addAlert,
+    deactivateWait,
+    ensureCSS,
+    escapeText,
+    findTarget,
+    gettext,
+    isActivationEvent,
+    localizeDate,
+    post,
+    setDocTitle,
+    staticUrl,
+    whenReady
+} from "fwtoolkit"
+import {ImageOverviewCategories} from "./categories"
+import {bulkMenuModel, menuModel} from "./menu"
+/** Helper functions for user added images/SVGs.*/
+
+export class ImageOverview {
+    constructor({app, user, plugins = []}) {
+        this.app = app
+        this.user = user
+        this.plugins = plugins
+        this.mod = {}
+
+        this.lastSort = {column: 0, dir: "asc"}
+    }
+
+    init() {
+        ensureCSS([
+            staticUrl("css/dialog_usermedia.css"),
+            staticUrl("css/dot_menu.css")
+        ])
+
+        return whenReady().then(() => {
+            this.render()
+            new ImageOverviewCategories(this)
+            const smenu = new SiteMenu(this.app, "images")
+            smenu.init()
+            this.menu = new OverviewMenuView(this, menuModel)
+            this.menu.init()
+            this.activatePlugins()
+            this.bindEvents()
+            this.mod.categories.setImageCategoryList(this.app.imageDB.cats)
+            this.initTable(Object.keys(this.app.imageDB.db))
+            // Reset scroll position to top to prevent Safari from auto-scrolling
+            // to the focused table element, which would hide the header/menu
+            window.scrollTo(0, 0)
+        })
+    }
+
+    render() {
+        this.dom = document.createElement("body")
+        this.dom.innerHTML = baseBodyTemplate({
+            contents: "",
+            user: this.user,
+            hasOverview: true,
+            app: this.app
+        })
+        document.body = this.dom
+        ensureCSS([staticUrl("css/cropper.min.css")])
+        setDocTitle(gettext("Media Manager"), this.app)
+        const feedbackTab = new FeedbackTab()
+        feedbackTab.init()
+    }
+
+    activatePlugins() {
+        if (this.pluginsActivated) {
+            // Plugins have been activated already
+            return
+        }
+        this.pluginsActivated = true
+        // Add plugins.
+        this.plugins = {}
+
+        return Promise.all(
+            this.plugins.map(([app, plugin]) => {
+                if (!this.app.settings.APPS.includes(app)) {
+                    return Promise.resolve()
+                }
+                return Promise.all(
+                    Object.values(plugin).map(pluginExport => {
+                        if (typeof pluginExport === "function") {
+                            this.plugins[pluginExport.name] = new pluginExport(
+                                this
+                            )
+                            return (
+                                this.plugins[pluginExport.name].init() ||
+                                Promise.resolve()
+                            )
+                        }
+                        return Promise.resolve()
+                    })
+                )
+            })
+        )
+    }
+
+    //delete image
+    deleteImage(ids) {
+        ids = ids.map(id => Number.parseInt(id))
+        if (this.app.isOffline()) {
+            addAlert(
+                "error",
+                gettext(
+                    "You are currently offline. Please try again when you are back online."
+                )
+            )
+            return
+        }
+        activateWait()
+        post("/api/usermedia/delete/", {ids})
+            .catch(error => {
+                addAlert("error", gettext("The image(s) could not be deleted"))
+                deactivateWait()
+                if (this.app.isOffline()) {
+                    addAlert(
+                        "error",
+                        gettext(
+                            "You are currently offline. Please try again when you are back online."
+                        )
+                    )
+                } else {
+                    throw error
+                }
+            })
+            .then(() => {
+                ids.forEach(id => delete this.app.imageDB.db[id])
+                this.removeTableRows(ids)
+                addAlert("success", gettext("The image(s) have been deleted"))
+            })
+            .then(() => deactivateWait())
+    }
+
+    deleteImageDialog(ids) {
+        const buttons = [
+            {
+                text: gettext("Delete"),
+                classes: "fw-dark",
+                click: () => {
+                    this.deleteImage(ids)
+                    dialog.close()
+                }
+            },
+            {
+                type: "cancel"
+            }
+        ]
+        const dialog = new Dialog({
+            id: "confirmdeletion",
+            icon: "exclamation-triangle",
+            title: gettext("Confirm deletion"),
+            body: `<p>${gettext("Delete the image(s)")}?</p>`,
+            buttons
+        })
+        dialog.open()
+    }
+
+    updateTable(ids) {
+        // Remove items that already exist
+        this.removeTableRows(ids)
+        this.table.insert({data: ids.map(id => this.createTableRow(id))})
+        // Redo last sort
+        this.table.columns.sort(this.lastSort.column, this.lastSort.dir)
+    }
+
+    createTableRow(id) {
+        const image = this.app.imageDB.db[id]
+        const cats = image.cats.map(cat => `cat_${cat}`)
+
+        let fileType = image.file_type.split("/")
+
+        if (1 < fileType.length) {
+            fileType = fileType[1].toUpperCase()
+        } else {
+            fileType = fileType[0].toUpperCase()
+        }
+
+        return [
+            id,
+            false, // checkbox
+            `<span class="fw-usermedia-image ${cats.join(" ")}">
+                <img src="${image.thumbnail ? image.thumbnail : image.image}">
+            </span>
+            <span class="fw-usermedia-title">
+                <span class="edit-image fw-link-text fw-searchable" data-id="${id}">
+                    ${image.title.length ? escapeText(image.title) : gettext("Untitled")}
+                </span>
+                <span class="fw-usermedia-type">${fileType}</span>
+            </span>`,
+            `<span>${image.width} x ${image.height}</span>`,
+            `<span class="fw-date">${localizeDate(image.added, "sortable-date")}</span>`,
+            `<span class="delete-image fw-link-text" data-id="${id}">
+                <i class="fa fa-trash-alt"></i>
+            </span>`
+        ]
+    }
+
+    removeTableRows(ids) {
+        ids = ids.map(id => Number.parseInt(id))
+
+        const existingRows = this.table.data.data
+            .map((row, index) => {
+                const id = row.cells[0].data
+                if (ids.includes(id)) {
+                    return index
+                } else {
+                    return false
+                }
+            })
+            .filter(rowIndex => rowIndex !== false)
+
+        if (existingRows.length) {
+            this.table.rows.remove(existingRows)
+        }
+    }
+
+    onResize() {
+        if (!this.table) {
+            return
+        }
+        this.initTable(Object.keys(this.app.imageDB.db))
+    }
+
+    /* Initialize the overview table */
+    initTable(ids) {
+        if (this.overviewTable) {
+            this.overviewTable.destroy()
+            this.overviewTable = null
+        }
+        this.table = null
+        this.dtBulk = null
+
+        const contentsEl = this.dom.querySelector(".fw-contents")
+        contentsEl.innerHTML = ""
+
+        const hiddenCols = [0]
+
+        if (window.innerWidth < 500) {
+            hiddenCols.push(1)
+        }
+
+        this.overviewTable = new OverviewDataTable({
+            dom: contentsEl,
+            classes: ["fw-data-table", "fw-large"],
+            columns: [
+                {
+                    select: 0,
+                    type: "number"
+                },
+                {
+                    select: 1,
+                    type: "boolean"
+                },
+                {
+                    select: hiddenCols,
+                    hidden: true
+                },
+                {
+                    select: [1, 3, 5],
+                    sortable: false
+                },
+                {
+                    select: [this.lastSort.column],
+                    sort: this.lastSort.dir
+                }
+            ],
+            data: ids.map(id => this.createTableRow(id)),
+            idColumn: 0,
+            checkboxColumn: 1,
+            bulkMenu: bulkMenuModel(),
+            bulkMenuPage: this,
+            searchable: true,
+            scrollY: `${Math.max(window.innerHeight - 360, 100)}px`,
+            tabIndex: 1,
+            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
+            },
+            headings: [
+                "",
+                "",
+                gettext("File"),
+                gettext("Size (px)"),
+                gettext("Added"),
+                ""
+            ],
+            template: (options, _dom) =>
+                `<div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
+            <div class='${options.classes.bottom}'>
+                ${
+                    options.paging
+                        ? `<div class='${options.classes.info}'></div>`
+                        : ""
+                }
+                <nav class='${options.classes.pagination}'></nav>
+            </div>`,
+            rowRender: (row, tr, _index) => {
+                const id = row.cells[0].data
+                const inputNode = {
+                    nodeName: "input",
+                    attributes: {
+                        type: "checkbox",
+                        class: "entry-select fw-check",
+                        "data-id": id,
+                        id: `doc-img-${id}`
+                    }
+                }
+                if (row.cells[1].data) {
+                    inputNode.attributes.checked = true
+                }
+                tr.childNodes[0].childNodes = [
+                    inputNode,
+                    {
+                        nodeName: "label",
+                        attributes: {
+                            for: `doc-img-${id}`
+                        }
+                    }
+                ]
+            },
+            onEnter: (row, _event) => {
+                if (this.getSelected().length > 0) {
+                    return
+                }
+                const rowIndex = this.table.data.data.indexOf(row)
+                const button = this.table.dom.querySelector(
+                    `tr[data-index="${rowIndex}"] span.edit-image`
+                )
+                if (button) {
+                    button.click()
+                }
+            },
+            onDelete: row => {
+                const imageId = row.cells[0].data
+                this.deleteImageDialog([imageId])
+            }
+        })
+        this.overviewTable.init()
+        this.table = this.overviewTable.table
+        this.table.id = "imagelist"
+        this.dtBulk = this.overviewTable.dtBulk
+
+        this.table.on("datatable.sort", (column, dir) => {
+            this.lastSort = {column, dir}
+        })
+
+        this.table.dom.focus()
+    }
+
+    // get IDs of selected bib entries
+    getSelected() {
+        return Array.from(
+            this.dom.querySelectorAll(".entry-select:checked:not(:disabled)")
+        ).map(el => Number.parseInt(el.getAttribute("data-id")))
+    }
+
+    bindEvents() {
+        this.dom.addEventListener("click", event =>
+            this.handleActivation(event)
+        )
+        this.dom.addEventListener("keydown", event =>
+            this.handleActivation(event)
+        )
+    }
+
+    handleActivation(event) {
+        if (!isActivationEvent(event)) {
+            return
+        }
+        const el = {}
+        switch (true) {
+            case findTarget(event, ".delete-image", el): {
+                const imageId = el.target.dataset.id
+                this.deleteImageDialog([imageId])
+                break
+            }
+            case findTarget(event, ".edit-image", el): {
+                const imageId = el.target.dataset.id
+                import("../edit_dialog").then(({ImageEditDialog}) => {
+                    const dialog = new ImageEditDialog(
+                        this.app.imageDB,
+                        imageId,
+                        this
+                    )
+                    dialog.init().then(() => {
+                        this.updateTable([imageId])
+                    })
+                })
+                break
+            }
+            case findTarget(event, ".fw-add-input", el): {
+                const itemEl = el.target.closest(".fw-list-input")
+                if (!itemEl.nextElementSibling) {
+                    itemEl.insertAdjacentHTML(
+                        "afterend",
+                        `<tr class="fw-list-input">
+                            <td>
+                                <input type="text" class="category-form">
+                                <span class="fw-add-input icon-addremove" tabindex="0"></span>
+                            </td>
+                        </tr>`
+                    )
+                } else {
+                    itemEl.parentElement.removeChild(itemEl)
+                }
+                break
+            }
+            default:
+                break
+        }
+    }
+
+    close() {
+        if (this.table) {
+            this.table.destroy()
+            this.table = null
+        }
+        if (this.dtBulk) {
+            this.dtBulk.destroy()
+            this.dtBulk = null
+        }
+        if (this.menu) {
+            this.menu.destroy()
+            this.menu = null
+        }
+    }
+}

package/src/overview/menu.js

@@ -0,0 +1,75 @@
+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").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
+        }
+    ]
+})

package/src/overview/templates.js

@@ -0,0 +1,30 @@
+import {escapeText} from "fwtoolkit"
+
+/** A template for the image category edit form. */
+const usermediaCategoryformsTemplate = ({categories}) =>
+    `${categories
+        .map(
+            cat =>
+                `<tr id="categoryTr_${cat.id}" class="fw-list-input">
+                <td>
+                    <input type="text" class="category-form" id="categoryTitle_${cat.id}"
+                            value="${escapeText(cat.category_title)}" data-id="${cat.id}" />
+                    <span class="fw-add-input icon-addremove" tabindex="0"></span>
+                </td>
+            </tr>`
+        )
+        .join("")}
+    <tr class="fw-list-input">
+        <td>
+            <input type="text" class="category-form" />
+            <span class="fw-add-input icon-addremove" tabindex="0"></span>
+        </td>
+    </tr>`
+
+/** A template to edit image categories. */
+export const usermediaEditcategoriesTemplate = ({categories}) =>
+    `<table id="editCategoryList" class="fw-dialog-table">
+        <tbody>
+            ${usermediaCategoryformsTemplate({categories})}
+        </tbody>
+    </table>`