From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 22 Feb 2025 17:22:02 +0000 (-0500)
Subject: Use HTML for AJAX requests instead of XML
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=6f87ae22bf5e587f4413f075a8f3b740690cedfe;p=littlesongplace.git

Use HTML for AJAX requests instead of XML
---

diff --git a/main.py b/main.py
index 3aebd3d..0f68565 100644
--- a/main.py
+++ b/main.py
@@ -13,7 +13,6 @@ from datetime import datetime, timezone
 from logging.handlers import RotatingFileHandler
 from pathlib import Path, PosixPath
 from typing import Optional
-from xml.sax.saxutils import escape
 
 import bcrypt
 import bleach
@@ -931,12 +930,9 @@ def get_current_user_playlists():
 
 @app.context_processor
 def inject_global_vars():
-    use_xml = request.headers["Accept"] == "application/xml"
     return dict(
         gif_data=get_gif_data(),
         current_user_playlists=get_current_user_playlists(),
-        use_xml=use_xml,
-        escape=escape,
         bgcolor="#e8e6b5",
         fgcolor="#695c73",
         accolor="#9373a9",
diff --git a/templates/activity.html b/templates/activity.html
index 3aa0938..d802b5b 100644
--- a/templates/activity.html
+++ b/templates/activity.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Activity{% endblock %}
 
diff --git a/templates/base.html b/templates/base.html
index 8e5b282..2f7c97c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,36 +6,49 @@
         <link rel="icon" type="image/x-icon" href="/static/lsp_notes.png"/>
         <script src="/static/player.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Include coloris library for color picker -->
+        <link rel="stylesheet" href="/static/coloris.min.css"/>
+        <script src="/static/coloris.min.js"></script>
+
         <!-- Page-specific head fields -->
         {% block head %}
         {% endblock %}
         <script>
-            document.addEventListener("click", (event) => {
-                // Handle all clicks on links
-                if (!event.target.matches("a")) {
-                    return;
-                }
+            document.addEventListener("DOMContentLoaded", (e) => {
+
+                // Handle link clicks with AJAX
+                document.querySelectorAll("a").forEach((anchor) => {
+                    anchor.removeEventListener("click", onLinkClick);
+                    anchor.addEventListener("click", onLinkClick);
+                });
+
+                // Handle form submissions with AJAX
+                document.querySelectorAll("form").forEach((form) => {
+                    form.removeEventListener("submit", onFormSubmit);
+                    form.addEventListener("submit", onFormSubmit);
+                });
+            });
 
-                var targetUrl = new URL(event.target.href);
+            function onLinkClick(event) {
+                var targetUrl = new URL(event.currentTarget.href);
                 if (urlIsOnSameSite(targetUrl)) {
                     event.preventDefault();
+                    event.stopPropagation();
                     fetch(targetUrl, {redirect: "follow"}).then(handleAjaxResponse);
                 }
-            });
+            }
 
-            document.addEventListener("DOMContentLoaded", (e) => {
-                document.querySelectorAll("form").forEach((form) => {
-                    form.addEventListener("submit", (event) => {
-                        var targetUrl = new URL(event.target.action);
-                        if (urlIsOnSameSite(targetUrl)) {
-                            event.preventDefault();
-                            var formData = new FormData(event.target);
-                            fetch(targetUrl, {redirect: "follow", body: formData, method: event.target.method})
-                                .then(handleAjaxResponse);
-                        }
-                    });
-                });
-            });
+            function onFormSubmit(event) {
+                var targetUrl = new URL(event.target.action);
+                if (urlIsOnSameSite(targetUrl)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    var formData = new FormData(event.target);
+                    fetch(targetUrl, {redirect: "follow", body: formData, method: event.target.method})
+                        .then(handleAjaxResponse);
+                }
+            }
 
             function urlIsOnSameSite(targetUrl) {
                 var currentUrl = new URL(window.location.href);
@@ -49,7 +62,6 @@
 
                 // Get page content from XML response
                 var text = await response.text();
-                console.log(text);
                 window.history.pushState(text, "", url);
 
                 updatePageState(text);
@@ -62,25 +74,29 @@
                 }
                 var parser = new DOMParser();
                 data = parser.parseFromString(data, "text/html");
-                //console.log(data.querySelector("body").textContent);
-                var body = parser.parseFromString(data.querySelector("body").innerHTML, "text/html");
-                //console.log(body.documentElement.textContent);
-                document.getElementById("main").innerHTML = body.documentElement.textContent;
+                var newMainDiv = data.getElementById("main");
+                var oldMainDiv = document.getElementById("main");
+                document.body.replaceChild(newMainDiv, oldMainDiv);
                 document.title = data.title;
 
+                // Load inline scripts (DOMParser disables these by default)
+                var scripts = document.getElementById("main").getElementsByTagName("script");
+                for (const script of scripts) {
+                    var newScript = document.createElement("script");
+                    newScript.type = script.type;
+                    newScript.text = script.text;
+                    script.parentElement.replaceChild(newScript, script);
+                }
+
+                // Delete old color picker (will be recreated on DOMContentLoaded)
+                document.getElementById("clr-picker").remove();
+
                 // Trigger event to signal new page has loaded
                 var event = new Event("DOMContentLoaded");
                 document.dispatchEvent(event);
 
-                // Update page colors
-                var rootStyle = document.documentElement.style;
-                rootStyle.setProperty("--yellow", data.bgcolor);
-                rootStyle.setProperty("--black", data.fgcolor);
-                rootStyle.setProperty("--purple", data.accolor);
-
                 // Refresh navbar in case logged-in status changed
-                updateNavbar(data.username);
-                updateImageColors();
+                updateNavbar(newMainDiv.dataset.username);
             }
 
             window.addEventListener("popstate", (event) => updatePageState(event.state));
@@ -93,6 +109,16 @@
                     document.getElementById("logged-in-status").innerText = `Signed in as ${username}`;
                 }
             }
+
+            document.addEventListener("DOMContentLoaded", (event) => {
+                var mainDiv = document.getElementById("main");
+                var rootStyle = document.documentElement.style;
+                rootStyle.setProperty("--yellow", mainDiv.dataset.bgcolor);
+                rootStyle.setProperty("--black", mainDiv.dataset.fgcolor);
+                rootStyle.setProperty("--purple", mainDiv.dataset.accolor);
+
+                updateImageColors();
+            });
         </script>
     </head>
     <body>
@@ -136,17 +162,12 @@
 
             function updateImageColors() {
                 // Perform a palette swap on all gifs based on current page colors
-
                 document.querySelectorAll(".img-data").forEach(e => {
                     document.querySelectorAll(`.${e.id}`).forEach(t => {
                         t.src = customImage(e);
                     });
                 });
             }
-
-            // Update image colors on page load
-            document.addEventListener("DOMContentLoaded", updateImageColors);
-
         </script>
 
         <div class="page-header">
@@ -204,7 +225,7 @@
         {% endwith %}
 
         <!-- Page-Specific Content -->
-        <div class="main" id="main">
+        <div class="main" id="main" data-bgcolor="{{ bgcolor }}" data-fgcolor="{{ fgcolor }}" data-accolor="{{ accolor }}" data-username="{{ session['username'] }}">
         {% block body %}
         {% endblock %}
         </div>
diff --git a/templates/base.json b/templates/base.json
deleted file mode 100644
index c84d254..0000000
--- a/templates/base.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "username": "{{ session['username'] }}",
-    "bgcolor": "{{ bgcolor }}",
-    "fgcolor": "{{ fgcolor }}",
-    "accolor": "{{ accolor }}",
-    "title": {{ dumps(self.title()) | safe }},
-    "body": {{ dumps(self.body()) | safe }}
-}
diff --git a/templates/comment.html b/templates/comment.html
index 3ded208..dc6cbb0 100644
--- a/templates/comment.html
+++ b/templates/comment.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Write a Comment{% endblock %}
 
diff --git a/templates/edit-song.html b/templates/edit-song.html
index 8990e13..d8a20ec 100644
--- a/templates/edit-song.html
+++ b/templates/edit-song.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}{% if song %}Edit Song{% else %}Upload Song{% endif %}{% endblock %}
 
@@ -61,7 +61,7 @@ Most standard audio/video formats are supported - .wav, .mp3, .ogg, .mp4, etc.
 
 <script>
 // Automatically set song name from file name
-document.getElementById("file-select").addEventListener("change", function(e) {
+document.getElementById("song-file").addEventListener("change", function(e) {
     var songTitle = document.getElementById("song-title");
     if (e.target.files[0] && !songTitle.value) {
         var name = e.target.files[0].name;
diff --git a/templates/index.html b/templates/index.html
index 58a70fc..f04887a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Little Song Place{% endblock %}
 
diff --git a/templates/login.html b/templates/login.html
index c7b19f9..9c17e39 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Sign In{% endblock %}
 
diff --git a/templates/news.html b/templates/news.html
index f8cdad8..27da4fe 100644
--- a/templates/news.html
+++ b/templates/news.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Site News{% endblock %}
 
diff --git a/templates/playlist.html b/templates/playlist.html
index 2d2a1ed..8bc1868 100644
--- a/templates/playlist.html
+++ b/templates/playlist.html
@@ -1,19 +1,10 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}{{ name }}{% endblock %}
 
 {% block head -%}
 <meta property="og:title" content="{{ name }}" />
 <meta property="og:description" content="Playlist by {{ username }}" />
-<script>
-    // Apply user colors
-    document.addEventListener("DOMContentLoaded", (event) => {
-        var rootStyle = document.documentElement.style;
-        rootStyle.setProperty("--yellow", "{{ bgcolor }}");
-        rootStyle.setProperty("--black", "{{ fgcolor }}");
-        rootStyle.setProperty("--purple", "{{ accolor }}");
-    });
-</script>
 {%- endblock %}
 
 {% block body -%}
@@ -32,7 +23,7 @@ Playlist by <a href="/users/{{ username }}" class="profile-link">{{ username }}<
 {% if session["userid"] == userid -%}
 <p class="playlist-actions">
 <button class="button" onclick="showPlaylistEditor()">Edit</button>
-<button class="button" onclick="deletePlaylist()">Delete</button>
+<a href="/delete-playlist/{{ playlistid }}" class="button" onclick="return confirm('Are you sure you want to delete this playlist?')">Delete</a>
 </p>
 
 <script>
@@ -47,12 +38,6 @@ function hidePlaylistEditor() {
     document.querySelector(".playlist-actions").hidden = false;
     document.querySelector(".playlist-editor").hidden = true;
 }
-
-function deletePlaylist() {
-    if (confirm("Are you sure you want to delete this playlist?")) {
-        window.location.href = "/delete-playlist/{{ playlistid }}";
-    }
-}
 </script>
 
 {%- endif %}
diff --git a/templates/profile.html b/templates/profile.html
index ee649ce..97874f1 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -1,24 +1,7 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}{{ name }}'s profile{% endblock %}
 
-{% block head %}
-<!-- Include coloris library for color picker -->
-<link rel="stylesheet" href="/static/coloris.min.css"/>
-<script src="/static/coloris.min.js"></script>
-
-<script>
-    // Apply user colors
-    document.addEventListener("DOMContentLoaded", (event) => {
-        var rootStyle = document.documentElement.style;
-        rootStyle.setProperty("--yellow", "{{ bgcolor }}");
-        rootStyle.setProperty("--black", "{{ fgcolor }}");
-        rootStyle.setProperty("--purple", "{{ accolor }}");
-    });
-</script>
-
-{% endblock %}
-
 {% block body %}
 
 <!-- Username -->
diff --git a/templates/signup.html b/templates/signup.html
index 3dd4970..09bd893 100644
--- a/templates/signup.html
+++ b/templates/signup.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Create Account{% endblock %}
 
diff --git a/templates/song-list.html b/templates/song-list.html
index 1bb003c..5581ca9 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -61,7 +61,7 @@
             <div class="song-playlist-controls">
                 <form action="/append-to-playlist" method="post">
                     <input type="hidden" name="songid" value="{{ song.songid }}" id="playlist-selector-songid"/>
-                    <select name="playlistid" onchange="this.closest('form').submit()">
+                    <select name="playlistid" onchange="this.closest('form').requestSubmit()">
                         <option value="-1">Add to Playlist...</option>
                         {% for plist in current_user_playlists -%}
                         <option value="{{ plist.playlistid }}">{{ plist['name'] }}</option>
diff --git a/templates/song.html b/templates/song.html
index 411aae0..d993b91 100644
--- a/templates/song.html
+++ b/templates/song.html
@@ -1,17 +1,8 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block head %}
 <meta property="og:title" content="{{ song.title }}" />
 <meta property="og:description" content="Song by {{ song.username }}" />
-<script>
-    // Apply user colors
-    document.addEventListener("DOMContentLoaded", (event) => {
-        var rootStyle = document.documentElement.style;
-        rootStyle.setProperty("--yellow", "{{ bgcolor }}");
-        rootStyle.setProperty("--black", "{{ fgcolor }}");
-        rootStyle.setProperty("--purple", "{{ accolor }}");
-    });
-</script>
 {% endblock %}
 
 {% block title %}{{ song.title }}{% endblock %}
diff --git a/templates/songs-by-tag.html b/templates/songs-by-tag.html
index 7d22e33..a8e3dba 100644
--- a/templates/songs-by-tag.html
+++ b/templates/songs-by-tag.html
@@ -1,4 +1,4 @@
-{% if use_xml %}{% extends "base.xml" %}{% else %}{% extends "base.html" %}{% endif %}
+{% extends "base.html" %}
 
 {% block title %}Songs{% endblock %}