Add javascript to hide/show stale feeds

1 files changed, 30 insertions, 1 deletions

@@ -20,6 +20,8 @@ Planet ACDW</h1>
 <p class="last-updated">last updated at <time>$(date -R)</time></p>
 </header>
 <nav>
+<a href="#" id="stalebutton">hide stale</a>
+//
 <a href="feeds-short.xml">rss</a>
 //
 <a href="feeds.html">all</a>
@@ -31,13 +33,40 @@ Planet ACDW</h1>
 </nav>
 <main>
 $(html_main "$@")
-<aside><ul>$(cat "$aside")</ul></aside>
+<aside><ul id="feedlist">$(cat "$aside")</ul></aside>
 </main>
 <footer>
 Generated by <a href="https://codemadness.org/sfeed-simple-feed-parser.html">sfeed</a>
 using <a href="https://git.acdw.net/sfeed/">this configuration</a>.
 <a href="mailto:planet@me.acdw.net">suggest a feed!</a>
 </footer>
+<script>
+var staleHidden = false;
+var staleItems = new Set(document.getElementsByClassName("stale"));
+var staleFeeds = new Set(document.getElementsByClassName("stale_feed"));
+var feedlistFeeds = new Set(document.getElementById("feedlist").children);
+function hideShowStale(){
+    var display;
+    if (staleHidden) {
+       display = null; staleHidden = false;
+       flBG = null; flBB = null;
+    } else {
+       display = 'none'; staleHidden = true;
+       flBG = 'inherit'; flBB = '1px solid';
+    }
+    staleItems.forEach(e => { e.style.display = display; });
+    staleFeeds.forEach(e => { e.style.display = display; });
+    if (window.innerWidth > 720) {
+      feedlistFeeds.forEach(e => { e.style.background = flBG; e.style.borderBottom = flBB; });
+    }
+}
+var button = document.getElementById("stalebutton");
+button.addEventListener("click", function() {
+    hideShowStale();
+    if (staleHidden) { button.textContent = "show stale"; }
+    else { button.textContent = "hide stale"; }
+});
+</script>
 </body>
 </html>
 EOF