764cb542ac
Clicking a day shows its mode and illustration in the header, with a link back to today. The journal stays private: the calendar helper now separates interactivity from journal exposure. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
89 lines
3.5 KiB
JavaScript
89 lines
3.5 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
||
|
||
// Calendrier des humeurs : choisir un jour affiche son détail (illustration, mode, et
|
||
// sur le tableau de bord, le journal). Sert au tableau de bord comme à la page publique :
|
||
// chaque cible est facultative.
|
||
// Au clavier, les flèches se déplacent d'un jour (haut, bas) ou d'une semaine (gauche, droite).
|
||
export default class extends Controller {
|
||
static targets = [ "carte", "image", "date", "qui", "mode", "statut", "depuis", "retour", "journal", "lien" ]
|
||
static values = { nom: String, aujourdhui: String, aujourdhuiMode: String, aujourdhuiImage: String, aujourdhuiCouleur: String }
|
||
|
||
connect() {
|
||
const selectionne = this.element.querySelector(".jour[aria-pressed='true']")
|
||
if (selectionne && new URLSearchParams(window.location.search).has("day")) {
|
||
selectionne.scrollIntoView({ block: "nearest" })
|
||
}
|
||
}
|
||
|
||
choisir(event) {
|
||
this.selectionner(event.currentTarget)
|
||
}
|
||
|
||
revenir() {
|
||
const aujourdhui = this.element.querySelector(`button.jour[data-day="${this.aujourdhuiValue}"]`)
|
||
if (aujourdhui) this.selectionner(aujourdhui)
|
||
}
|
||
|
||
naviguer(event) {
|
||
const decalages = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 }
|
||
const decalage = decalages[event.key]
|
||
if (!decalage) return
|
||
|
||
const date = new Date(`${event.currentTarget.dataset.day}T12:00:00`)
|
||
date.setDate(date.getDate() + decalage)
|
||
const cible = this.element.querySelector(`button.jour[data-day="${date.toISOString().slice(0, 10)}"]`)
|
||
if (!cible) return
|
||
|
||
event.preventDefault()
|
||
this.selectionner(cible)
|
||
cible.focus()
|
||
}
|
||
|
||
selectionner(jour) {
|
||
const precedent = this.element.querySelector(".jour[aria-pressed='true']")
|
||
if (precedent) {
|
||
precedent.setAttribute("aria-pressed", "false")
|
||
precedent.tabIndex = -1
|
||
}
|
||
jour.setAttribute("aria-pressed", "true")
|
||
jour.tabIndex = 0
|
||
|
||
// Sur la page publique, aujourd'hui montre la dernière tasse posée et depuis quand
|
||
if (jour.dataset.day === this.aujourdhuiValue && this.hasDepuisTarget) {
|
||
this.afficherAujourdhui()
|
||
return
|
||
}
|
||
|
||
const { day, date, mode, statut, couleur, image, info } = jour.dataset
|
||
this.carteTarget.style.setProperty("--humeur", couleur || "")
|
||
this.imageTarget.src = image
|
||
this.modeTarget.textContent = mode || "Pas de tasse posée"
|
||
this.statutTarget.textContent = mode ? (statut || "") : ""
|
||
|
||
if (this.hasDateTarget) this.dateTarget.textContent = date
|
||
if (this.hasQuiTarget) this.quiTarget.textContent = `Le ${date} chez ${this.nomValue}`
|
||
if (this.hasDepuisTarget) this.depuisTarget.hidden = true
|
||
if (this.hasRetourTarget) this.retourTarget.hidden = false
|
||
|
||
if (this.hasJournalTarget) {
|
||
this.journalTarget.textContent = info || this.journalTarget.dataset.vide
|
||
this.journalTarget.classList.toggle("detail-journal-vide", !info)
|
||
}
|
||
if (this.hasLienTarget) {
|
||
this.lienTarget.href = `/day_logs/edit?day=${day}`
|
||
this.lienTarget.textContent = info ? "Modifier le journal" : "Écrire dans le journal"
|
||
}
|
||
|
||
history.replaceState({}, "", `?day=${day}`)
|
||
}
|
||
|
||
afficherAujourdhui() {
|
||
this.carteTarget.style.setProperty("--humeur", this.aujourdhuiCouleurValue)
|
||
this.imageTarget.src = this.aujourdhuiImageValue
|
||
this.modeTarget.textContent = this.aujourdhuiModeValue
|
||
this.quiTarget.textContent = `Aujourd’hui chez ${this.nomValue}`
|
||
this.depuisTarget.hidden = false
|
||
this.retourTarget.hidden = true
|
||
history.replaceState({}, "", window.location.pathname)
|
||
}
|
||
}
|