64 lines
No EOL
2 KiB
JavaScript
64 lines
No EOL
2 KiB
JavaScript
const TEMPLATE = document.createElement("template")
|
|
TEMPLATE.innerHTML = `
|
|
<div class="talk-calendar">
|
|
<span class="talk-start-date"></span>
|
|
<time class="talk-start-time"></time>
|
|
→
|
|
<time class="talk-end-time"></time>
|
|
</div>
|
|
<h3 class="talk-title"></h3>
|
|
<p class="talk-abstract"></p>
|
|
<p><small class="track-name"></small></p>
|
|
`
|
|
|
|
class TalkElement extends HTMLElement {
|
|
|
|
#activeChackInterval
|
|
|
|
srcObject
|
|
|
|
connectedCallback(){
|
|
this.updateContent()
|
|
this.#activeChackInterval = setInterval(this.updateActiveState.bind(this), 1000)
|
|
}
|
|
|
|
disconnectedCallback(){
|
|
clearInterval(this.#activeChackInterval)
|
|
}
|
|
|
|
updateActiveState(){
|
|
this.classList.toggle("active", this.srcObject?.isActive)
|
|
}
|
|
|
|
updateContent(){
|
|
if(!this.srcObject){
|
|
this.replaceChildren()
|
|
}
|
|
|
|
this.dataset.trackId = this.srcObject.track_id
|
|
|
|
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
|
this.querySelector(".talk-title").textContent = this.srcObject.title
|
|
this.querySelector(".talk-abstract").textContent = this.srcObject.abstract
|
|
this.querySelector(".track-name").textContent = this.srcObject.track.fr
|
|
|
|
let timeFormatter = new Intl.DateTimeFormat("fr-FR", {
|
|
timeStyle: "short"
|
|
})
|
|
|
|
let dateFormatter = new Intl.DateTimeFormat("fr-FR", {
|
|
dateStyle: "short"
|
|
})
|
|
|
|
this.querySelector(".talk-start-date").textContent = dateFormatter.format(this.srcObject.startTime)
|
|
this.querySelector(".talk-start-time").textContent = timeFormatter.format(this.srcObject.startTime)
|
|
this.querySelector(".talk-start-time").datetime = this.srcObject.startTime.toJSON()
|
|
this.querySelector(".talk-end-time").textContent = timeFormatter.format(this.srcObject.endTime)
|
|
this.querySelector(".talk-end-time").datetime = this.srcObject.endTime.toJSON()
|
|
|
|
this.updateActiveState()
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define("camp-talk", TalkElement) |