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