docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

js: move theme switcher to its own script, and use localstorage 

rewrite the script to not depend on jQuery, so that it can be run as
soon as possible.

Also switch to use localstorage instead of cookies, which is a more
suitable mechanism for this, and use the same HTML include as was
used on the landing-page for the whole site.

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2020-10-13 22:02:06 +02:00
parent 934e125ea9
commit 6b6ef9fe0d
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
6 changed files with 34 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/body-landing.html
View File

@ -470,9 +470,9 @@
<footer class="footer">
{% include footer.html %}
</footer>
<script src="/js/theme-switcher.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/landing-page.js"></script>
<script defer src="/js/metadata.js"></script>
<script defer src="/js/search.js"></script>

18
_includes/body.html
View File

@ -52,22 +52,7 @@
<li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>
{%- endif -%}
<li><a href="https://github.com/docker/docker.github.io/issues/new?body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})" class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
<li>
<div class="toggle-mode">
<div class="icon">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div class="toggle-switch">
<label class="switch">
<input type="checkbox" id="switch-style">
<div class="slider round"></div>
</label>
</div>
<div class="icon">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</div>
</div>
</li>
<li>{%- include theme-switch.html -%}</li>
</ul>
</div>
{%- unless page.notoc -%}
@ -88,6 +73,7 @@
{% include footer.html %}
</footer>
<script>const pageURL = "{{ page.url }}";</script>
<script src="/js/theme-switcher.js"></script>
<script defer src="/js/anchorlinks.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>

2
_includes/theme-switch.html
View File

@ -5,7 +5,7 @@
<div class="toggle-switch">
<label class="switch">
<input type="checkbox" id="switch-style">
<div class="slider round"></div>
<span class="slider round"></span>
</label>
</div>
<div class="icon">

62
js/docs.js
View File

@ -152,42 +152,8 @@ $(window).scroll(function () {
}
});
// Cookie functions
function createCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
var selectedNightTheme = readCookie("night");
if (selectedNightTheme === "true" || (selectedNightTheme === null && prefersDark)) {
applyNight();
$("#switch-style").prop("checked", true);
} else {
applyDay();
$("#switch-style").prop("checked", false);
}
/*
* toggle menu *********************************************************************
* toggle menu *****************************************************************
*/
$("#menu-toggle").click(function (e) {
@ -266,7 +232,7 @@ $(document).ready(function () {
});
/*
* make dropdown show on hover *********************************************************************
* make dropdown show on hover *************************************************
*/
$("ul.nav li.dropdown").hover(function () {
@ -276,29 +242,7 @@ $("ul.nav li.dropdown").hover(function () {
});
/*
* swapStyleSheet*********************************************************************
*/
function applyNight() {
$("body").addClass("night");
}
function applyDay() {
$("body").removeClass("night");
}
$("#switch-style").change(function () {
if ($(this).is(":checked")) {
applyNight();
createCookie("night", true, 999)
} else {
applyDay();
createCookie("night", false, 999);
}
});
/*
* Components *********************************************************************
* Components ******************************************************************
*/
$(function () {

50
js/landing-page.js
View File

@ -1,50 +0,0 @@
// Cookie functions
function createCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
var selectedNightTheme = readCookie("night");
if (selectedNightTheme === "true" || (selectedNightTheme === null && prefersDark)) {
applyNight();
$("#switch-style").prop("checked", true);
} else {
applyDay();
$("#switch-style").prop("checked", false);
}
function applyNight() {
$("body").addClass("night");
}
function applyDay() {
$("body").removeClass("night");
}
$("#switch-style").change(function () {
if ($(this).is(":checked")) {
applyNight();
createCookie("night", true, 999)
} else {
applyDay();
createCookie("night", false, 999);
}
});

27
js/theme-switcher.js Normal file
View File

@ -0,0 +1,27 @@
// Replacement for jQuery $(selector) and $.onready()
const _ = s => document.querySelector(s);
const ready = f => document.readyState !== 'loading' ? f() : document.addEventListener('DOMContentLoaded', f)
const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null;
if (selectedTheme !== null) {
if (selectedTheme === "night") _("body").classList.add("night");
} else if (darkMode) {
_("body").classList.add("night");
}
function themeToggler() {
const sw = _("#switch-style"), b = _("body");
if (sw && b) {
sw.checked = b.classList.contains("night")
sw.addEventListener("change", function (){
b.classList.toggle("night", this.checked)
if (window.localStorage) {
this.checked ? localStorage.setItem("theme", "night") : localStorage.setItem("theme", "day")
}
})
}
}
ready(themeToggler)