From: Chris Fulljames <christianfulljames@gmail.com>
Date: Thu, 20 Feb 2025 00:38:48 +0000 (-0500)
Subject: Update page colors via ajax
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=ce921fba1e4df0f1634edb8a64be967c1eacac9d;p=littlesongplace.git

Update page colors via ajax
---

diff --git a/main.py b/main.py
index d6b28e4..ea9d7a6 100644
--- a/main.py
+++ b/main.py
@@ -174,9 +174,9 @@ def users_profile(profile_username):
             name=profile_username,
             userid=profile_userid,
             bio=profile_bio,
-            user_fgcolor=profile_data["fgcolor"],
-            user_bgcolor=profile_data["bgcolor"],
-            user_accolor=profile_data["accolor"],
+            fgcolor=profile_data["fgcolor"],
+            bgcolor=profile_data["bgcolor"],
+            accolor=profile_data["accolor"],
             playlists=plist_data,
             songs=songs,
             user_has_pfp=(get_user_images_path(profile_userid)/"pfp.jpg").exists(),
@@ -520,9 +520,9 @@ def song(userid, songid):
                     "song.html",
                     song_list=render_template("song-list.html", songs=[song]),
                     song=song,
-                    user_bgcolor=user_data["bgcolor"],
-                    user_fgcolor=user_data["fgcolor"],
-                    user_accolor=user_data["accolor"])
+                    bgcolor=user_data["bgcolor"],
+                    fgcolor=user_data["fgcolor"],
+                    accolor=user_data["accolor"])
         except ValueError:
             abort(404)
     else:
@@ -871,9 +871,9 @@ def playlists(playlistid):
             private=plist_data["private"],
             userid=plist_data["userid"],
             username=plist_data["username"],
-            user_bgcolor=plist_data["bgcolor"],
-            user_fgcolor=plist_data["fgcolor"],
-            user_accolor=plist_data["accolor"],
+            bgcolor=plist_data["bgcolor"],
+            fgcolor=plist_data["fgcolor"],
+            accolor=plist_data["accolor"],
             songs=songs,
             song_list=render_template("song-list.html", songs=songs))
 
@@ -936,6 +936,9 @@ def inject_global_vars():
         current_user_playlists=get_current_user_playlists(),
         use_json=use_json,
         dumps=json.dumps,
+        bgcolor="#e8e6b5",
+        fgcolor="#695c73",
+        accolor="#9373a9",
     )
 
 
diff --git a/templates/base.html b/templates/base.html
index ff09138..e471844 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -56,8 +56,16 @@
                 var event = new Event("DOMContentLoaded");
                 document.dispatchEvent(event);
 
+                // Update page colors
+                var rootStyle = document.documentElement.style;
+                console.log(data);
+                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();
             }
             function updateNavbar(username) {
                 var loggedIn = username ? true : false;
diff --git a/templates/base.json b/templates/base.json
index 537819b..c84d254 100644
--- a/templates/base.json
+++ b/templates/base.json
@@ -1,5 +1,8 @@
 {
-    "username": "{{ session['username'] | safe }}",
+    "username": "{{ session['username'] }}",
+    "bgcolor": "{{ bgcolor }}",
+    "fgcolor": "{{ fgcolor }}",
+    "accolor": "{{ accolor }}",
     "title": {{ dumps(self.title()) | safe }},
     "body": {{ dumps(self.body()) | safe }}
 }
diff --git a/templates/playlist.html b/templates/playlist.html
index f963d79..453f54d 100644
--- a/templates/playlist.html
+++ b/templates/playlist.html
@@ -9,9 +9,9 @@
     // Apply user colors
     document.addEventListener("DOMContentLoaded", (event) => {
         var rootStyle = document.documentElement.style;
-        {% if user_bgcolor %} rootStyle.setProperty("--yellow", "{{ user_bgcolor }}"); {% endif %}
-        {% if user_fgcolor %} rootStyle.setProperty("--black", "{{ user_fgcolor }}"); {% endif %}
-        {% if user_accolor %} rootStyle.setProperty("--purple", "{{ user_accolor }}"); {% endif %}
+        rootStyle.setProperty("--yellow", "{{ bgcolor }}");
+        rootStyle.setProperty("--black", "{{ fgcolor }}");
+        rootStyle.setProperty("--purple", "{{ accolor }}");
     });
 </script>
 {%- endblock %}
diff --git a/templates/profile.html b/templates/profile.html
index 5adc9e1..b8c9da1 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -11,9 +11,9 @@
     // Apply user colors
     document.addEventListener("DOMContentLoaded", (event) => {
         var rootStyle = document.documentElement.style;
-        {% if user_bgcolor %} rootStyle.setProperty("--yellow", "{{ user_bgcolor }}"); {% endif %}
-        {% if user_fgcolor %} rootStyle.setProperty("--black", "{{ user_fgcolor }}"); {% endif %}
-        {% if user_accolor %} rootStyle.setProperty("--purple", "{{ user_accolor }}"); {% endif %}
+        rootStyle.setProperty("--yellow", "{{ bgcolor }}");
+        rootStyle.setProperty("--black", "{{ fgcolor }}");
+        rootStyle.setProperty("--purple", "{{ accolor }}");
     });
 </script>
 
@@ -55,15 +55,15 @@
     <table>
         <tr>
             <td> <label for="bgcolor">Background</label> </td>
-            <td> <input name="bgcolor" type="text" id="bgcolor-input" value="{{ user_bgcolor or '#e8e6b5' }}" readonly data-coloris oninput="updateColor('--yellow', this.value)"/> </td>
+            <td> <input name="bgcolor" type="text" id="bgcolor-input" value="{{ bgcolor }}" readonly data-coloris oninput="updateColor('--yellow', this.value)"/> </td>
         </tr>
         <tr>
             <td> <label for="fgcolor">Text</label> </td>
-            <td> <input name="fgcolor" type="text" id="fgcolor-input" value="{{ user_fgcolor or '#695c73' }}" readonly data-coloris oninput="updateColor('--black', this.value)"/> </td>
+            <td> <input name="fgcolor" type="text" id="fgcolor-input" value="{{ fgcolor }}" readonly data-coloris oninput="updateColor('--black', this.value)"/> </td>
         </tr>
         <tr>
             <td> <label for="accolor">Accent</label> </td>
-            <td> <input name="accolor" type="text" id="accolor-input" value="{{ user_accolor or '#9373a9' }}" readonly data-coloris oninput="updateColor('--purple', this.value)"/> </td>
+            <td> <input name="accolor" type="text" id="accolor-input" value="{{ accolor }}" readonly data-coloris oninput="updateColor('--purple', this.value)"/> </td>
         </tr>
         <script>
             function updateColor(name, value) {