{"version":3,"file":"darkmode.js","mappings":"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","sources":["webpack://cabanaboiler/./src/scripts/dark-mode.js"],"sourcesContent":["// export default function handleDarkMode() {\r\n// Constants\r\nconst storageKey = \"theme\";\r\nconst lightThemeClass = \"light-theme\";\r\nconst darkThemeClass = \"dark-theme\";\r\nconst btnTextClass = \"btn__color-theme__text\";\r\nconst themeSelectorId = \"color-theme-selector\";\r\n\r\nconst navbrandImg = jQuery(\r\n  \".header__megamenu-extended .navbar__megamenu-extended .navbar__megamenu__header .navbar-brand img\"\r\n);\r\n\r\nconst footerbrandImg = jQuery(\"footer .logo img\");\r\nconst footerSubbrandImg = jQuery(\"footer .logo img[data-defaultSubLogo]\");\r\nconst favicon = jQuery(\"link[rel='icon']\");\r\n\r\n// Get Theme selector button\r\nconst themeSelector = document.getElementById(themeSelectorId);\r\n// const toggleSwitch = document.querySelector('.theme-switch input[type=\"checkbox\"]');\r\n\r\n// Get system theme preference.\r\nconst isDarkSystemTheme =\r\n  window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n\r\n// Get the theme preference (dark-theme, light-theme or if it's not there: null)\r\nconst getSelectedTheme = () => localStorage.getItem(storageKey);\r\n\r\n// Set theme helper\r\nconst setSelectedTheme = (theme) => localStorage.setItem(storageKey, theme);\r\n\r\n// sets the theme to (1) dark-theme or (2) light-theme\r\nconst setDarkModeLocalStorage = () => setSelectedTheme(darkThemeClass);\r\nconst setLightModeLocalStorage = () => setSelectedTheme(lightThemeClass);\r\n\r\n// toggles the controling classes to the body - dark-theme or light-theme\r\nconst setDarkModeClasses = () => {\r\n  document.body.classList.add(darkThemeClass);\r\n  document.body.classList.remove(lightThemeClass);\r\n\r\n  if (jQuery(themeSelector).length > 0) {\r\n    themeSelector.setAttribute('aria-label', 'Deaktiver darkmode')\r\n\t  themeSelector.setAttribute('title', 'Deaktiver darkmode')\r\n  }\r\n\r\n  if (document.getElementsByClassName(btnTextClass).length > 0) {\r\n    changeBtnText();\r\n  }\r\n};\r\n\r\nconst setLightModeClasses = () => {\r\n  document.body.classList.add(lightThemeClass);\r\n  document.body.classList.remove(darkThemeClass);\r\n\r\n  if (jQuery(themeSelector).length > 0) {\r\n    themeSelector.setAttribute('aria-label', 'Aktiver darkmode')\r\n\t  themeSelector.setAttribute('title', 'Aktiver darkmode')\r\n  }\r\n\r\n  if (document.getElementsByClassName(btnTextClass).length > 0) {\r\n    changeBtnText();\r\n  }\r\n};\r\n\r\n\r\nfunction changeBtnText() {\r\n  const targetDiv = document.getElementById(themeSelectorId).getElementsByClassName(btnTextClass)[0];\r\n  const active = document.getElementById(themeSelectorId).getAttribute(\"data-inactive\");\r\n  const inactive = document.getElementById(themeSelectorId).getAttribute(\"data-active\");\r\n\r\n  if (document.body.classList.contains(darkThemeClass)) {\r\n    targetDiv.textContent = inactive;\r\n  } else {\r\n    targetDiv.textContent = active;\r\n  }\r\n}\r\n\r\nfunction setDefaultLogo() {\r\n  const defaultNavLogo = navbrandImg.attr(\"data-defaultLogo\");\r\n  navbrandImg.attr(\"data-src\", defaultNavLogo);\r\n  navbrandImg.attr(\"src\", defaultNavLogo);\r\n\r\n  const defaultFooterLogo = footerbrandImg.attr(\"data-defaultLogo\");\r\n  footerbrandImg.attr(\"data-src\", defaultFooterLogo);\r\n  footerbrandImg.attr(\"src\", defaultFooterLogo);\r\n\r\n  const subFooterLogo = footerSubbrandImg.attr(\"data-defaultSubLogo\");\r\n  footerSubbrandImg.attr(\"data-src\", subFooterLogo);\r\n  footerSubbrandImg.attr(\"src\", subFooterLogo);\r\n}\r\n\r\nfunction setDarkomdeLogo() {\r\n  const darkmodeNavLogo = navbrandImg.attr(\"data-darkmodeLogo\");\r\n  navbrandImg.attr(\"data-src\", darkmodeNavLogo);\r\n  navbrandImg.attr(\"src\", darkmodeNavLogo);\r\n\r\n  const darkmodeFooterLogo = footerbrandImg.attr(\"data-darkmodeLogo\");\r\n  footerbrandImg.attr(\"data-src\", darkmodeFooterLogo);\r\n  footerbrandImg.attr(\"src\", darkmodeFooterLogo);\r\n\r\n  const darkmodeSubFooterLogo = footerSubbrandImg.attr(\"data-darkmodeSubLogo\");\r\n  footerSubbrandImg.attr(\"data-src\", darkmodeSubFooterLogo);\r\n  footerSubbrandImg.attr(\"src\", darkmodeSubFooterLogo);\r\n}\r\n\r\nsetDarkomdeFavicon();\r\n\r\nfunction setDarkomdeFavicon() {\r\n  if (window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {\r\n    const darkmodeFavicon = favicon.attr(\"data-darkmode\");\r\n    favicon.attr(\"href\", darkmodeFavicon);\r\n    setDarkomdeLogo();\r\n  } else {\r\n    const defaultFavicon = favicon.attr(\"data-default\");\r\n    favicon.attr(\"href\", defaultFavicon);\r\n  }\r\n}\r\n\r\n// Handle system theme preference\r\nconst handleSystemThemePreferenceMount = () => {\r\n  isDarkSystemTheme ? setDarkModeClasses() : setLightModeClasses();\r\n};\r\n\r\n// Handle user selection on click\r\nconst handleThemeSelection = () => {\r\n  const selectedTheme = getSelectedTheme();\r\n\r\n  // fist time the user sets a preference, the theme-classes toggles based on the system theme preference\r\n  if (!selectedTheme) {\r\n    if (isDarkSystemTheme) {\r\n      setLightModeClasses();\r\n      setLightModeLocalStorage();\r\n      setDefaultLogo();\r\n    } else {\r\n      setDarkModeClasses();\r\n      setDarkModeLocalStorage();\r\n      setDarkomdeLogo();\r\n    }\r\n\r\n    return;\r\n  }\r\n\r\n  // if the user changes the preference, the theme-classes toggles based on the theme value\r\n  if (selectedTheme === darkThemeClass) {\r\n    setLightModeClasses();\r\n    setLightModeLocalStorage();\r\n    setDefaultLogo();\r\n  } else {\r\n    setDarkModeClasses();\r\n    setDarkModeLocalStorage();\r\n    setDarkomdeLogo();\r\n  }\r\n};\r\n\r\n// set the classes based on the latets preference\r\nconst handleThemeMount = () => {\r\n  const isDarkMode = getSelectedTheme() === darkThemeClass;\r\n\r\n  if (isDarkMode) {\r\n    setDarkModeClasses();\r\n    setDarkModeLocalStorage;\r\n    setDarkomdeLogo();\r\n  } else {\r\n    setLightModeClasses();\r\n    setLightModeLocalStorage();\r\n    setDefaultLogo();\r\n  }\r\n};\r\n\r\n// Code to run on component mount\r\nconst onMount = () => {\r\n  const selectedTheme = getSelectedTheme();\r\n\r\n  // theme on previous preferene or if null, the system theme preference.\r\n  selectedTheme ? handleThemeMount() : handleSystemThemePreferenceMount();\r\n\r\n  // Setup event listener\r\n  themeSelector && themeSelector.addEventListener(\"click\", handleThemeSelection);\r\n};\r\n\r\nonMount();\r\n"],"names":["storageKey","lightThemeClass","darkThemeClass","btnTextClass","themeSelectorId","navbrandImg","jQuery","footerbrandImg","footerSubbrandImg","favicon","themeSelector","document","getElementById","isDarkSystemTheme","window","matchMedia","matches","getSelectedTheme","localStorage","getItem","setSelectedTheme","theme","setItem","setDarkModeLocalStorage","setLightModeLocalStorage","setDarkModeClasses","body","classList","add","remove","length","setAttribute","getElementsByClassName","changeBtnText","setLightModeClasses","targetDiv","active","getAttribute","inactive","contains","textContent","setDefaultLogo","defaultNavLogo","attr","defaultFooterLogo","subFooterLogo","setDarkomdeLogo","darkmodeNavLogo","darkmodeFooterLogo","darkmodeSubFooterLogo","darkmodeFavicon","defaultFavicon","setDarkomdeFavicon","addEventListener","selectedTheme"],"sourceRoot":""}