iv-org
/
invidious
mirror of https://github.com/iv-org/invidious.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add option to toggle theme without reload

This commit is contained in:
Omar Roth 2019-05-05 07:34:27 -05:00
parent 03be793930
commit bfa488f77d
No known key found for this signature in database
GPG Key ID: B8254FB7EC3D37F2
3 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/js/themes.js Normal file
View File

@ -0,0 +1,34 @@
var toggle_theme = document.getElementById('toggle_theme')
toggle_theme.href = 'javascript:void(0);';
toggle_theme.addEventListener('click', function () {
var dark_mode = document.getElementById('dark_theme').media == 'none';
var url = '/toggle_theme?redirect=false';
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 20000;
xhr.open('GET', url, true);
xhr.send();
set_mode(dark_mode);
localStorage.setItem('dark_mode', dark_mode);
});
window.addEventListener('storage', function (e) {
if (e.key == 'dark_mode') {
var dark_mode = e.newValue === 'true';
set_mode(dark_mode);
}
});
function set_mode(bool) {
document.getElementById('dark_theme').media = !bool ? 'none' : '';
document.getElementById('light_theme').media = bool ? 'none' : '';
if (bool) {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
} else {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
}
}

11
src/invidious.cr
View File

@ -1437,6 +1437,10 @@ get "/toggle_theme" do |env|
locale = LOCALES[env.get("preferences").as(Preferences).locale]?
referer = get_referer(env)
redirect = env.params.query["redirect"]?
redirect ||= "true"
redirect = redirect == "true"
if user = env.get? "user"
user = user.as(User)
preferences = user.preferences
@ -1463,7 +1467,12 @@ get "/toggle_theme" do |env|
end
end
env.redirect referer
if redirect
env.redirect referer
else
env.response.content_type = "application/json"
"{}"
end
end
post "/watch_ajax" do |env|

12
src/invidious/views/template.ecr
View File

@ -18,11 +18,8 @@
<link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= CURRENT_COMMIT %>">
<link rel="stylesheet" href="/css/ionicons.min.css?v=<%= CURRENT_COMMIT %>">
<link rel="stylesheet" href="/css/default.css?v=<%= CURRENT_COMMIT %>">
<% if env.get("preferences").as(Preferences).dark_mode %>
<link rel="stylesheet" href="/css/darktheme.css?v=<%= CURRENT_COMMIT %>">
<% else %>
<link rel="stylesheet" href="/css/lighttheme.css?v=<%= CURRENT_COMMIT %>">
<% end %>
<link rel="stylesheet" href="/css/darktheme.css?v=<%= CURRENT_COMMIT %>" id="dark_theme" <% if !env.get("preferences").as(Preferences).dark_mode %>media="none"<% end %>>
<link rel="stylesheet" href="/css/lighttheme.css?v=<%= CURRENT_COMMIT %>" id="light_theme" <% if env.get("preferences").as(Preferences).dark_mode %>media="none"<% end %>>
</head>
<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
@ -45,7 +42,7 @@
<div class="pure-u-1 pure-u-md-8-24 user-field">
<% if env.get? "user" %>
<div class="pure-u-1-4">
<a href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
<a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
<% if env.get("preferences").as(Preferences).dark_mode %>
<i class="icon ion-ios-sunny"></i>
<% else %>
@ -78,7 +75,7 @@
</div>
<% else %>
<div class="pure-u-1-3">
<a href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
<a id="toggle_theme" href="/toggle_theme?referer=<%= env.get?("current_page") %>" class="pure-menu-heading">
<% if env.get("preferences").as(Preferences).dark_mode %>
<i class="icon ion-ios-sunny"></i>
<% else %>
@ -153,6 +150,7 @@
</div>
<div class="pure-u-1 pure-u-md-2-24"></div>
</div>
<script src="/js/themes.js?v=<%= CURRENT_COMMIT %>"></script>
</body>
</html>