djangocms-render-context 1.0.0__py3-none-any.whl → 1.2.0__py3-none-any.whl

djangocms_render_context/static/djangocms_render_context/js/spreadsheet.js

@@ -0,0 +1,711 @@
+// https://bossanova.uk/jspreadsheet/docs/getting-started
+// https://github.com/jspreadsheet/editors
+// https://jsuites.net/docs/javascript-html-editor
+// https://jsuites.net/docs/v4/javascript-html-editor
+/*
+Available Editors:
+    text
+    numeric
+    hidden
+    dropdown
+    checkbox
+    radio
+    calendar
+    image
+    color
+    html
+*/
+
+(function() {
+
+const spreadsheetId = "id-spreadsheet"
+
+function parseData(src, mimetype) {
+    let data = null
+    if (src.value) {
+        if (mimetype === "application/json") {
+            data = JSON.parse(src.value)
+        } else if (mimetype === "text/csv") {
+            data = CSV.parse(src.value)
+        } else if (mimetype === "application/yaml") {
+            data = jsyaml.load(src.value)
+        } else if (mimetype === "application/xml") {
+            data = parseXml(src.value)
+        }
+    }
+    return data
+}
+
+function parseXml(src) {
+    const data = {}
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(src, "text/xml")
+    const root = doc.querySelector("*")
+    data[root.tagName] = {}
+    if (!root.children.length) {
+        return data
+    }
+    const table = []
+    for(const row of root.children) {
+        const line = {}
+        for(const column of row.children) {
+            line[column.tagName] = column.innerHTML
+        }
+        table.push(line)
+    }
+    data[root.tagName][root.children[0].tagName] = table
+    return data
+}
+
+function objectToXml(obj, params, level, name) {
+    let xml = ""
+    if (obj instanceof Object) {
+        const rootMissing = name === undefined && level === 0 && params.options.tableNameMissing
+        if (rootMissing) {
+            xml += `<${params.options.table}>`
+        }
+        if (Array.isArray(obj)) {
+            const subname = name === undefined ? (level ? params.options.table : params.options.row) : name
+            const columnMissing = level > 0 && params.options.columnName
+            if (columnMissing) {
+                xml += `<${params.options.columnName}>`
+            }
+            for(let key=0; key < obj.length; key++) {
+                xml += objectToXml(obj[key], params, level+1, subname)
+            }
+            if (columnMissing) {
+                xml += `</${params.options.columnName}>`
+            }
+        } else {
+            if (name !== undefined) {
+                xml += `<${name}>`
+            }
+            for (const key in obj) {
+                xml += objectToXml(obj[key], params, level+1, key)
+            }
+            if (name !== undefined) {
+                xml += `</${name}>`
+            }
+        }
+        if (rootMissing) {
+            xml += `</${params.options.table}>`
+        }
+    } else {
+        xml += name !== undefined ? `<${name}>${obj}</${name}>` : obj
+    }
+    return xml
+}
+
+function formatXml(xml) {
+    const PADDING = "  "
+    const reg = /(>)(<)(\/*)/g
+    let pad = 0
+    xml = xml.replace(reg, '$1\r\n$2$3')
+    return xml.split('\r\n').map((node) => {
+        let indent = 0
+        if (node.match(/.+<\/\w[^>]*>$/)) {
+            indent = 0
+        } else if (node.match(/^<\/\w/)) {
+            if (pad !== 0) pad -= 1
+        } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
+            indent = 1
+        }
+        const padding = PADDING.repeat(pad)
+        pad += indent
+        return padding + node
+    }).join('\r\n')
+}
+
+function dumpXml(data, params) {
+    if (Array.isArray(data)) {
+        params.options.tableNameMissing = true
+        if (data.length && Array.isArray(data[0])) {
+            params.options.columnName = "item"
+        }
+    }
+    if (isObj(data)) {
+        for (const key in data) {
+            if (Array.isArray(data[key])) {
+                params.options.tableNameMissing = true
+                break
+            }
+        }
+    }
+    return formatXml(objectToXml(data, params, 0))
+}
+
+
+function setDataIntoContext(data, params) {
+    const mimetype = document.querySelector("select[name=mimetype]").value
+    if (mimetype === "text/csv" && isObj(data)) {
+        throw new Error(gettext("This data cannot be serialized in the selected format. Please select a different format."))
+    }
+    let value
+    if (mimetype === "application/json") {
+        value = JSON.stringify(data, null, 2)
+    } else if (mimetype === "text/csv") {
+        value = CSV.serialize(data)
+    } else if (mimetype === "application/yaml") {
+        value = jsyaml.dump(data)
+    } else if (mimetype === "application/xml") {
+        value = dumpXml(data, params)
+    }
+    document.querySelector("textarea[name=context]").value = value
+}
+
+function stripCells(row) {
+    const cells = []
+    let isContent = false
+    for (let i = row.length - 1; i >= 0; i--) {
+        if (isContent || row[i]) {
+            isContent = true
+            cells.push(row[i])
+        }
+    }
+    return cells.reverse()
+}
+
+function removeEmptyRows(data) {
+    const table = []
+    let isContent = false
+    for (let i = data.length - 1; i >= 0; i--) {
+        const cells = stripCells(data[i])
+        if (isContent || cells.length) {
+            isContent = true
+            table.push(cells.length ? cells : data[i])
+        }
+    }
+    return table.reverse()
+}
+
+function createSpreadsheetNode() {
+    const context = document.querySelector("textarea[name=context]")
+    const node = document.createElement("div")
+    node.id = spreadsheetId
+    context.after(node)
+}
+
+function setSpreadsheetTranslations() {
+    window.jspreadsheet.setDictionary({
+        'Are you sure?': gettext('Are you sure?'),
+        'Rename this cell': gettext('Rename this cell'),
+        'Cut': gettext('Cut'),
+        'Copy': gettext('Copy'),
+        'Paste': gettext('Paste'),
+        'Insert a new column before': gettext('Insert a new column before'),
+        'Insert a new column after': gettext('Insert a new column after'),
+        'Insert a new row before': gettext('Insert a new row before'),
+        'Insert a new row after': gettext('Insert a new row after'),
+        'Delete selected columns': gettext('Delete selected columns'),
+        'Delete selected rows': gettext('Delete selected rows'),
+        'Rename this column': gettext('Rename this column'),
+        'Add comments': gettext('Add comments'),
+        'Edit comments': gettext('Edit comments'),
+        'Clear comments': gettext('Clear comments'),
+        'Order ascending': gettext('Order ascending'),
+        'Order descending': gettext('Order descending'),
+        'Save as': gettext('Save as'),
+        'About': gettext('About'),
+    })
+}
+
+function displayError(message, title) {
+    if (!title) {
+        title = gettext("Error message")
+    }
+    jSuites.notification({
+        error: 1,
+        timeout: 60000,
+        // autoHide: false,
+        name: title,
+        message: message
+    })
+}
+
+function isObj(value) {
+    // Check if value is object.
+    return value instanceof Object && !Array.isArray(value)
+}
+
+function getPathsToArrays(obj, parent = "") {
+    let result = []
+    if (isObj(obj)) {
+        for (let key in obj) {
+            const path = parent ? `${parent}.${key}` : key
+            if (Array.isArray(obj[key])) {
+                result.push(path)
+            } else if (isObj(obj[key])) {
+                result = result.concat(getPathsToArrays(obj[key], path))
+            }
+        }
+    }
+    return result
+}
+
+function getPayload(obj, path) {
+    // Get objects data for the path.
+    path.split(".").forEach((key) => {
+        obj = obj[key]
+    })
+    return obj
+}
+
+function setPayload(obj, path, payload) {
+    // Set data into the object path.
+    const names = path.split(".")
+    const key = names.pop()
+    for(let i=0; i < names.length; i++) {
+        obj = obj[names[i]]
+    }
+    obj[key] = payload
+}
+
+function resolveColumnType(value) {
+    let type = "text"
+    if (Number.isInteger(value)) {
+        type = "numeric"
+    } else if (typeof value == "boolean") {
+        type = "checkbox"
+    } else if (typeof value === 'string') {
+        if (value.match(/#[A-Fa-f0-9]{6}/)) {
+            type = "color"
+        } else if (value.match(/\d{4}-\d{2}-\d{2}/)) {
+            type = "calendar"
+        } else if (value.match(/<.+>/)) {
+            type = "html"
+        }
+    }
+    return type
+}
+
+function getContextData(mimetype) {
+    return parseData(document.querySelector("textarea[name=context]"), mimetype)
+}
+
+function getTableName(path) {
+    const names = path.split(".").reverse()
+    return names.length > 1 ? names[1] : "table"
+}
+
+function getTableRowName(path) {
+    const names = path.split(".").reverse()
+    return names.length > 0 ? names[0] : "row"
+}
+
+
+function numberToColumn(num) {
+    let result = ""
+    while (num > 0) {
+        const remainder = (num - 1) % 26
+        result = String.fromCharCode(65 + remainder) + result
+        num = Math.floor((num - remainder) / 26)
+    }
+    return result
+}
+
+function convertDataToTableAndOptions(data) {
+    const tableData = [], tableOptions = {}
+    if (Array.isArray(data)) {
+        for(let r = 0; r < data.length; r++) {
+            const row = data[r]
+            if (Array.isArray(row)) {
+                tableData.push(row)
+                if (tableOptions.types === undefined) {
+                    tableOptions.types = []
+                    for(let c = 0; c < row.length; c++) {
+                        tableOptions.types.push(resolveColumnType(row[c]))
+                    }
+                }
+            } else if (isObj(row)) {
+                const columns = []
+                for (const [key, value] of Object.entries(row)) {
+                    columns.push(value)
+                }
+                tableData.push(columns)
+                if (tableOptions.types === undefined) {
+                    tableOptions.titles = []
+                    tableOptions.types = []
+                    for (const [key, value] of Object.entries(row)) {
+                        tableOptions.titles.push(key)
+                        tableOptions.types.push(resolveColumnType(value))
+                    }
+                }
+            } else {
+                tableOptions.types = [resolveColumnType(row)]
+                tableData.push([row])
+            }
+        }
+        if (!tableData.length) {
+            tableOptions.types = ["text"]
+            tableData.push([""])
+        }
+    } else {
+        tableData.push([data])
+        tableOptions.types = [resolveColumnType(data)]
+    }
+    return [tableData, tableOptions]
+}
+
+
+function addLink() {
+    const href = prompt(gettext("Enter a URL:"), "https://")
+    if (href) {
+        const sel = getSelection()
+        const label = sel.toString()
+        const link = document.createElement("a")
+        link.href = href
+        link.appendChild(document.createTextNode(label ? label : href))
+        const range = sel.getRangeAt(0)
+        range.deleteContents()
+        range.insertNode(link)
+    }
+}
+
+function onCreateEditor(sheet, td, x, y, empty, options) {
+    if (options.type === "html") {
+        setTimeout(() => {
+            const richtext = document.querySelector(".jss_richtext")
+            if (richtext) {
+                const item = richtext.querySelector(".jeditor-toolbar > div > div:nth-child(6)")
+                const button = item.cloneNode(true)
+                button.children[0].textContent = "link"
+                item.replaceWith(button)
+                button.onclick = addLink
+                const close = document.createElement("div")
+                close.style.cursor = "pointer"
+                close.style.textAlign = "center"
+                close.appendChild(document.createTextNode(gettext("(Press Alt+Enter to keep changes. / Alt+Q to cancel.)")))
+                close.title = gettext("Close this window.")
+                richtext.appendChild(close)
+                close.addEventListener("click", () => {
+                    window.pluginSpreadsheet.closeEditor.call(richtext, td, true);
+                })
+                richtext.addEventListener("keydown", (event) => {
+                    if(event.altKey && event.key == "Enter") {
+                        window.pluginSpreadsheet.closeEditor.call(richtext, td, true)
+                    } else if (event.altKey && event.key == "q") {
+                        window.pluginSpreadsheet.closeEditor.call(richtext, td, false)
+                    }
+                })
+            }
+        }, 100)
+    }
+}
+
+function getSpreadsheetConfig() {
+    const config = structuredClone(window.pluginSpreadsheet.getConfig())
+    delete config.data
+    // Remove default values.
+    const style = {}
+    for (const [key, value] of Object.entries(config.style)) {
+        if (value !== "text-align: center;") {
+            style[key] = value
+        }
+    }
+    config.style = style
+    return config
+}
+
+function setSpreadsheetConfig(sheetConfig, path, sheetIsOpen) {
+    const configNode = document.querySelector("textarea[name=config]")
+    let config = {}
+    if (configNode.value) {
+        config = JSON.parse(configNode.value)
+        if (config === null) {
+            config = {}
+        }
+    }
+    config[path] = sheetConfig
+    config.openedPath = sheetIsOpen ? path : null
+    configNode.value = JSON.stringify(config, null, 2)
+}
+
+function submitForm() {
+    const src = document.querySelector("textarea[name=context]")
+    const form = src.closest("form")
+    form.addEventListener('submit', (event) => {
+        if (window.pluginSpreadsheet) {
+            if (!saveSpreadsheetIntoFrom(true)) {
+                event.preventDefault()
+                return false
+            }
+        }
+    })
+}
+
+function createLinkButton(label, title, path, data) {
+    const link = document.createElement("a")
+    link.classList.add("btn")
+    link.disabled = true
+    link.style.cursor = "pointer"
+    if (title) {
+        link.title = title
+    }
+    if (path) {
+        link.dataset.path = path
+    }
+    if (data) {
+        link.dataset.options = JSON.stringify(data)
+    }
+    link.appendChild(document.createTextNode(label))
+    return link
+}
+
+function populateColumnsOptions(sheetConfig, tableOptions) {
+    for(let i = 0; i < tableOptions.types.length; i++) {
+        if (sheetConfig.columns[i] === undefined) {
+            sheetConfig.columns[i] = {type: tableOptions.types[i]}
+        }
+        if (sheetConfig.columns[i].title === undefined && tableOptions.titles && tableOptions.titles[i]) {
+            sheetConfig.columns[i].title = tableOptions.titles[i]
+        }
+    }
+}
+
+function toggleSelected(element) {
+    const parent = element.closest("div")
+    for(const link of parent.querySelectorAll("a.selected")) {
+        link.classList.remove("selected")
+    }
+    element.classList.add("selected")
+}
+
+
+function openJsSheet(button) {
+    if (button.classList.contains("selected")) {
+        return
+    }
+    if (window.pluginSpreadsheet) {
+        if (!saveSpreadsheetIntoFrom(true)) {
+            return
+        }
+    }
+    const mimetypeNone = document.querySelector("select[name=mimetype]")
+    button.dataset.mimetype = mimetypeNone.value
+    // Load table data and spreadsheet options.
+    let contextData, configOptions = {}
+    try {
+        contextData = getContextData(mimetypeNone.value)
+    } catch (error) {
+        displayError(error, gettext("Parse Data Error"))
+        return
+    }
+    const configValue = document.querySelector("textarea[name=config]").value
+    if (configValue) {
+        try {
+            configOptions = JSON.parse(configValue)
+        } catch (error) {
+            displayError(error, gettext("Error in Source settings"))
+            return
+        }
+    }
+
+    let payload
+    if (button.dataset.path !== ".") {
+        payload = getPayload(contextData, button.dataset.path)
+    } else {
+        payload = contextData
+    }
+    const [tableData, tableOptions] = convertDataToTableAndOptions(payload)
+    const path = button.dataset.path ? button.dataset.path : "."
+    let sheetConfig = (configOptions === null) ? null : configOptions[path]
+    if (sheetConfig) {
+        sheetConfig.data = tableData
+    } else {
+        sheetConfig = {minDimensions: [7, 10], data: tableData, columns: []}
+    }
+    populateColumnsOptions(sheetConfig, tableOptions)
+    createSpreadsheet(sheetConfig)
+    toggleSelected(button)
+}
+
+function createSpreadsheet(config) {
+    window.pluginSpreadsheet = window.jspreadsheet(document.getElementById(spreadsheetId), {
+        worksheets: [config],
+        oncreateeditor: onCreateEditor,
+    })[0]
+    document.querySelector("textarea[name=context]").style.display = "none"
+    document.querySelector("select[name=mimetype] option[value='application/vnd.oasis.opendocument.spreadsheet']").disabled = "disabled"
+}
+
+function destroySpreadsheet() {
+    jspreadsheet.destroy(document.getElementById(spreadsheetId))
+    window.pluginSpreadsheet = null
+    document.querySelector("textarea[name=context]").style.display = ""
+    document.querySelector("select[name=mimetype] option[value='application/vnd.oasis.opendocument.spreadsheet']").disabled = ""
+}
+
+function saveSpreadsheetIntoFrom(sheetIsOpen) {
+    const link = document.querySelector("#id-toggle-spreadsheet a.selected")
+    const mimetype = link.dataset.mimetype
+    let path = link.dataset.path
+    const options = link.dataset.options === undefined ? {} : JSON.parse(link.dataset.options)
+    const sheetData = removeEmptyRows(window.pluginSpreadsheet.getData())
+    let data
+    if (options.titles) {
+        data = convertDataIntoObjects(sheetData, options.titles)
+    } else {
+        data = sheetData
+    }
+    let contextData
+    if (path === ".") {
+        contextData = data
+    } else {
+        contextData = getContextData(mimetype)
+        setPayload(contextData, path, data)
+    }
+    try {
+        setDataIntoContext(contextData, {path: path, options: options})
+    } catch (error) {
+        displayError(error, gettext("Data serialization error"))
+        return false
+    }
+    const sheetConfig = getSpreadsheetConfig()
+    setSpreadsheetConfig(sheetConfig, path, sheetIsOpen)
+    destroySpreadsheet()
+    return true
+}
+
+function toggleSource(event) {
+    if (event.target.classList.contains("selected")) {
+        return
+    }
+    if (saveSpreadsheetIntoFrom(false)) {
+        toggleSelected(event.target)
+        appendSpreadsheetButtons()
+    }
+}
+
+function getColumnName(name, index) {
+    return name === undefined ? numberToColumn(index + 1) : name
+}
+
+function getUniqueName(name, names) {
+    let uname = name, index = 1
+    while (names.includes(uname)) {
+        uname = `${name}${++index}`
+    }
+    return uname
+}
+
+function convertDataIntoObjects(sheetData, titles) {
+    const data = []
+    for(let r=0; r < sheetData.length; r++) {
+        const line = {}
+        for(let c=0; c < sheetData[r].length; c++) {
+            const columnName = getUniqueName(getColumnName(titles[c], c), Object.keys(line))
+            line[columnName] = sheetData[r][c]
+        }
+        data.push(line)
+    }
+    return data
+}
+
+function createDefaultButton(linkFrame) {
+    const link = createLinkButton(gettext("Edit CSV"), gettext("Show data in spreadsheet."), ".")
+    link.addEventListener("click", (event) => {
+        document.querySelector("select[name=mimetype]").value = "text/csv"
+        openJsSheet(event.target)
+    })
+    linkFrame.appendChild(link)
+}
+
+function appendSeparatorBetweenButtons(linkFrame) {
+    const label = document.createElement("span")
+    label.appendChild(document.createTextNode(gettext("Spreadsheet") + ":"))
+    linkFrame.appendChild(label)
+}
+
+function removeAllChildNodes(parent) {
+    while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+    }
+}
+
+function appendSpreadsheetButtons() {
+    let linkFrame = document.querySelector("#id-toggle-spreadsheet")
+    if (linkFrame) {
+        removeAllChildNodes(linkFrame)
+    } else {
+        const context = document.querySelector("textarea[name=context]")
+        linkFrame = document.createElement("div")
+        linkFrame.id = "id-toggle-spreadsheet"
+        context.before(linkFrame)
+    }
+    const link = createLinkButton(gettext("Source"), gettext("View source data."))
+    link.classList.add("selected")
+    link.addEventListener("click", toggleSource)
+    linkFrame.appendChild(link)
+    let data
+    try {
+        data = getContextData(document.querySelector("select[name=mimetype]").value)
+    } catch (error) {
+        displayError(error, gettext("Parse Data Error"))
+        return
+    }
+    appendSeparatorBetweenButtons(linkFrame)
+    if (!data) {
+        createDefaultButton(linkFrame)
+        return
+    }
+    const paths = getPathsToArrays(data)
+    if (paths.length) {
+        for(let path of paths) {
+            const payload = getPayload(data, path)
+            const tableOptions = convertDataToTableAndOptions(payload)[1]
+            tableOptions.table = getTableName(path)
+            tableOptions.row = getTableRowName(path)
+            const link = createLinkButton(path, gettext('Show data in spreadsheet.'), path, tableOptions)
+            link.addEventListener("click", (event) => openJsSheet(event.target))
+            linkFrame.appendChild(link)
+        }
+    } else {
+        const tableOptions = convertDataToTableAndOptions(data)[1]
+        tableOptions.table = "table"
+        tableOptions.row = "row"
+        const link = createLinkButton(gettext("Display"), gettext('Show data in spreadsheet.'), ".", tableOptions)
+        link.addEventListener("click", (event) => openJsSheet(event.target))
+        linkFrame.appendChild(link)
+    }
+}
+
+function openSpreadsheetIfRequired() {
+    const configValue = document.querySelector("textarea[name=config]").value
+    let config = {}
+    if (configValue) {
+        try {
+            config = JSON.parse(configValue)
+        } catch (error) {
+            displayError(error, gettext("Error in Source settings"))
+            return
+        }
+    }
+    if (config && config.openedPath && !window.pluginSpreadsheet) {
+        const button = document.querySelector(`#id-toggle-spreadsheet a[data-path="${config.openedPath}"]`)
+        if (button) {
+            openJsSheet(button)
+        }
+    }
+}
+
+function handleMimetypeSelect() {
+    document.querySelector("select[name=mimetype]").addEventListener("change", (event) => {
+        document.getElementById("id-toggle-spreadsheet").disabled = event.target.value === "application/vnd.oasis.opendocument.spreadsheet" ? "disabled" : ""
+    })
+}
+
+function sourceChanged() {
+    document.querySelector("textarea[name=context]").addEventListener("change", appendSpreadsheetButtons)
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    handleMimetypeSelect()
+    createSpreadsheetNode()
+    setSpreadsheetTranslations()
+    sourceChanged()
+    submitForm()
+    appendSpreadsheetButtons()
+    openSpreadsheetIfRequired()
+})
+
+})()