'use strict' class ArtBook { constructor () { this.assetCatalog = new Map() this.elementRegistry = new Map() this.elementRegistryUniqueID = 0 this.classUniqueID = 0 const stylesheetElement = document.createElement('style') stylesheetElement.type = 'text/css' stylesheetElement.title = 'artbook' stylesheetElement.appendChild(document.createTextNode('')) document.head.appendChild(stylesheetElement) for (const stylesheet of document.styleSheets) { if (stylesheet.title == stylesheetElement.title) { this.stylesheet = stylesheet break } } } preloadArt (assetURL) { /* const img = new Image() img.onload = function () { img.onload = null } img.src = assetURL */ } setArt (selector, assetURL) { if (!this.assetCatalog.has(assetURL)) { const className = 'artbook_' + this.classUniqueID this.classUniqueID++ this.stylesheet.insertRule( '.' + className + '{background-image:url(' + assetURL + ')}', 0 ) this.assetCatalog.set(assetURL, className) } const id = this.getElementID(selector) if (id == null) { console.warn('no element for selector ' + selector) } if (this.elementRegistry.has(id)) { if (this.elementRegistry.get(id) == assetURL) { return } this.removeArt(selector) } this.elementRegistry.set(id, assetURL) $(selector).addClass(this.assetCatalog.get(assetURL)) } removeArt (selector) { const id = this.getElementID(selector) if (this.elementRegistry.has(id)) { const assetURL = this.elementRegistry.get(id) if (this.assetCatalog.has(assetURL)) { $(selector).removeClass(this.assetCatalog.get(assetURL)) } this.elementRegistry.delete(id) } } getElementID (selector) { const element = $(selector)[0] if (element == null) { return null } if (!element.hasOwnProperty('artbook_id')) { if (element.hasOwnProperty('id')) { element.artbook_id = element.id } else { element.artbook_id = 'artbook_id_' + this.elementRegistryUniqueID this.elementRegistryUniqueID++ } } return element.artbook_id }}
'use strict'
class ArtBook {
constructor () {
this.assetCatalog = new Map()
this.elementRegistry = new Map()
this.elementRegistryUniqueID = 0
this.classUniqueID = 0
const stylesheetElement = document.createElement('style')
stylesheetElement.type = 'text/css'
stylesheetElement.title = 'artbook'
stylesheetElement.appendChild(document.createTextNode(''))
document.head.appendChild(stylesheetElement)
for (const stylesheet of document.styleSheets) {
if (stylesheet.title == stylesheetElement.title) {
this.stylesheet = stylesheet
break
}
}
}
preloadArt (assetURL) {
/*
const img = new Image()
img.onload = function () {
img.onload = null
}
img.src = assetURL
*/
}
setArt (selector, assetURL) {
if (!this.assetCatalog.has(assetURL)) {
const className = 'artbook_' + this.classUniqueID
this.classUniqueID++
this.stylesheet.insertRule(
'.' + className + '{background-image:url(' + assetURL + ')}',
0
)
this.assetCatalog.set(assetURL, className)
}
const id = this.getElementID(selector)
if (id == null) {
console.warn('no element for selector ' + selector)
}
if (this.elementRegistry.has(id)) {
if (this.elementRegistry.get(id) == assetURL) {
return
}
this.removeArt(selector)
}
this.elementRegistry.set(id, assetURL)
$(selector).addClass(this.assetCatalog.get(assetURL))
}
removeArt (selector) {
const id = this.getElementID(selector)
if (this.elementRegistry.has(id)) {
const assetURL = this.elementRegistry.get(id)
if (this.assetCatalog.has(assetURL)) {
$(selector).removeClass(this.assetCatalog.get(assetURL))
}
this.elementRegistry.delete(id)
}
}
getElementID (selector) {
const element = $(selector)[0]
if (element == null) {
return null
}
if (!element.hasOwnProperty('artbook_id')) {
if (element.hasOwnProperty('id')) {
element.artbook_id = element.id
} else {
element.artbook_id = 'artbook_id_' + this.elementRegistryUniqueID
this.elementRegistryUniqueID++
}
}
return element.artbook_id
}
}