From eb53a4caf8aa9977d5db4969665c49a16efb2f39 Mon Sep 17 00:00:00 2001
From: weru <onewesh@gmail.com>
Date: Tue, 06 Oct 2020 09:55:35 +0000
Subject: [PATCH] enable user to toggle color mode
---
assets/js/index.js | 73 +++++++++++++++++++++++++++++++++---
1 files changed, 67 insertions(+), 6 deletions(-)
diff --git a/assets/js/index.js b/assets/js/index.js
index a7e6b9f..e6b5f32 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -207,13 +207,74 @@
}
})();
- (function lazyLoadImages() {
- const images = elems('img');
- images.forEach(function(image){
- // supported natively by most modern browsers.
- image.loading = "lazy";
+ const light = 'lit';
+ const dark = 'dim';
+ const storageKey = 'colorMode';
+ const key = '--color-mode';
+ const data = 'data-mode';
+ const bank = window.localStorage;
+
+ function currentMode() {
+ let acceptableChars = light + dark;
+ acceptableChars = [...acceptableChars];
+ let mode = getComputedStyle(doc).getPropertyValue(key).replace(/\"/g, '').trim();
+
+ mode = [...mode].filter(function(letter){
+ return acceptableChars.includes(letter);
});
- })();
+
+ return mode.join('');
+ }
+
+ function changeMode(isDarkMode) {
+ if(isDarkMode) {
+ bank.setItem(storageKey, light)
+ elemAttribute(doc, data, light);
+ } else {
+ bank.setItem(storageKey, dark);
+ elemAttribute(doc, data, dark);
+ }
+ }
+
+ (function lazy() {
+ function lazyLoadMedia(element) {
+ let mediaItems = elems(element);
+ if(mediaItems) {
+ Array.from(mediaItems).forEach(function(item) {
+ item.loading = "lazy";
+ });
+ }
+ }
+ lazyLoadMedia('iframe');
+ lazyLoadMedia('img');
+ })();
+
+ function setUserColorMode(mode = false) {
+ const isDarkMode = currentMode() == dark;
+ const storedMode = bank.getItem(storageKey);
+ if(storedMode) {
+ if(mode) {
+ changeMode(isDarkMode);
+ } else {
+ elemAttribute(doc, data, storedMode);
+ }
+ } else {
+ if(mode === true) {
+ changeMode(isDarkMode)
+ }
+ }
+ }
+
+ setUserColorMode();
+
+ doc.addEventListener('click', function(event) {
+ let target = event.target;
+ let modeClass = 'color_choice';
+ let isModeToggle = containsClass(target, modeClass);
+ if(isModeToggle) {
+ setUserColorMode(true);
+ }
+ });
}
window.addEventListener('load', loadActions());
--
Gitblit v1.10.0