iwmlib/lib/card/scatter.js

import Card from './card.js'

/**
 * Extends the card with scatter functionality.
 *
 * @class ScatterCard
 */
export default class ScatterCard extends Card {


    /**
     * TODO: Find a more suitable name.
     * Adjusts the HTML to work in the new context.
     *
     * @static
     * @param {*} domElement
     * @param {*} htmlString
     * @param {*} basePath
     * @param {*} [opts={}]
     * @memberof Card
     */
    static setup(context, htmlString, {
        basePath = "./",
        modules = []
    } = {}) {
        context.classList.add("info-card")

        this.relativePath = basePath
        htmlString = this._adjustRelativeLinks(htmlString)

        let parser = new DOMParser()
        let html = parser.parseFromString(htmlString, "text/html")

        /**
         * Conflicts with the FindTarget method of the Abstract scatter.
         */
        this._replaceAttributes(html, "onclick", this._replaceCallback)


        let content = html.querySelector(".mainview")
        context.appendChild(content)

        super.setup(context, modules)
        return context
    }


    /**
     * Appends a close listener to the scatter element.
     *
     * @static
     * @param {*} element
     * @param {*} callback
     * @memberof Card
     */
    static addOnCloseListener(element, callback) {
        if (callback) {
            element.onClose = callback
        }
    }


    /**
     * Creates a scatter for the card and applies the card to it,
     *
     * @static
     * @param {*} html
     * @param {*} scatterContainer
     * @param {string} [basePath=""]
     * @param {*} [opts={}]
     * @returns
     * @memberof Card
     */
    static createCardScatter(html, scatterContainer, {
        basePath = "./",
        modules = []
    } = {}) {
        let element = document.createElement("div")

        scatterContainer.element.appendChild(element)
        new DOMScatter(element, scatterContainer, {
            width: 1400,
            height: 1200
        })

        this.setup(element, html, {
            basePath,
            modules
        })
        return element
    }



    /**
     *Utility function to create a fully functional card scatter.
     *
     * @static
     * @param {*} scatterContainer
     * @param {*} path
     * @param {string} [basePath="."]
     * @param {*} opts
     * @returns
     * @memberof CardScatter
     */
    static loadAndCreateScatterCard(scatterContainer, item, {
        basePath = "../",
        modules = [],
        onClose = null
    } = {}) {
        console.log(basePath)
        return new Promise((resolve, reject) => {
            let url = basePath + "/" + item + "/index.html"
            console.log("Loading", url)
            this.loadHTML(url)
                .then(html => {
                    console.log("Received", html)
                    let element = this.createCardScatter(html, scatterContainer, {
                        basePath,
                        modules
                    })
                    if (onClose)
                        this.addOnCloseListener(element, onClose)
                    resolve(element)
                })
                .catch(e => reject(e))
        })
    }

    static _setLanguage(context, language) {
        context.language = language
    }

    static _getLanguage(context) {
        return context.language
    }

}

ScatterCard.selectedLanguage = 0
ScatterCard.languages = ["Deutsch", "English"]
ScatterCard.languageTags = {
    Deutsch: "de",
    English: "en"
}
ScatterCard.scatterContainer = null