info/phpapprentice
1
0
Fork 0
mirror of https://github.com/restoreddev/phpapprentice.git synced 2025-08-06 06:47:58 +02:00
Code Issues Releases Wiki Activity

Adding dark mode support

Browse Source
This commit is contained in:
Andrew Davis
2020-02-02 10:24:16 -06:00
parent 2240682681
commit 4e8b26a3b0
7 changed files with 320 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
assets/site.js
View File

@@ -1,39 +1,27 @@
var onLoad = function () {
var menuButton = document.querySelector('.menu-button');
// Dark mode
var bodyTag = document.querySelector('body');
if (localStorage.getItem('dark_mode') === 'true') {
bodyTag.className = 'dark-mode';
}
// stop execution if menu button does not exist on page
if (!menuButton) {
return;
var darkMode = document.getElementById('dark_mode');
if (localStorage.getItem('dark_mode') === 'true') {
darkMode.checked = true;
} else {
darkMode.checked = false;
}
darkMode.addEventListener('change', function (e) {
if (this.checked) {
localStorage.setItem('dark_mode', true);
bodyTag.className = 'dark-mode';
} else {
localStorage.setItem('dark_mode', false);
bodyTag.className = 'light-mode';
}
});
var modalButton = document.querySelector('.modal-button');
var modal = document.querySelector('.modal');
var modalContent = document.querySelector('.modal-content');
var clickEvent = function (e) {
var modal = document.querySelector('.modal');
if (modal.classList.contains('closed')) {
modal.classList.remove('closed')
} else {
modal.classList.add('closed')
}
};
menuButton.addEventListener('click', clickEvent);
modalButton.addEventListener('click', clickEvent);
modal.addEventListener('click', function (e) {
var target = e.target
do {
if (target == modalContent) {
return;
}
target = target.parentNode;
} while (target);
modal.classList.add('closed')
});
};
// Arrow key bindings
document.onkeydown = function (e) {
e = e || window.event;
@@ -60,8 +48,38 @@ document.onkeydown = function (e) {
}
};
if (document.readyState !== 'loading') {
onLoad();
} else {
document.addEventListener('DOMContentLoaded', onLoad);
// Table of contents
var menuButton = document.querySelector('.menu-button');
if (!menuButton) {
throw new Error('No menu button');
}
var modalButton = document.querySelector('.modal-button');
var modal = document.querySelector('.modal');
var modalContent = document.querySelector('.modal-content');
var clickEvent = function (e) {
var modal = document.querySelector('.modal');
if (modal.classList.contains('closed')) {
modal.classList.remove('closed')
} else {
modal.classList.add('closed')
}
};
menuButton.addEventListener('click', clickEvent);
modalButton.addEventListener('click', clickEvent);
modal.addEventListener('click', function (e) {
var target = e.target
do {
if (target == modalContent) {
return;
}
target = target.parentNode;
} while (target);
modal.classList.add('closed')
});