Execute needed js functions uppon ready

This commit is contained in:
Sagi Dayan 2019-07-30 17:06:49 -04:00
parent aadf911ff2
commit 573d2de139
2 changed files with 30 additions and 21 deletions

View file

@ -1,16 +1,21 @@
// Mobile menu // Mobile menu
const menuTrigger = document.querySelector(".menu-trigger"); (function() {
const menu = document.querySelector(".menu"); const menuTrigger = document.querySelector('.menu-trigger');
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); const menu = document.querySelector('.menu');
const mobileQuery =
getComputedStyle(document.body).getPropertyValue('--phoneWidth');
const isMobile = () => window.matchMedia(mobileQuery).matches; const isMobile = () => window.matchMedia(mobileQuery).matches;
const isMobileMenu = () => { const isMobileMenu = () => {
menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile()); menuTrigger && menuTrigger.classList.toggle('hidden', !isMobile());
menu && menu.classList.toggle("hidden", isMobile()); menu && menu.classList.toggle('hidden', isMobile());
}; };
isMobileMenu(); isMobileMenu();
menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden")); menuTrigger &&
menuTrigger.addEventListener(
'click', () => menu && menu.classList.toggle('hidden'));
window.addEventListener("resize", isMobileMenu); window.addEventListener('resize', isMobileMenu);
})();

View file

@ -1,23 +1,27 @@
// Toggle theme // Toggle theme
const getTheme = window.localStorage && window.localStorage.getItem("theme"); (function() {
const themeToggle = document.querySelector(".theme-toggle"); const getTheme = window.localStorage && window.localStorage.getItem('theme');
const isDark = getTheme === "dark"; const themeToggle = document.querySelector('.theme-toggle');
var metaThemeColor = document.querySelector("meta[name=theme-color]"); const isDark = getTheme === 'dark';
var metaThemeColor = document.querySelector('meta[name=theme-color]');
if (getTheme !== null) { if (getTheme !== null) {
document.body.classList.toggle("dark-theme", isDark); document.body.classList.toggle('dark-theme', isDark);
isDark ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa"); isDark ? metaThemeColor.setAttribute('content', '#252627') :
metaThemeColor.setAttribute('content', '#fafafa');
} }
themeToggle.addEventListener("click", () => { themeToggle.addEventListener('click', () => {
document.body.classList.toggle("dark-theme"); document.body.classList.toggle('dark-theme');
window.localStorage && window.localStorage &&
window.localStorage.setItem( window.localStorage.setItem(
"theme", 'theme',
document.body.classList.contains("dark-theme") ? "dark" : "light", document.body.classList.contains('dark-theme') ? 'dark' : 'light',
); );
document.body.classList.contains("dark-theme") ? document.body.classList.contains('dark-theme') ?
metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa"); metaThemeColor.setAttribute('content', '#252627') :
metaThemeColor.setAttribute('content', '#fafafa');
; ;
}); });
})();