From 1d9ad9d3db6cf75ced7e962382387aa58863e882 Mon Sep 17 00:00:00 2001
From: Effie <euphemia@sephanoid.es>
Date: Tue, 27 Jun 2023 00:49:29 +1000
Subject: [PATCH] removes radio buttons and puts a buncha javascript innit

---
 deploy.sh                    |  2 --
 static/script.js             | 42 +++++++++++++++++-------------------
 static/style.css             | 15 ++++++-------
 templates/album.html         | 16 --------------
 templates/base.html          |  2 +-
 templates/motif.html         |  2 +-
 templates/searchresults.html |  2 +-
 templates/songindex.html     |  5 ++---
 8 files changed, 31 insertions(+), 55 deletions(-)
 delete mode 100755 deploy.sh
 delete mode 100644 templates/album.html

diff --git a/deploy.sh b/deploy.sh
deleted file mode 100755
index cb529ce..0000000
--- a/deploy.sh
+++ /dev/null
@@ -1,2 +0,0 @@
-sudo rm -r /var/www/eorzea-songbook
-sudo cp -r public/ /var/www/eorzea-songbook
\ No newline at end of file
diff --git a/static/script.js b/static/script.js
index 2e36878..dfe706d 100644
--- a/static/script.js
+++ b/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);
-    if (radiobutton){
-        radiobutton.checked = true;
-        const label = document.getElementById(`${preclicked}_label`);
-        label.scrollIntoView();
+    const albumheader = document.getElementById(preclicked);
+    if (albumheader){
+        albumheader.classList.add('open');
+        albumheader.scrollIntoView();
     }
 });
 
 function albumselect(code){
-    const radiobutton = document.getElementById(code);
-    if (radiobutton){
-        radiobutton.checked = true;
-        const label = document.getElementById(`${code}_label`);
-        label.scrollIntoView();
+    const albumheader = document.getElementById(code);
+    for (const other of document.querySelectorAll('.sort-header.album.open')){
+        other.classList.remove('open');
     }
+    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);
-    if (radiobutton.checked){
-        radiobutton.checked = false;
-        clickevent.preventDefault();
+    const albumheader = clickevent.target;
+    // console.log(albumheader);
+    if (albumheader.classList.contains('open')){
+        albumheader.classList.remove('open');
         history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${window.location.search}`);
     }
     else{
-        window.location.hash = radiobutton.id;
-        const label = clickevent.target;
-        label.scrollIntoView();
+        for (const other of document.querySelectorAll('.sort-header.album.open')){
+            other.classList.remove('open');
+        }
+        albumheader.classList.add('open');
+        window.location.hash = albumheader.id;
     }
-};
-
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 4e91452..5aac74a 100644
--- a/static/style.css
+++ b/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 */
 
diff --git a/templates/album.html b/templates/album.html
deleted file mode 100644
index 52e42b6..0000000
--- a/templates/album.html
+++ /dev/null
@@ -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 %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 1edac48..2a5ae57 100644
--- a/templates/base.html
+++ b/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>
diff --git a/templates/motif.html b/templates/motif.html
index b8902e6..aaa7d6d 100644
--- a/templates/motif.html
+++ b/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>
diff --git a/templates/searchresults.html b/templates/searchresults.html
index 400cd70..abb96f3 100644
--- a/templates/searchresults.html
+++ b/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>
diff --git a/templates/songindex.html b/templates/songindex.html
index 94456b8..6d69d3c 100644
--- a/templates/songindex.html
+++ b/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">
-        <label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="albumHeaderClick(event)">
+        <hgroup id="{{ code }}" 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 %}