133 lines
3.1 KiB
JavaScript
133 lines
3.1 KiB
JavaScript
/**
|
|
* Utility function to calculate the current theme setting.
|
|
* Look for a local storage value.
|
|
* Fall back to system setting.
|
|
* Fall back to light mode.
|
|
*/
|
|
function calculateSettingAsThemeString({
|
|
localStorageTheme,
|
|
systemSettingDark,
|
|
}) {
|
|
if (localStorageTheme !== null) {
|
|
return localStorageTheme;
|
|
}
|
|
|
|
if (systemSettingDark.matches) {
|
|
return "dark";
|
|
}
|
|
|
|
return "light";
|
|
}
|
|
|
|
/**
|
|
* Utility function to update the button text and aria-label.
|
|
*/
|
|
function updateButton({ buttonEl, isDark }) {
|
|
const newCta = isDark ? "Terang" : "Gelap";
|
|
// use an aria-label if you are omitting text on the button
|
|
// and using a sun/moon icon, for example
|
|
buttonEl.innerText = newCta;
|
|
}
|
|
|
|
/**
|
|
* Utility function to update the theme setting on the html tag
|
|
*/
|
|
function updateThemeOnHtmlEl({ theme }) {
|
|
document.querySelector("html").setAttribute("data-theme", theme);
|
|
}
|
|
|
|
/**
|
|
* On page load:
|
|
*/
|
|
|
|
/**
|
|
* 1. Grab what we need from the DOM and system settings on page load
|
|
*/
|
|
const button = document.querySelector(".theme-toggle");
|
|
const localStorageTheme = localStorage.getItem("theme");
|
|
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
/**
|
|
* 2. Work out the current site settings
|
|
*/
|
|
let currentThemeSetting = calculateSettingAsThemeString({
|
|
localStorageTheme,
|
|
systemSettingDark,
|
|
});
|
|
|
|
/**
|
|
* 3. Update the theme setting and button text accoridng to current settings
|
|
*/
|
|
updateButton({
|
|
buttonEl: button,
|
|
isDark: currentThemeSetting === "dark",
|
|
});
|
|
updateThemeOnHtmlEl({ theme: currentThemeSetting });
|
|
|
|
/**
|
|
* 4. Add an event listener to toggle the theme
|
|
*/
|
|
function changeTheme() {
|
|
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
|
|
|
localStorage.setItem("theme", newTheme);
|
|
updateButton({
|
|
buttonEl: button,
|
|
isDark: newTheme === "dark",
|
|
});
|
|
updateThemeOnHtmlEl({ theme: newTheme });
|
|
|
|
currentThemeSetting = newTheme;
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
// Header Scroll
|
|
$(window).on("scroll", function () {
|
|
var scroll = $(window).scrollTop();
|
|
|
|
if (scroll >= 50) {
|
|
$("#header").addClass("fixed");
|
|
} else {
|
|
$("#header").removeClass("fixed");
|
|
}
|
|
});
|
|
|
|
// Page Scroll
|
|
var sections = $("section");
|
|
nav = $('nav[role="navigation"]');
|
|
|
|
$(window).on("scroll", function () {
|
|
var cur_pos = $(this).scrollTop();
|
|
sections.each(function () {
|
|
var top = $(this).offset().top - 276;
|
|
bottom = top + $(this).outerHeight();
|
|
if (cur_pos >= top && cur_pos <= bottom) {
|
|
nav.find("a").removeClass("active");
|
|
nav.find('a[href="#' + $(this).attr("id") + '"]').addClass("active");
|
|
}
|
|
});
|
|
});
|
|
nav.find("a").on("click", function () {
|
|
var $el = $(this);
|
|
id = $el.attr("href");
|
|
$("html, body").animate(
|
|
{
|
|
scrollTop: $(id).offset().top - 75,
|
|
},
|
|
500
|
|
);
|
|
return false;
|
|
});
|
|
|
|
// Mobile Navigation
|
|
$(".nav-toggle").on("click", function () {
|
|
$(this).toggleClass("close-nav");
|
|
nav.toggleClass("open");
|
|
return false;
|
|
});
|
|
nav.find("a").on("click", function () {
|
|
$(".nav-toggle").toggleClass("close-nav");
|
|
nav.toggleClass("open");
|
|
});
|
|
});
|