michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: JS

Browse source
This commit is contained in:
George Cushen 2020-12-08 22:17:17 +00:00
commit 1d54566688
2 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
wowchemy/assets/js/wowchemy-theming.js
View file

@ -9,7 +9,7 @@
import {fadeIn} from './wowchemy-animation'; import {fadeIn} from './wowchemy-animation';
function getThemeMode() { function getThemeMode() {
return parseInt(localStorage.getItem('dark_mode') || 2); return parseInt(localStorage.getItem('wcTheme') || 2);
} }
function canChangeTheme() { function canChangeTheme() {
@ -59,13 +59,13 @@ function changeThemeModeClick(newMode) {
let isDarkTheme; let isDarkTheme;
switch (newMode) { switch (newMode) {
case 0: case 0:
localStorage.setItem('dark_mode', '1'); localStorage.setItem('wcTheme', '1');
isDarkTheme = true; isDarkTheme = true;
console.info('User changed theme variation to Dark.'); console.info('User changed theme variation to Dark.');
showActiveTheme(0); showActiveTheme(0);
break; break;
case 1: case 1:
localStorage.setItem('dark_mode', '2'); localStorage.setItem('wcTheme', '2');
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// The visitor prefers dark themes and switching to the dark variation is allowed by admin. // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
isDarkTheme = true; isDarkTheme = true;
@ -73,13 +73,14 @@ function changeThemeModeClick(newMode) {
// The visitor prefers light themes and switching to the dark variation is allowed by admin. // The visitor prefers light themes and switching to the dark variation is allowed by admin.
isDarkTheme = false; isDarkTheme = false;
} else { } else {
isDarkTheme = window.wc.isSiteThemeDark; // Use the site's default theme variation based on `light` in the theme file. // Use the site's default theme variation based on `light` in the theme file.
isDarkTheme = window.wc.isSiteThemeDark;
} }
console.info('User changed theme variation to Auto.'); console.info('User changed theme variation to Auto.');
showActiveTheme(1); showActiveTheme(1);
break; break;
default: default:
localStorage.setItem('dark_mode', '0'); localStorage.setItem('wcTheme', '0');
isDarkTheme = false; isDarkTheme = false;
console.info('User changed theme variation to Light.'); console.info('User changed theme variation to Light.');
showActiveTheme(2); showActiveTheme(2);
@ -141,7 +142,6 @@ function renderThemeVariation(isDarkTheme, init = false) {
if (isDarkTheme === false) { if (isDarkTheme === false) {
if (!init) { if (!init) {
// Only fade in the page when changing the theme variation. // Only fade in the page when changing the theme variation.
//$('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
Object.assign(document.body.style, {opacity: 0, visibility: 'visible'}); Object.assign(document.body.style, {opacity: 0, visibility: 'visible'});
fadeIn(document.body, 600); fadeIn(document.body, 600);
} }
@ -188,4 +188,5 @@ export {
initThemeVariation, initThemeVariation,
changeThemeModeClick, changeThemeModeClick,
renderThemeVariation, renderThemeVariation,
getThemeMode,
}; };

10
wowchemy/assets/js/wowchemy.js
View file

@ -5,7 +5,13 @@
* Core JS functions and initialization. * Core JS functions and initialization.
**************************************************/ **************************************************/
import {canChangeTheme, changeThemeModeClick, initThemeVariation, renderThemeVariation} from './wowchemy-theming'; import {
canChangeTheme,
changeThemeModeClick,
getThemeMode,
initThemeVariation,
renderThemeVariation
} from './wowchemy-theming';
/* --------------------------------------------------------------------------- /* ---------------------------------------------------------------------------
@ -442,7 +448,7 @@ $(document).ready(function () {
} }
const darkModeOn = e.matches; const darkModeOn = e.matches;
console.log(`OS dark mode preference changed to ${darkModeOn ? '🌒 on' : '☀️ off'}.`); console.log(`OS dark mode preference changed to ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
let currentThemeVariation = parseInt(localStorage.getItem('dark_mode') || 2); let currentThemeVariation = getThemeMode();
let isDarkTheme; let isDarkTheme;
if (currentThemeVariation === 2) { if (currentThemeVariation === 2) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia('(prefers-color-scheme: dark)').matches) {