Update page colors via ajax

diff --git a/main.py b/main.py
index d6b28e43af9f7bf0b2523c72c31e06662c45288d..ea9d7a696af6dc4d18de5f3cbb4e05a1f312045f 100644 (file)
--- 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 ff091383cbf0a6ac4251181e43d91d7bc402b0a7..e471844436a4fd041402a8cc920fb0eabc5ae76c 100644 (file)
--- 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 537819bb7c4bc07f9b4523a5d3ee8f4b993ccabe..c84d2544219a593ce52ac03af8e967f9f6d274d2 100644 (file)
--- 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 f963d79cca6e2821e347a200d14a210c95eaa114..453f54d0486ccc35e95cfe6130044ddaf1b39c01 100644 (file)
--- 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 5adc9e181dbcdcd154ac987961aaf1f1cf77285a..b8c9da1279d787422f90d317dd7a4a8be934cfe2 100644 (file)
--- 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) {