feat: update calendar demo

Author: scriptura

app/liturgical-calendar/app.js

@@ -6,9 +6,9 @@
 
 const APP_ROOT = '/app/liturgical-calendar/'
 
-const WASM_URL = `${APP_ROOT}liturgical_calendar_wasm.wasm?v=15`
-const KALD_URL = `${APP_ROOT}romanus_universale.kald?v=15`
-const LITS_URL = `${APP_ROOT}romanus_universale_la.lits?v=15`
+const WASM_URL = `${APP_ROOT}liturgical_calendar_wasm.wasm?v=16`
+const KALD_URL = `${APP_ROOT}romanus_universale.kald?v=16`
+const LITS_URL = `${APP_ROOT}romanus_universale_la.lits?v=16`
 
 const KAL_ENGINE_OK = 0
 const KAL_ERR_BUILD_ID_MISMATCH = -22
@@ -166,10 +166,16 @@ function renderYear(year, exports, memory) {
   document.title = `Calendarium ${year}`
   document.getElementById('h1').innerHTML = `Calendarium Romanum Generale <span>. pro ${year}</span>`
 
-  const tbody = document.getElementById('cal-body')
+  // Isolation stricte des layouts
+  const yearContent = document.getElementById('year-content')
+  document.getElementById('day-content').hidden = true
+
   const entryPtr = exports.kal_wasm_entry_ptr()
   const feastPtr = exports.kal_wasm_feast_ptr()
 
+  // Buffer de chaînes pour éviter les allocations d'éléments DOM individuels dans la boucle
+  let rowsHtml = ''
+
   for (let doy = 0; doy < 366; doy++) {
     if (exports.kal_wasm_read_day(year, doy) !== KAL_ENGINE_OK) continue
 
@@ -190,7 +196,6 @@ function renderYear(year, exports, memory) {
     const { month, day } = doyToMonthDay(doy)
     const href = `${APP_ROOT}${year}/${zeroPad(month)}/${zeroPad(day)}`
 
-    // Correction ici : initialisation stricte sans 's' pour correspondre aux mutations suivantes
     let featsHtml = ''
 
     if (exports.kal_wasm_get_label(year, doy) === 1) {
@@ -210,20 +215,43 @@ function renderYear(year, exports, memory) {
       }
     }
 
-    const tr = document.createElement('tr')
-    tr.innerHTML = `
+    rowsHtml += `<tr>
             <td class="doy"><a id="doy-${doy}" href="#doy-${doy}">${doy}</a></td>
             <td class="date"><a href="${href}">${zeroPad(day)}/${zeroPad(month)}</a></td>
-            <td class="feasts">${featsHtml}</td>`
-    tbody.appendChild(tr)
+            <td class="feasts">${featsHtml}</td>
+        </tr>`
   }
 
-  document.getElementById('cal-table').hidden = false
+  // Flush unique du layout complet (Table + Structure + Navigation)
+  yearContent.innerHTML = `
+    <table class="table liturgical-calendar">
+      <thead>
+        <tr>
+          <th>Doy</th>
+          <th>Date</th>
+          <th>Celebrationes</th>
+        </tr>
+      </thead>
+      <tbody class="table">${rowsHtml}</tbody>
+    </table>
+    <hr>
+    <nav class="flex gap">
+        <a class="button" href="${APP_ROOT}${year - 10}">Année ${year - 10}</a>
+        <a class="button" href="${APP_ROOT}${year - 1}">Année ${year - 1}</a>
+        <a class="button" href="${APP_ROOT}${year}">Année ${year}</a>
+        <a class="button" href="${APP_ROOT}${year + 1}">Année ${year + 1}</a>
+        <a class="button" href="${APP_ROOT}${year + 10}">Année ${year + 10}</a>
+    </nav>`
+
+  yearContent.hidden = false
 }
 
-// ── Vue journalière ───────────────────────────────────────────────────────────
+// ── Vue journalière ─────────────────────────────────────────────────────────
 
 function renderDay(year, month, day, exports, memory) {
+  // Désactivation explicite du layout annuel
+  document.getElementById('year-content').hidden = true
+
   const doy = dateToDoy(year, month, day)
   document.title = `${zeroPad(day)}/${zeroPad(month)}/${year}`
   document.getElementById('h1').innerHTML = `Calendarium Romanum Generale <span>. ${formatDateLong(year, month, day)}</span>`
@@ -256,11 +284,9 @@ function renderDay(year, month, day, exports, memory) {
     }
 
     const { precedence, color, nature, hasVigil } = decodeFeastFlags(feastFlags)
-    // v6 : LiturgicalPeriod dans TimelineEntry.occurrenceFlags[4:2], plus dans FeastEntry.flags[10:8].
     const period = exports.kal_wasm_entry_liturgical_period()
     const { hasVesperaeI, hasVigilia } = decodeOccurrenceFlags(occFlags)
 
-    // Alignement structurel : Résolution sécurisée via l'ID de la célébration principale
     const res = resolveById(exports, memory, feastId, year)
     const label = res ? res.label : `Fête inconnue (0x${feastId.toString(16).toUpperCase()})`
     const annotation = res ? res.annotation : null
@@ -333,6 +359,8 @@ function renderDay(year, month, day, exports, memory) {
 function renderNotFound() {
   document.title = '404 — Page non trouvée'
   document.getElementById('h1').innerHTML = 'Calendarium Romanum Generale <span>. 404</span>'
+
+  document.getElementById('year-content').hidden = true
   const container = document.getElementById('day-content')
   container.innerHTML = `<section class="not-found">
     <p>La ressource demandée n'existe pas.</p>

app/liturgical-calendar/index.html

@@ -13,7 +13,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
     <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
     <link rel="stylesheet" href="../../styles/main.css" media="screen" />
-    <link rel="stylesheet" href="liturgical-calendar.css?v=15" media="screen" />
+    <link rel="stylesheet" href="liturgical-calendar.css?v=16" media="screen" />
     <link rel="stylesheet" href="/styles/main.css" media="screen" />
     <link rel="stylesheet" href="/styles/print.css" media="print" />
     <link rel="preload" href="/fonts/notoSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
@@ -27,18 +27,7 @@
           <h1 class="main-heading" id="h1">Calendarium Romanum Generale</h1>
         </header>
         <p id="status">Chargement…</p>
-        <!-- Vue annuelle -->
-        <table class="table liturgical-calendar" id="cal-table" hidden>
-          <thead>
-            <tr>
-              <th>Doy</th>
-              <th>Date</th>
-              <th>Celebrationes</th>
-            </tr>
-          </thead>
-          <tbody class="table" id="cal-body"></tbody>
-        </table>
-        <!-- Vue journalière -->
+        <div id="year-content" hidden></div>
         <div id="day-content" hidden></div>
       </article>
     </main>
@@ -66,6 +55,6 @@ <h1 class="main-heading" id="h1">Calendarium Romanum Generale</h1>
         </div>
       </noscript>
     </div>
-    <script type="module" src="/app/liturgical-calendar/app.js?v=15"></script>
+    <script type="module" src="/app/liturgical-calendar/app.js?v=16"></script>
   </body>
 </html>