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 ScatterCard
     */
    static setup(context, htmlString, { basePath = './', modules = [] } = {}) {
        if (typeof context.scatter == 'undefined') {
            console.error(
                "You need to wrap the context inside a DOMScatter before executing the ScatterCard's setup function."
            )
        }

        /**
         *  This is required for the callback functions to work properly
         */
        window.ScatterCard = ScatterCard

        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(context, html, 'onclick', this._replaceCallback)

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

        super.setup(context, modules)
        return context
    }

    /**
     * Creates a scatter for the card and applies the card to it,
     *
     * @static
     * @param {*} html
     * @param {*} scatterContainer
     * @param {string} [basePath=""]
     * @param {*} [opts={}]
     * @returns
     * @memberof ScatterCard
     */
    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
    }

    /**
     * Closes but NOT removes the scatter element.
     *
     * The remove must be called separately, it may be used in the close callback
     * of the scatter.
     */
    static close(context) {
        if (typeof context.scatter != 'undefined') context.scatter.close()
        else {
            console.error('Expected a scatter element to close!', this)
        }

        // Card.close(context)

        // if (context['scatter']) {
        //     console.error('CLOSED CARD')
        //     context.scatter.close()
        // } else {
        //     console.error('Expected a scatter element to close!', this)
        // }
    }

    /**
     * Cleans up the card.
     *
     * @static
     * @override
     * @memberof ScatterCard
     */
    static remove(context) {
        if (context['scatter']) {
            context.scatter = null
        } else {
            console.error('Expected a scatter element to remove!', this)
        }

        Card.remove(context)
    }

    /**
     *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 = [] } = {}) {
        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,
                    })
                    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