Compare commits

...

2 Commits

Author SHA1 Message Date
ray e35bf5f466 tidy up code 2020-02-02 21:22:55 +00:00
ray 655cb65d46 fix script.js path.
change relative path of js/script.js to absolute path.
2020-02-02 21:22:24 +00:00
2 changed files with 54 additions and 18 deletions

View File

@ -108,7 +108,7 @@
{{ template "_internal/google_analytics.html" . }} {{ template "_internal/google_analytics.html" . }}
<script src="js/script.js"></script> <script src="/js/script.js"></script>
</body> </body>
</html> </html>

View File

@ -1,38 +1,74 @@
// TODO move this file into assets and use hugo pipes and babel // TODO move this file into assets and use hugo pipes and babel
(function(){ (function(){
var modeBtnText = document.getElementById('cs-mode-button-state'); var STATES = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"]; var LABELS = ["On", "Off", "Auto"]; // display text of dark mode setting - corresponds with STATES array
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() { function toggleColorscheme() {
for(var i = states.length - 1; i >= 0; i--) { for(var i = 0; i < STATES.length; i++) {
if (document.body.classList.contains(states[i])) { if (document.body.classList.contains(STATES[i])) {
document.body.classList.remove(states[activeState]); document.body.classList.remove(STATES[activeState]);
activeState = activeState < states.length - 1 ? activeState + 1 : 0; activeState = activeState < STATES.length - 1 ? activeState + 1 : 0;
document.body.classList.add(states[activeState]); document.body.classList.add(STATES[activeState]);
modeBtnText.innerText = labels[activeState]; MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
document.cookie = CS_MODE_COOKIE_NAME + "=" + STATES[activeState] + "; path=/;max-age=315360000";
break; break;
} }
} }
} }
// TODO use cookie to record state of dark mode // returns the value fo the cookie named name
// or null if not present.
function getCookie(name) {
var cookieList = document.cookie.split(";")
var value = null;
for(var i = states.length - 1; i >= 0; i--) { for (var i = 0; i < cookieList.length; i++) {
if (document.body.classList.contains(states[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])) {
activeState = 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) { if (activeState > -1) {
document.getElementById('cs-mode-button').addEventListener('click', function() { document.getElementById(CS_BTN_CLASS).addEventListener('click', function() {
toggleColorscheme(); toggleColorscheme();
}) })
} else { } else {
document.getElementById('cs-mode-container').style.display = "none"; document.getElementById(CS_BTN_CONTAINER_CLASS).style.display = "none";
} }
})(); })();