Compare commits
No commits in common. "e35bf5f4660c1e11881bed7f62a68ab5ea35aed1" and "7709817602984dc05068cce05e233001107f6f64" have entirely different histories.
e35bf5f466
...
7709817602
|
@ -108,7 +108,7 @@
|
|||
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
|
||||
<script src="/js/script.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -1,74 +1,38 @@
|
|||
// TODO move this file into assets and use hugo pipes and babel
|
||||
|
||||
(function(){
|
||||
var STATES = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
|
||||
var LABELS = ["On", "Off", "Auto"]; // display text of dark mode setting - corresponds with STATES array
|
||||
var modeBtnText = document.getElementById('cs-mode-button-state');
|
||||
var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
|
||||
var labels = ["On", "Off", "Auto"];
|
||||
var activeState = -1;
|
||||
|
||||
var CS_BTN_CLASS = 'cs-mode-button';
|
||||
var CS_BTN_CONTAINER_CLASS = 'cs-mode-container';
|
||||
var CS_BTN_TEXT_CLASS = 'cs-mode-button-state';
|
||||
var CS_MODE_COOKIE_NAME = "cs_mode"; // name of cookie that stores dark mode setting
|
||||
|
||||
var MODE_BTN_TEXT_ELEMENT = document.getElementById(CS_BTN_TEXT_CLASS);
|
||||
|
||||
var activeState = -1; // the active index of the STATES array
|
||||
var cookieMode; // dark mode setting value retrieved from cookie
|
||||
|
||||
// toggles the color scheme between the states specified in the array STATES
|
||||
function toggleColorscheme() {
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
if (document.body.classList.contains(STATES[i])) {
|
||||
document.body.classList.remove(STATES[activeState]);
|
||||
activeState = activeState < STATES.length - 1 ? activeState + 1 : 0;
|
||||
document.body.classList.add(STATES[activeState]);
|
||||
MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
|
||||
document.cookie = CS_MODE_COOKIE_NAME + "=" + STATES[activeState] + "; path=/;max-age=315360000";
|
||||
for(var i = states.length - 1; i >= 0; i--) {
|
||||
if (document.body.classList.contains(states[i])) {
|
||||
document.body.classList.remove(states[activeState]);
|
||||
activeState = activeState < states.length - 1 ? activeState + 1 : 0;
|
||||
document.body.classList.add(states[activeState]);
|
||||
modeBtnText.innerText = labels[activeState];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// returns the value fo the cookie named name
|
||||
// or null if not present.
|
||||
function getCookie(name) {
|
||||
var cookieList = document.cookie.split(";")
|
||||
var value = null;
|
||||
// TODO use cookie to record state of dark mode
|
||||
|
||||
for (var i = 0; i < cookieList.length; i++) {
|
||||
if (cookieList[i].indexOf(CS_MODE_COOKIE_NAME + "=") > -1) {
|
||||
value = cookieList[i].substring(cookieList[i].indexOf('=') + 1);
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
cookieMode = getCookie(CS_MODE_COOKIE_NAME);
|
||||
|
||||
if (cookieMode !== null) {
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
document.body.classList.remove(STATES[i]);
|
||||
}
|
||||
document.body.classList.add(cookieMode);
|
||||
// cannot set activeState directly in here, in case cookie is not present
|
||||
// (in which case, document.body will already have the class which was
|
||||
// specified in /layouts/_default/baseof.html, which we will use later).
|
||||
}
|
||||
// now we can use document.body.classlist to set activeState.
|
||||
for(var i = 0; i < STATES.length; i++) {
|
||||
if (document.body.classList.contains(STATES[i])) {
|
||||
for(var i = states.length - 1; i >= 0; i--) {
|
||||
if (document.body.classList.contains(states[i])) {
|
||||
activeState = i;
|
||||
modeBtnText.innerText = labels[activeState];
|
||||
}
|
||||
}
|
||||
MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
|
||||
|
||||
// if activeState is valid, add button's event listener,
|
||||
// otherwise hide the toggle button.
|
||||
if (activeState > -1) {
|
||||
document.getElementById(CS_BTN_CLASS).addEventListener('click', function() {
|
||||
document.getElementById('cs-mode-button').addEventListener('click', function() {
|
||||
toggleColorscheme();
|
||||
})
|
||||
} else {
|
||||
document.getElementById(CS_BTN_CONTAINER_CLASS).style.display = "none";
|
||||
document.getElementById('cs-mode-container').style.display = "none";
|
||||
}
|
||||
})();
|
||||
|
||||
|
|
Loading…
Reference in New Issue