163 lines
4.4 KiB
JavaScript
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
|