kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust detail view timeline layout and auto-update

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 08:41:44 +02:00
parent 615a14b5a8
commit f6f1502f1a
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
script.js
View File

@ -177,6 +177,7 @@ function updateCurrentTime() {
} else { } else {
updateTimeBreakdown(cobiets); updateTimeBreakdown(cobiets);
} }
updateDetailCurrentTime();
} }
function updateTimeBreakdown(cobiets) { function updateTimeBreakdown(cobiets) {
@ -701,15 +702,11 @@ function showEonstripDetail(index, startCob) {
timeline.appendChild(block); timeline.appendChild(block);
} }
let markerCob = manualMode ? manualCobiets : toCobiets(new Date()); const line = document.createElement('div');
const rel = (markerCob - startCob) / COBIE_UNITS.eonstrip; line.className = 'current-time-line';
if (rel >= 0 && rel <= 1) { line.id = 'detailCurrentTime';
const line = document.createElement('div'); timeline.appendChild(line);
line.className = 'current-time-line'; updateDetailCurrentTime();
line.style.top = (rel * 100) + '%';
line.textContent = formatCobieTimestamp(markerCob);
timeline.appendChild(line);
}
if (Array.isArray(window.SPECIAL_EVENTS)) { if (Array.isArray(window.SPECIAL_EVENTS)) {
const events = []; const events = [];
@ -777,7 +774,7 @@ function showEonstripDetail(index, startCob) {
elem.className = 'event-line'; elem.className = 'event-line';
} }
elem.style.top = (displayStart * 100) + '%'; elem.style.top = (displayStart * 100) + '%';
elem.style.left = left + '%'; elem.style.left = `calc(var(--scale-width) + ${left}%)`;
elem.style.width = `calc(${width}% - 2px)`; elem.style.width = `calc(${width}% - 2px)`;
if (elem.classList.contains('small-event') || elem.className === 'event-line') { if (elem.classList.contains('small-event') || elem.className === 'event-line') {
@ -810,11 +807,26 @@ function showEonstripDetail(index, startCob) {
`End: ${endStr}<br>` + `End: ${endStr}<br>` +
`${startDate} – ${endDate}`; `${startDate} – ${endDate}`;
elem.appendChild(tooltip); elem.appendChild(tooltip);
timeline.appendChild(elem); timeline.appendChild(elem);
}); });
} }
} }
function updateDetailCurrentTime() {
if (currentDetailCob === null) return;
const line = document.getElementById('detailCurrentTime');
if (!line) return;
const nowCob = manualMode ? manualCobiets : toCobiets(new Date());
const rel = (nowCob - currentDetailCob) / COBIE_UNITS.eonstrip;
if (rel >= 0 && rel <= 1) {
line.style.display = 'block';
line.style.top = (rel * 100) + '%';
line.textContent = formatCobieTimestamp(nowCob);
} else {
line.style.display = 'none';
}
}
function detailPrev() { function detailPrev() {
if (currentDetailCob === null) return; if (currentDetailCob === null) return;
showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip); showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);

7
style.css
View File

@ -400,6 +400,7 @@
.detail-timeline { .detail-timeline {
position: relative; position: relative;
--scale-width: 24px;
height: 400px; height: 400px;
border-left: 3px solid #00ffff; border-left: 3px solid #00ffff;
margin-right: 40px; margin-right: 40px;
@ -425,8 +426,8 @@
.current-time-line { .current-time-line {
position: absolute; position: absolute;
left: 0; left: var(--scale-width);
width: calc(100% + 40px); width: calc(100% + 40px - var(--scale-width));
border-top: 2px solid #ff00ff; border-top: 2px solid #ff00ff;
color: #ff00ff; color: #ff00ff;
font-size: 0.9em; font-size: 0.9em;
@ -439,7 +440,7 @@
.event-box, .event-line { .event-box, .event-line {
position: absolute; position: absolute;
left: -1px; left: var(--scale-width);
background: rgba(255,0,255,0.4); background: rgba(255,0,255,0.4);
border: 1px solid rgba(0,255,255,0.7); border: 1px solid rgba(0,255,255,0.7);
border-radius: 4px; border-radius: 4px;