Merge pull request #69 from ok2/codex/refactor-event-box-labels-and-cronon-scale

script.js

@@ -740,7 +740,13 @@ function showEonstripDetail(index, startCob) {
             while (occ < end && occ <= endCobEv) {
                 const relStart = (occ - start) / COBIE_UNITS.eonstrip;
                 const relEnd   = (occ + duration - start) / COBIE_UNITS.eonstrip;
-                events.push({ label: ev.label, start: relStart, end: relEnd });
+                events.push({
+                    label: ev.label,
+                    start: relStart,
+                    end: relEnd,
+                    cobStart: occ,
+                    cobEnd: occ + duration
+                });
                 occ += interval;
             }
         });
@@ -782,6 +788,25 @@ function showEonstripDetail(index, startCob) {
             } else {
                 elem.textContent = ev.label;
             }
+
+            const tooltip = document.createElement('div');
+            tooltip.className = 'tooltip';
+            const opts = {
+                timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone,
+                year: 'numeric', month: 'short', day: 'numeric',
+                hour: '2-digit', minute: '2-digit', second: '2-digit',
+                hour12: false
+            };
+            const startStr = formatCobieTimestamp(ev.cobStart);
+            const endStr   = formatCobieTimestamp(ev.cobEnd);
+            const startDate = fromCobiets(ev.cobStart).toLocaleString('en-US', opts);
+            const endDate   = fromCobiets(ev.cobEnd).toLocaleString('en-US', opts);
+            tooltip.innerHTML =
+                `<strong>${ev.label}</strong><br>` +
+                `Start: ${startStr}<br>` +
+                `End: ${endStr}<br>` +
+                `${startDate} – ${endDate}`;
+            elem.appendChild(tooltip);
             timeline.appendChild(elem);
         });
     }

style.css

@@ -411,6 +411,8 @@
   position: absolute;
   left: -40px;
   width: calc(100% + 40px);
+  text-align: right;
+  padding-right: 4px;
   border-top: 1px dashed rgba(0,255,255,0.5);
   color: #00ffff;
   font-size: 0.9em;
@@ -463,10 +465,10 @@
 .event-line .event-label,
 .event-box.small-event .event-label {
   position: absolute;
-  left: 100%;
+  bottom: 100%;
-  top: 50%;
+  left: 50%;
-  transform: translateY(-50%);
+  transform: translate(-50%, -2px);
-  margin-left: 4px;
+  margin-bottom: 2px;
   background: rgba(255,0,255,0.5);
   border: 1px solid rgba(0,255,255,0.8);
   border-radius: 4px;
@@ -479,6 +481,11 @@
   z-index: 4;
 }
 
+.event-box:hover .tooltip,
+.event-line:hover .tooltip {
+  opacity: 1;
+}
+
 /* Layout combining current time and analog clock */
 .time-display {
   --clock-size: 40vmin;