Add anchor links and jumps to them to playlist.

diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl
index d2c8aac841ab95c0569b8b3fdfb07549a1e00e5c..2ac0b997d9ebbd2ce60a8861cbd62a0f6881cb08 100644 (file)
--- 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 ad5c18b250e2b45b94a8ded04b7d65e9e5826b84..c4cdeb7e48f721ec916ea40bb30296038cba6829 100644 (file)
--- 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>