Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-11-15 02:21:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Jeremy Zhang 2017-08-08 03:14:17 +00:00
parent 1b8da1a5c1
commit 335d9f569e
3 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/titanembeds/static/css/embedstyle.css
View File

@ -301,6 +301,10 @@ body > div.navbar-fixed > nav > div {
font-size: 85%; font-size: 85%;
} }
.input-field label {
color: white;
}
a { a {
color: #82b1ff; color: #82b1ff;
} }

22
webapp/titanembeds/static/js/embed.js
View File

@ -151,14 +151,20 @@
$("#loginmodal").modal("open"); $("#loginmodal").modal("open");
}); });
$( "#theme-selector" ).change(function() { $( "#theme-selector" ).change(function () {
var theme = $("#theme-selector option:selected").val(); 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 themeparam = getParameterByName('theme');
var localstore_theme = localStorage.getItem("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; var theme;
if (themeparam) { if (themeparam) {
theme = themeparam; theme = themeparam;
@ -199,17 +205,23 @@
} }
}); });
function changeTheme(theme) { function changeTheme(theme=null, keep_custom_css=true) {
if (theme == "") { if (theme == "") {
$("#css-theme").attr("href", ""); $("#css-theme").attr("href", "");
$("#user-defined-css").text(user_def_css); $("#user-defined-css").text(user_def_css);
localStorage.removeItem("theme"); localStorage.removeItem("theme");
} else if ($.inArray(theme, theme_options) != -1) { } else if ($.inArray(theme, theme_options) != -1 || theme == null) {
if (!keep_custom_css) {
$("#user-defined-css").text(""); $("#user-defined-css").text("");
} else {
$("#user-defined-css").text(user_def_css);
}
if (theme) {
$("#css-theme").attr("href", "/static/themes/" + theme + "/css/style.css"); $("#css-theme").attr("href", "/static/themes/" + theme + "/css/style.css");
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
} }
} }
}
/* https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript */ /* https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript */
function getParameterByName(name, url) { function getParameterByName(name, url) {

4
webapp/titanembeds/templates/embed.html.j2
View File

@ -134,6 +134,10 @@
<option value="DiscordDark">DiscordDark</option> <option value="DiscordDark">DiscordDark</option>
<option value="BetterTitan">BetterTitan</option> <option value="BetterTitan">BetterTitan</option>
</select> </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> </div>
</div> </div>