Add color switcher to toolbar

This commit is contained in:
marudor 2019-05-16 15:22:47 +02:00
parent 5c2388d3a2
commit 87e74ca90d
No known key found for this signature in database
GPG key ID: 914085684F88D2C1
6 changed files with 32 additions and 19 deletions

File diff suppressed because one or more lines are too long

12
public/static/js/theme.js Normal file
View file

@ -0,0 +1,12 @@
var validThemes = ['dark.min', 'light.min'];
var currentTheme = localStorage.getItem('theme');
if (!validThemes.includes(currentTheme)) {
currentTheme = window.matchMedia('(prefers-color-scheme: dark').matches ? 'dark.min' : 'light.min';
}
addStyleSheet(currentTheme, 'theme');
function toggleTheme() {
currentTheme = currentTheme === 'dark.min' ? 'light.min' : 'dark.min';
localStorage.setItem('theme', currentTheme);
addStyleSheet(currentTheme, 'theme');
}

1
public/static/js/theme.min.js vendored Normal file
View file

@ -0,0 +1 @@
var validThemes=["dark.min","light.min"],currentTheme=localStorage.getItem("theme");function toggleTheme(){currentTheme="dark.min"===currentTheme?"light.min":"dark.min",localStorage.setItem("theme",currentTheme),addStyleSheet(currentTheme,"theme")}validThemes.includes(currentTheme)||(currentTheme=window.matchMedia("(prefers-color-scheme: dark").matches?"dark.min":"light.min"),addStyleSheet(currentTheme,"theme");

View file

@ -1 +1 @@
function upd_journey_data(){$(".countdown").each(function(){j_duration=$(this).data("duration"),j_arrival=$(this).data("arrival")})}function upd_countdown(){var t=Date.now()/1e3;j_arrival>0&&(j_arrival>t?$(".countdown").text("Ankunft in "+Math.round((j_arrival-t)/60)+" Minuten"):$(".countdown").text("Ziel erreicht"))}function tvly_run(t,a,e){var n='<i class="material-icons">error</i>',i=$('<div class="progress"><div class="indeterminate"></div></div>');t.hide(),t.after(i),$.post("/action",a,function(a){a.success?$(location).attr("href",a.redirect_to):(M.toast({html:n+" "+a.error}),i.remove(),e&&e(),t.append(" "+n),t.show())})}function tvly_update(){$.get("/ajax/status_card.html",function(t){$(".statuscol").html(t),tvly_reg_handlers(),upd_journey_data(),setTimeout(tvly_update,4e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),upd_countdown(),setTimeout(tvly_update,5e3)})}function tvly_update_public(){var t;$(".publicstatuscol").each(function(){t=$(this).data("user")}),$.get("/ajax/status/"+t+".html",function(t){$(".publicstatuscol").html(t),upd_journey_data(),setTimeout(tvly_update_public,4e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),upd_countdown(),setTimeout(tvly_update_public,5e3)})}function tvly_journey_progress(){var t=Date.now()/1e3,a=0;j_duration>0&&(a=1-(j_arrival-t)/j_duration,a<0&&(a=0),a>1&&(a=1),$(".progress .determinate").css("width",100*a+"%"),setTimeout(tvly_journey_progress,5e3))}function tvly_reg_handlers(){$(".action-checkin").click(function(){var t=$(this);tvly_run(t,{action:"checkin",station:t.data("station"),train:t.data("train")})}),$(".action-checkout").click(function(){var t=$(this),a={action:"checkout",station:t.data("station"),force:t.data("force")};tvly_run(t,a,function(){t.append(" Ohne Echtzeitdaten auschecken?"),t.data("force",!0)})}),$(".action-undo").click(function(){var t=$(this);tvly_run(t,{action:"undo",undo_id:t.data("id")})}),$(".action-cancelled-from").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_from",station:t.data("station"),train:t.data("train")})}),$(".action-cancelled-to").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_to",station:t.data("station"),force:!0})}),$(".action-delete").click(function(){var t=$(this),a={action:"delete",id:t.data("id"),checkin:t.data("checkin"),checkout:t.data("checkout")};really_delete=confirm("Diese Zugfahrt wirklich löschen? Der Eintrag wird sofort aus der Datenbank entfernt und kann nicht wiederhergestellt werden."),really_delete&&tvly_run(t,a)}),$(".action-share").click(function(){navigator.share&&(shareObj={text:$(this).data("text")},$(this).data("url")&&(shareObj.url=$(this).data("url")),navigator.share(shareObj))}),$(".action-share").length&&!navigator.share&&$(".action-share").css("display","none")}var j_duration=0,j_arrival=0;$(document).ready(function(){tvly_reg_handlers(),$(".statuscol .autorefresh").length&&(upd_journey_data(),setTimeout(tvly_update,4e4),setTimeout(tvly_journey_progress,5e3)),$(".publicstatuscol .autorefresh").length&&(upd_journey_data(),setTimeout(tvly_update_public,4e4),setTimeout(tvly_journey_progress,5e3)),$("a[href]").click(function(){$("nav .preloader-wrapper").addClass("active")})});
var j_duration=0,j_arrival=0;function upd_journey_data(){$(".countdown").each(function(){j_duration=$(this).data("duration"),j_arrival=$(this).data("arrival")})}function upd_countdown(){var t=Date.now()/1e3;0<j_arrival&&(t<j_arrival?$(".countdown").text("Ankunft in "+Math.round((j_arrival-t)/60)+" Minuten"):$(".countdown").text("Ziel erreicht"))}function tvly_run(a,t,e){var n='<i class="material-icons">error</i>',i=$('<div class="progress"><div class="indeterminate"></div></div>');a.hide(),a.after(i),$.post("/action",t,function(t){t.success?$(location).attr("href",t.redirect_to):(M.toast({html:n+" "+t.error}),i.remove(),e&&e(),a.append(" "+n),a.show())})}function tvly_update(){$.get("/ajax/status_card.html",function(t){$(".statuscol").html(t),tvly_reg_handlers(),upd_journey_data(),setTimeout(tvly_update,4e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),upd_countdown(),setTimeout(tvly_update,5e3)})}function tvly_update_public(){var t;$(".publicstatuscol").each(function(){t=$(this).data("user")}),$.get("/ajax/status/"+t+".html",function(t){$(".publicstatuscol").html(t),upd_journey_data(),setTimeout(tvly_update_public,4e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),upd_countdown(),setTimeout(tvly_update_public,5e3)})}function tvly_journey_progress(){var t=Date.now()/1e3,a=0;0<j_duration&&((a=1-(j_arrival-t)/j_duration)<0&&(a=0),1<a&&(a=1),$(".progress .determinate").css("width",100*a+"%"),setTimeout(tvly_journey_progress,5e3))}function tvly_reg_handlers(){$(".action-checkin").click(function(){var t=$(this),a={action:"checkin",station:t.data("station"),train:t.data("train")};tvly_run(t,a)}),$(".action-checkout").click(function(){var t=$(this),a={action:"checkout",station:t.data("station"),force:t.data("force")};tvly_run(t,a,function(){t.append(" Ohne Echtzeitdaten auschecken?"),t.data("force",!0)})}),$(".action-undo").click(function(){var t=$(this),a={action:"undo",undo_id:t.data("id")};tvly_run(t,a)}),$(".action-cancelled-from").click(function(){var t=$(this),a={action:"cancelled_from",station:t.data("station"),train:t.data("train")};tvly_run(t,a)}),$(".action-cancelled-to").click(function(){var t=$(this),a={action:"cancelled_to",station:t.data("station"),force:!0};tvly_run(t,a)}),$(".action-delete").click(function(){var t=$(this),a={action:"delete",id:t.data("id"),checkin:t.data("checkin"),checkout:t.data("checkout")};really_delete=confirm("Diese Zugfahrt wirklich löschen? Der Eintrag wird sofort aus der Datenbank entfernt und kann nicht wiederhergestellt werden."),really_delete&&tvly_run(t,a)}),$(".action-share").click(function(){navigator.share&&(shareObj={text:$(this).data("text")},$(this).data("url")&&(shareObj.url=$(this).data("url")),navigator.share(shareObj))}),$(".action-share").length&&!navigator.share&&$(".action-share").css("display","none")}$(document).ready(function(){tvly_reg_handlers(),$(".statuscol .autorefresh").length&&(upd_journey_data(),setTimeout(tvly_update,4e4),setTimeout(tvly_journey_progress,5e3)),$(".publicstatuscol .autorefresh").length&&(upd_journey_data(),setTimeout(tvly_update_public,4e4),setTimeout(tvly_journey_progress,5e3)),$("a[href]").click(function(){$("nav .preloader-wrapper").addClass("active")})});

View file

@ -2,6 +2,6 @@
set -x
for file in autocomplete geolocation travelynx-actions; do
for file in autocomplete geolocation travelynx-actions theme; do
uglifyjs public/static/js/${file}.js -c -m > public/static/js/${file}.min.js
done

View file

@ -19,19 +19,21 @@
<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
<link rel="manifest" href="/static/<%= $av %>/manifest.json">
<script>
function addStyleSheet(path) {
var st = document.createElement('link');
st.href = path;
st.rel = 'stylesheet';
document.head.appendChild(st);
}
if (window.matchMedia('(prefers-color-scheme: dark').matches) {
addStyleSheet("/static/<%= $av %>/css/dark.min.css");
} else {
addStyleSheet("/static/<%= $av %>/css/light.min.css");
function addStyleSheet(name, id) {
var path = '/static/<%=$av%>/css/' + name + '.css';
var old = document.getElementById(id);
if (old) {
old.href = path;
} else {
var st = document.createElement('link');
st.id = id;
st.href = "/static/<%=$av%>/css/" + name + '.css';
st.rel = 'stylesheet';
document.head.appendChild(st);
}
}
</script>
%= javascript "/static/${av}/js/theme.min.js"
<noscript>
%= stylesheet "/static/${av}/css/light.min.css"
</noscript>
@ -67,6 +69,9 @@
</div>
</div>
</li>
<li class="waves-effect waves-light">
<a onClick="javascript:toggleTheme()"><i class="material-icons">invert_colors</i></a>
</li>
% if (is_user_authenticated()) {
<li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li>
<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li>