fwtoolkit 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/file/index.js

@@ -0,0 +1,9 @@
+export {FileDialog} from "./dialog.js"
+export {FileSelector} from "./selector.js"
+export {
+    cleanPath,
+    moveFile,
+    shortFileTitle,
+    longFilePath
+} from "./tools.js"
+export {NewFolderDialog} from "./new_folder_dialog.js"

package/src/file/new_folder_dialog.js

@@ -0,0 +1,37 @@
+import {Dialog} from "../dialog.js"
+import {newFolderTemplate} from "./templates.js"
+
+export class NewFolderDialog {
+    constructor(callback = _foldername => {}) {
+        this.callback = callback
+        this.dialog = new Dialog({
+            title: gettext("New folder"),
+            id: "new-folder",
+            width: 400,
+            height: 150,
+            body: newFolderTemplate(),
+            buttons: [
+                {type: "cancel"},
+                {
+                    text: gettext("Create folder"),
+                    classes: "fw-dark",
+                    click: () => {
+                        const folderName =
+                            this.dialog.dialogEl.querySelector(
+                                "#new-folder-name"
+                            ).value
+                        this.dialog.close()
+                        if (!folderName.length) {
+                            return
+                        }
+                        this.callback(folderName)
+                    }
+                }
+            ]
+        })
+    }
+
+    open() {
+        return this.dialog.open()
+    }
+}

package/src/file/selector.js

@@ -0,0 +1,263 @@
+import {escapeText, findTarget} from "../basic.js"
+import {ensureCSS} from "../network.js"
+
+export class FileSelector {
+    constructor({
+        dom,
+        files,
+        showFiles = true,
+        selectFolders = true,
+        multiSelect = false,
+        selectDir = _path => {},
+        selectFile = _path => {},
+        fileIcon = "far fa-file-alt"
+    }) {
+        this.dom = dom
+        this.files = files
+        this.showFiles = showFiles // Whether to show existing files or only folders
+        this.selectFolders = selectFolders // Whether to allow the selection of folders
+        this.multiSelect = multiSelect // Whether to allow the selectioj of multiple entries
+        this.selectDir = selectDir
+        this.selectFile = selectFile
+        this.fileIcon = fileIcon // File icon to use
+        this.root = {
+            name: "/",
+            type: "folder",
+            open: true,
+            selected: false,
+            path: "/",
+            children: []
+        }
+        this.selected = []
+        if (this.selectFolders && !this.multiSelect) {
+            this.root.selected = true
+            this.selected.push(this.root)
+        }
+    }
+
+    init() {
+        this.readDirStructure()
+        this.sortDirStructure()
+        ensureCSS(staticUrl("css/file_selector.css"))
+        this.dom.classList.add("fw-file-selector")
+        this.render()
+        this.bind()
+    }
+
+    readDirStructure() {
+        // Read directory structure from existing file paths.
+        // A file's title is used as the final path segment when the file has
+        // no explicit folder path. We strip any "/" from that segment because
+        // some titles (e.g. E2EE ciphertext encoded in standard base64) contain
+        // "/" characters which would otherwise be mis-interpreted as path
+        // separators, nesting the file inside phantom collapsed folders.
+        this.files.forEach(file => {
+            let treeWalker = this.root.children
+            let path = file.path
+            if (!path.length || path.endsWith("/")) {
+                const safeName = (file.title || gettext("Untitled")).replace(
+                    /\//g,
+                    "\u2215" // U+2215 DIVISION SLASH — visually identical, not a path separator
+                )
+                path += safeName
+            }
+            const pathParts = path.split("/")
+            pathParts.forEach((pathPart, pathIndex) => {
+                if (!pathPart.length) {
+                    return
+                }
+                if (pathIndex === pathParts.length - 1) {
+                    if (this.showFiles) {
+                        treeWalker.push({
+                            name: pathPart,
+                            type: "file",
+                            path: pathParts.slice(0, pathIndex + 1).join("/"),
+                            file
+                        })
+                    }
+                    return
+                }
+                let folder = treeWalker.find(
+                    item => item.name === pathPart && item.type === "folder"
+                )
+                if (!folder) {
+                    folder = {
+                        name: pathPart,
+                        type: "folder",
+                        open: false,
+                        selected: false,
+                        path: pathParts.slice(0, pathIndex + 1).join("/") + "/",
+                        children: []
+                    }
+                    treeWalker.push(folder)
+                }
+                treeWalker = folder.children
+            })
+        })
+    }
+
+    sortDirStructure(entries = this.root.children) {
+        entries.sort((a, b) => {
+            if (a.type !== b.type) {
+                return a.type === "folder" ? -1 : 1
+            }
+            return a.name > b.name ? 1 : -1
+        })
+        entries.forEach(entry => {
+            if (entry.type === "folder" && entry.children.length) {
+                this.sortDirStructure(entry.children)
+            }
+        })
+    }
+
+    addFolder(rawName) {
+        const name = rawName.replace(/\//g, "")
+        // Add a new folder as a subfolder to the currently selected folder
+        if (
+            !this.selected.length ||
+            this.selected[0].type !== "folder" ||
+            this.selected[0].children.find(
+                child => child.type === "folder" && child.name === name
+            )
+        ) {
+            // A file is selected. Give up.
+            return
+        }
+        const newFolder = {
+            name,
+            type: "folder",
+            open: true,
+            selected: true,
+            path: this.selected[0].path + name + "/",
+            children: []
+        }
+        this.selected[0].children.push(newFolder)
+        this.sortDirStructure(this.selected[0].children)
+        this.selected[0].open = true
+        if (!this.multiSelect) {
+            this.selected[0].selected = false
+            this.selected = []
+        }
+        this.selected.push(newFolder)
+        this.selectDir(newFolder.path)
+        this.render()
+    }
+
+    deselectAll() {
+        this.selected.forEach(entry => (entry.selected = false))
+        this.selected = []
+        this.render()
+    }
+
+    render() {
+        this.dom.innerHTML = this.renderFolder(this.root)
+    }
+
+    renderFolder(folder, indentLevel = 0) {
+        let returnString = ""
+        returnString += `<div class="folder${folder.open ? "" : " closed"}">`
+        returnString += `<p style="margin-left:${indentLevel * 10}px;">${
+            folder.children.length
+                ? `<i class="far fa-${folder.open ? "minus" : "plus"}-square"></i>&nbsp;`
+                : ""
+        }<span class="folder-name${folder.selected ? " selected" : ""}"><i class="fas fa-folder"></i>&nbsp;${escapeText(folder.name)}</span></p>`
+        if (folder.open) {
+            returnString += '<div class="folder-content">'
+            returnString += folder.children
+                .map(child => {
+                    if (child.type === "folder") {
+                        return this.renderFolder(child, indentLevel + 1)
+                    } else {
+                        return `<p class="file" style="margin-left:${(indentLevel + 1) * 10 + 20}px;"><span class="file-name${child.selected ? " selected" : ""}"><i class="${this.fileIcon}"></i>&nbsp;${escapeText(child.name)}</span></p>`
+                    }
+                })
+                .join("")
+            returnString += "</div>"
+        }
+        returnString += "</div>"
+        return returnString
+    }
+
+    findEntry(dom) {
+        const searchPath = []
+        let seekItem = dom
+        while (seekItem.closest("div.folder, p.file")) {
+            let itemNumber = 0
+            seekItem = seekItem.closest("div.folder, p.file")
+            while (seekItem.previousElementSibling) {
+                itemNumber++
+                seekItem = seekItem.previousElementSibling
+            }
+            searchPath.push(itemNumber)
+            seekItem = seekItem.parentElement
+        }
+        let entry = this.root
+        searchPath.pop()
+        while (searchPath.length) {
+            entry = entry.children[searchPath.pop()]
+        }
+        return entry
+    }
+
+    bind() {
+        this.dom.addEventListener("click", event => {
+            const el = {}
+            switch (true) {
+                case findTarget(event, ".fa-plus-square", el): {
+                    event.preventDefault()
+                    const entry = this.findEntry(el.target)
+                    entry.open = true
+                    this.render()
+                    break
+                }
+                case findTarget(event, ".fa-minus-square", el): {
+                    event.preventDefault()
+                    const entry = this.findEntry(el.target)
+                    entry.open = false
+                    this.render()
+                    break
+                }
+                case findTarget(event, ".folder-name", el): {
+                    event.preventDefault()
+                    if (!this.selectFolders) {
+                        // Folders cannot be selected
+                        return
+                    }
+                    const entry = this.findEntry(el.target)
+                    if (this.selected.includes(entry)) {
+                        entry.selected = false
+                        this.selected = this.selected.filter(e => e !== entry)
+                        this.render()
+                    } else {
+                        entry.selected = true
+                        if (!this.multiSelect && this.selected.length) {
+                            this.selected[0].selected = false
+                        }
+                        this.selected.push(entry)
+                        this.render()
+                        this.selectDir(entry.path)
+                    }
+                    break
+                }
+                case findTarget(event, ".file-name", el): {
+                    event.preventDefault()
+                    const entry = this.findEntry(el.target)
+                    if (this.selected.includes(entry)) {
+                        entry.selected = false
+                        this.selected = this.selected.filter(e => e !== entry)
+                        this.render()
+                    } else {
+                        entry.selected = true
+                        if (!this.multiSelect && this.selected.length) {
+                            this.selected[0].selected = false
+                        }
+                        this.selected.push(entry)
+                        this.render()
+                        this.selectFile(entry.path)
+                    }
+                    break
+                }
+            }
+        })
+    }
+}

package/src/file/templates.js

@@ -0,0 +1,11 @@
+import {escapeText} from "../index.js"
+
+export const moveTemplate = ({path}) =>
+    `<div>
+    <span>${gettext("Path")}:</span>
+    <input type="text" value="${escapeText(path)}" id="path" placeholder="${gettext("Insert path")}">
+    <div class="file-selector"></div>
+    </div>`
+
+export const newFolderTemplate = () =>
+    `<div><input type="text" id="new-folder-name" placeholder="${gettext("Insert folder name")}"></div>`

package/src/file/tools.js

@@ -0,0 +1,58 @@
+import {escapeText} from "../basic.js"
+import {postJson} from "../network.js"
+
+export const shortFileTitle = (title, path) => {
+    if (!path.length || path.endsWith("/")) {
+        return escapeText(title || gettext("Untitled"))
+    }
+    return escapeText(path.split("/").pop())
+}
+
+export const longFilePath = (title, path, prefix = "") => {
+    if (!path.length) {
+        path = "/"
+    }
+    if (path.endsWith("/")) {
+        path += title.replace(/\//g, "") || gettext("Untitled")
+    }
+    if (prefix.length) {
+        const pathParts = path.split("/")
+        const fileName = pathParts.pop()
+        pathParts.push(prefix + fileName)
+        path = pathParts.join("/")
+    }
+
+    return path
+}
+
+export const cleanPath = (title, path) => {
+    if (!path.startsWith("/")) {
+        path = "/" + path
+    }
+    path = path.replace(/\/{2,}/g, "/") // replace multiple backslashes
+
+    if (
+        path.endsWith(
+            `/${title.replace(/\//g, "")}` || `/${gettext("Untitled")}`
+        )
+    ) {
+        path = path.split("/").slice(0, -1).join("/") + "/"
+    }
+    if (path === "/") {
+        path = ""
+    }
+    return path
+}
+
+export const moveFile = (fileId, title, path, moveUrl) => {
+    path = cleanPath(title, path)
+    return new Promise((resolve, reject) => {
+        postJson(moveUrl, {id: fileId, path}).then(({json}) => {
+            if (json.done) {
+                resolve(path)
+            } else {
+                reject()
+            }
+        })
+    })
+}

package/src/focus.js

@@ -0,0 +1,20 @@
+// Get the index number of currently focused selement. This it to set tyhe focus close by after doing some dom changes.
+
+export const getFocusIndex = () => {
+    return Array.from(
+        document.querySelectorAll(
+            "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"
+        )
+    ).findIndex(el => el === document.activeElement)
+}
+
+export const setFocusIndex = index => {
+    const focusableElements = Array.from(
+        document.querySelectorAll(
+            "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]"
+        )
+    )
+    if (index >= 0 && index < focusableElements.length) {
+        focusableElements[index].focus()
+    }
+}

package/src/index.js

@@ -1,12 +1,61 @@
-export {escapeText, unescapeText, noSpaceTmp} from "./text.js"
+export {OverviewMenuView} from "./overview_menu.js"
+export {
+    dropdownSelect,
+    setCheckableLabel,
+    activateWait,
+    deactivateWait,
+    addAlert,
+    langName,
+    localizeDate,
+    enableDatePicker,
+    noSpaceTmp,
+    escapeText,
+    unescapeText,
+    infoTooltip,
+    cancelPromise,
+    findTarget,
+    whenReady,
+    setDocTitle,
+    showSystemMessage
+} from "./basic.js"
+
 export {convertDataURIToBlob} from "./blob.js"
-export {shortFileTitle, longFilePath} from "./file.js"
-export {get, post, postJson} from "./network.js"
 
-export const addAlert = (type, message) => {
-    if (typeof console !== "undefined") {
-        console.log(`[@fiduswriter/document alert][${type}] ${message}`)
-    }
-}
+export {isActivationEvent} from "./events.js"
+
+export {getFocusIndex, setFocusIndex} from "./focus.js"
 
-export const deactivateWait = () => {}
+export {
+    get,
+    getJson,
+    post,
+    postJson,
+    postBare,
+    ensureCSS,
+    getCookie
+} from "./network.js"
+export {
+    setLanguage,
+    avatarTemplate
+} from "./user.js"
+export {Dialog} from "./dialog.js"
+export {ContentMenu} from "./content_menu.js"
+export {makeWorker} from "./worker.js"
+export {baseBodyTemplate} from "./templates.js"
+export {WebSocketConnector} from "./ws.js"
+export {filterPrimaryEmail} from "./user_util.js"
+export {DatatableBulk} from "./datatable_bulk.js"
+export {faqDialog} from "./faq_dialog.js"
+export {
+    FileDialog,
+    FileSelector,
+    cleanPath,
+    moveFile,
+    shortFileTitle,
+    longFilePath,
+    NewFolderDialog
+} from "./file/index.js"
+export {
+    initSettings,
+    getSettings
+} from "./settings.js"

package/src/network.js

@@ -1,14 +1,29 @@
-const getCookie = name => {
-    if (typeof document === "undefined" || !document.cookie) {
-        return ""
+import {getSettings} from "./settings.js"
+
+/** Get cookie to set as part of the request header of all AJAX requests to the server.
+ * @param name The name of the token to look for in the cookie.
+ */
+export const getCookie = name => {
+    if (!document.cookie || document.cookie === "") {
+        return null
     }
     const cookie = document.cookie
         .split(";")
         .map(cookie => cookie.trim())
-        .find(cookie => cookie.substring(0, name.length + 1) === `${name}=`)
-    return cookie ? decodeURIComponent(cookie.substring(name.length + 1)) : ""
+        .find(cookie => {
+            if (cookie.substring(0, name.length + 1) == name + "=") {
+                return true
+            } else {
+                return false
+            }
+        })
+    if (cookie) {
+        return decodeURIComponent(cookie.substring(name.length + 1))
+    }
+    return null
 }
 
+/* from https://www.tjvantoll.com/2015/09/13/fetch-and-errors/ */
 const handleFetchErrors = response => {
     if (!response.ok) {
         throw response
@@ -16,8 +31,11 @@ const handleFetchErrors = response => {
     return response
 }
 
-export const get = (url, params = {}) => {
-    const csrfToken = getCookie("csrftoken")
+export const get = (url, params = {}, csrfToken = false) => {
+    const settings = getSettings()
+    if (!csrfToken) {
+        csrfToken = settings.getCsrfToken() // Won't work in web worker.
+    }
     const queryString = Object.keys(params)
         .map(
             key =>
@@ -27,7 +45,7 @@ export const get = (url, params = {}) => {
     if (queryString.length) {
         url = `${url}?${queryString}`
     }
-    return fetch(url, {
+    return fetch(settings.apiUrl(url), {
         method: "GET",
         headers: {
             "X-CSRFToken": csrfToken,
@@ -38,8 +56,15 @@ export const get = (url, params = {}) => {
     }).then(handleFetchErrors)
 }
 
-export const post = (url, object = {}, files = {}) => {
-    const csrfToken = getCookie("csrftoken")
+export const getJson = (url, params = {}, csrfToken = false) =>
+    get(url, params, csrfToken).then(response => response.json())
+
+export const postBare = (url, object = {}, files = {}, options = {}) => {
+    const settings = getSettings()
+
+    const {csrfToken: csrfTokenOpt, keepalive = false} = options
+    const csrfToken = csrfTokenOpt || settings.getCsrfToken() // Won't work in web worker.
+
     const fetchOptions = {
         method: "POST",
         headers: {
@@ -47,7 +72,8 @@ export const post = (url, object = {}, files = {}) => {
             Accept: "application/json",
             "X-Requested-With": "XMLHttpRequest"
         },
-        credentials: "include"
+        credentials: "include",
+        keepalive
     }
 
     if (Object.keys(files).length) {
@@ -70,10 +96,33 @@ export const post = (url, object = {}, files = {}) => {
         fetchOptions.body = JSON.stringify(object)
     }
 
-    return fetch(url, fetchOptions).then(handleFetchErrors)
+    return fetch(settings.apiUrl(url), fetchOptions)
+}
+
+export const post = (url, object = {}, files = {}, options = {}) => {
+    return postBare(url, object, files, options).then(handleFetchErrors)
 }
 
-export const postJson = (url, object = {}, files = {}) =>
-    post(url, object, files).then(response =>
+// post json object and return json and status
+export const postJson = (url, object = {}, files = {}, options = {}) =>
+    post(url, object, files, options).then(response =>
         response.json().then(json => ({json, status: response.status}))
     )
+
+export const ensureCSS = cssUrl => {
+    if (typeof cssUrl === "object") {
+        cssUrl.forEach(url => ensureCSS(url))
+        return
+    }
+    const link = document.createElement("link")
+    link.rel = "stylesheet"
+    link.href = cssUrl
+    const styleSheet = Array.from(document.styleSheets).find(
+        styleSheet => styleSheet.href === link.href
+    )
+    if (!styleSheet) {
+        document.head.appendChild(link)
+        return true
+    }
+    return false
+}