From 8a3f6eee0e6bc220019d9f260f3431d8cd604843 Mon Sep 17 00:00:00 2001
From: Christian Heller <c.heller@plomlompom.de>
Date: Fri, 14 Feb 2025 15:16:01 +0100
Subject: [PATCH] Add anchor links and jumps to them to playlist.
---
src/templates/_base.tmpl | 1 +
src/templates/playlist.tmpl | 14 ++++++++++++--
2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl
index d2c8aac..2ac0b99 100644
--- a/src/templates/_base.tmpl
+++ b/src/templates/_base.tmpl
@@ -70,6 +70,7 @@ event_handlers.push(function(data) { // update player state
connect_events();
</script>
<style>
+html { scroll-padding-top: 5em; } /* so anchor jumps pad off sticky header */
body { background-color: {{background_color}}; }
table { width: 100%; }
td, th { vertical-align: top; text-align: left; }
diff --git a/src/templates/playlist.tmpl b/src/templates/playlist.tmpl
index ad5c18b..c4cdeb7 100644
--- a/src/templates/playlist.tmpl
+++ b/src/templates/playlist.tmpl
@@ -5,6 +5,7 @@
const CLS_PLAYLIST_ROW = 'playlist_row';
events_params += 'playlist=1';
+var first_load = true;
function new_child_to(tag, parent, textContent='') {
const el = document.createElement(tag);
@@ -21,10 +22,19 @@ event_handlers.push(function(data) { // update playlist
const file = data.playlist_files[i];
const tr = new_child_to('tr', table);
tr.classList.add(CLS_PLAYLIST_ROW);
+ const td_anchor = new_child_to('td', tr);
+ td_anchor.id = `${i}`
+ const a_row = new_child_to('a', td_anchor, '#');
+ a_row.href = `#${i}`
const td_entry_control = new_child_to('td', tr);
td_entry_control.classList.add('entry_control');
if (i == data.idx) {
- td_entry_control.textContent = 'playing'; }
+ td_entry_control.textContent = 'playing';
+ td_entry_control.id = 'playing';
+ if (first_load) { // to replace anchor jump to #playing, which on first
+ first_load = false; // load will not work yet since element not built yet
+ td_entry_control.scrollIntoView({block: 'center'}); }
+ }
else {
for (const [symbol, prefix] of [['>', 'jump'],
['^', 'up'],
@@ -66,7 +76,7 @@ td.entry_control { width: 5em; }
<td class="screen_half">
<table id="playlist_rows">
-<tr><th colspan=2 class="screen_half_titles">playlist</th></tr>
+<tr><th colspan=3 class="screen_half_titles">playlist (<a href="#playing">#playing</a>)</th></tr>
</table>
</td>
--
2.30.2