removes radio buttons and puts a buncha javascript innit

deploy.sh

@@ -1,2 +0,0 @@
-sudo rm -r /var/www/eorzea-songbook
-sudo cp -r public/ /var/www/eorzea-songbook

static/script.js

@@ -1,37 +1,35 @@
 window.addEventListener('load', (event) => {
     const preclicked = window.location.hash.slice(1);
-    console.log(preclicked);
     if (! preclicked) return;
-    const radiobutton = document.getElementById(preclicked);
+    const albumheader = document.getElementById(preclicked);
-    if (radiobutton){
+    if (albumheader){
-        radiobutton.checked = true;
+        albumheader.classList.add('open');
-        const label = document.getElementById(`${preclicked}_label`);
+        albumheader.scrollIntoView();
-        label.scrollIntoView();
     }
 });
 
 function albumselect(code){
-    const radiobutton = document.getElementById(code);
+    const albumheader = document.getElementById(code);
-    if (radiobutton){
+    for (const other of document.querySelectorAll('.sort-header.album.open')){
-        radiobutton.checked = true;
+        other.classList.remove('open');
-        const label = document.getElementById(`${code}_label`);
-        label.scrollIntoView();
     }
+    albumheader.classList.add('open');
     document.getElementById('search-input').value = '';
-    document.getElementById('search-results').innerHTML = '';
+    document.getElementById('search-results').replaceChildren();
-};
+}
 
 function albumHeaderClick(clickevent){
-    const radiobutton = document.getElementById(clickevent.target.htmlFor);
+    const albumheader = clickevent.target;
-    if (radiobutton.checked){
+    // console.log(albumheader);
-        radiobutton.checked = false;
+    if (albumheader.classList.contains('open')){
-        clickevent.preventDefault();
+        albumheader.classList.remove('open');
         history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${window.location.search}`);
     }
     else{
-        window.location.hash = radiobutton.id;
+        for (const other of document.querySelectorAll('.sort-header.album.open')){
-        const label = clickevent.target;
+            other.classList.remove('open');
-        label.scrollIntoView();
         }
-};
+        albumheader.classList.add('open');
-
+        window.location.hash = albumheader.id;
+    }
+}

static/style.css

@@ -470,10 +470,6 @@ footer{
 
 /* SONG INDEX ALBUM DROPDOWNS */
 
-.collapse{
-    display: none;
-}
-
 .sort-list.album{
     display: none;
 }
@@ -489,14 +485,15 @@ footer{
     color: var(--thin-border);
 }
 
-.collapse:checked ~ .sort-list.album{
+.sort-header.album.open::after{
+    content: "▲";
+}
+
+.sort-header.album.open ~ .sort-list.album{
     display:initial
 }
 
-.collapse:checked ~ .sort-header.album::after{
+
-    content: "▲";
-    color: var(--thin-border);
-}
 
 /* ENTRY PAGE TITLES */
 

templates/album.html

@@ -1,16 +0,0 @@
-{% extends "base.html" %}
-{% block title %}{{ album_info[0] }}{% endblock %}
-
-{% block content %}
-
-<h1>{{ album_info[0] }}</h1>
-<p>Released: {{ album_info[1] }}
-
-<!-- List songs -->
-<ul>
-    {% for song_id, track, name, name_jp in song_info %}
-        <li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
-    {% endfor %}
-</ul>
-
-{% endblock %}

templates/base.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho|Shippori+Mincho:bold|Zen+Maru+Gothic|Zen+Maru+Gothic:bold" />
         <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
         {%block sheet %}{% endblock %}
-        <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="" />
+        <link rel="icon" type="image/png" href="{{ url_for('static', filename='songbook.png') }}" />
         <script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
         <script src="{{ url_for('static', filename='script.js') }}"></script>
     </head>

templates/motif.html

@@ -12,7 +12,7 @@
 
 <div class="entrypage-connections">
     <ul>
-    {% for song_id, motif_id, song, feature in clip_info if feature%}
+    {% for song_id, motif_id, song, feature in clip_info if feature %}
             {% include "motifpageclipget.html" %}
     {% endfor %}
     </ul>

templates/searchresults.html

@@ -10,7 +10,7 @@
         {{ name }}
     </li></a>
     {% elif desc == 'album' %}
-    <a href="{{ url_for('songindex', _anchor='') }}{{ code }}" onclick="albumselect('{{ code }}')"><li>
+    <a href="{{ url_for('songindex', _anchor=code) }}" onclick="albumselect('{{ code }}')"><li>
         <span class="search-icon album">
             <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}"/>
         </span>

templates/songindex.html

@@ -10,11 +10,10 @@
 <section class="album-list">
     {% for album_id, name, date, code in album_info %}
     <div class="sort-box album">
-        <input type="radio" name="album" id="{{ code }}" class="collapse">
+        <hgroup id="{{ code }}" class="sort-header album" onclick="albumHeaderClick(event)">
-        <label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="albumHeaderClick(event)">
             <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/> 
             <h2>{{ name }}</h2>
-        </label>
+        </hgroup>
         <ul class="sort-list album">
             <span class="date">Released: {{ date }}</span>
             {% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}