iwmlib/lib/card/scatter.js

163 lines
4.4 KiB
JavaScript

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