From 335d9f569e48b20a939c7d679c64bc972de601db Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Tue, 8 Aug 2017 03:14:17 +0000
Subject: [PATCH] Overriding builtin themes with user defined css. Users should
 take advantage of the url query parmeters to choose which theme to override
 at load. Closes #36.

---
 webapp/titanembeds/static/css/embedstyle.css |  4 +++
 webapp/titanembeds/static/js/embed.js        | 28 ++++++++++++++------
 webapp/titanembeds/templates/embed.html.j2   |  4 +++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/webapp/titanembeds/static/css/embedstyle.css b/webapp/titanembeds/static/css/embedstyle.css
index 3b3f9e0..c77fe6b 100644
--- a/webapp/titanembeds/static/css/embedstyle.css
+++ b/webapp/titanembeds/static/css/embedstyle.css
@@ -301,6 +301,10 @@ body > div.navbar-fixed > nav > div {
   font-size: 85%;
 }
 
+.input-field label {
+  color: white;
+}
+
 a {
   color: #82b1ff;
 }
diff --git a/webapp/titanembeds/static/js/embed.js b/webapp/titanembeds/static/js/embed.js
index a959f87..e0c78d7 100644
--- a/webapp/titanembeds/static/js/embed.js
+++ b/webapp/titanembeds/static/js/embed.js
@@ -151,14 +151,20 @@
             $("#loginmodal").modal("open");
         });
         
-        $( "#theme-selector" ).change(function() {
+        $( "#theme-selector" ).change(function () {
             var theme = $("#theme-selector option:selected").val();
-            changeTheme(theme);
+            var keep_custom_css = $("#overwrite_theme_custom_css_checkbox").is(':checked');
+            changeTheme(theme, keep_custom_css);
+        });
+        
+        $("#overwrite_theme_custom_css_checkbox").change(function () {
+            var keep_custom_css = $("#overwrite_theme_custom_css_checkbox").is(':checked');
+            changeTheme(null, keep_custom_css);
         });
         
         var themeparam = getParameterByName('theme');
         var localstore_theme = localStorage.getItem("theme");
-        if ((getParameterByName("css") == null) && ((themeparam && $.inArray(themeparam, theme_options) != -1) || (localstore_theme))) {
+        if ((themeparam && $.inArray(themeparam, theme_options) != -1) || (localstore_theme)) {
             var theme;
             if (themeparam) {
                 theme = themeparam;
@@ -199,15 +205,21 @@
         }
     });
     
-    function changeTheme(theme) {
+    function changeTheme(theme=null, keep_custom_css=true) {
         if (theme == "") {
           $("#css-theme").attr("href", "");
           $("#user-defined-css").text(user_def_css);
           localStorage.removeItem("theme");
-        } else if ($.inArray(theme, theme_options) != -1) {
-            $("#user-defined-css").text("");
-            $("#css-theme").attr("href", "/static/themes/" + theme + "/css/style.css");
-            localStorage.setItem("theme", theme);
+        } else if ($.inArray(theme, theme_options) != -1 || theme == null) {
+            if (!keep_custom_css) {
+                $("#user-defined-css").text("");
+            } else {
+                $("#user-defined-css").text(user_def_css);
+            }
+            if (theme) {
+                $("#css-theme").attr("href", "/static/themes/" + theme + "/css/style.css");
+                localStorage.setItem("theme", theme);
+            }
         }
     }
     
diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2
index 5c81b29..0ca7dd1 100644
--- a/webapp/titanembeds/templates/embed.html.j2
+++ b/webapp/titanembeds/templates/embed.html.j2
@@ -134,6 +134,10 @@
               <option value="DiscordDark">DiscordDark</option>
               <option value="BetterTitan">BetterTitan</option>
             </select>
+            <p>
+              <input type="checkbox" class="filled-in" id="overwrite_theme_custom_css_checkbox" checked="checked" />
+              <label for="overwrite_theme_custom_css_checkbox">Overwrite Current Embed Theme w/ User CSS</label>
+            </p>
           </div>
         </div>
       </div>