NewLukasBlog/web/js/shared.js

/**
 * Shared JavaScript functions for NewLukasBlog
 * Common utilities used across multiple pages
 */

// ============================================
// Mobile Menu (Hamburger Menu)
// ============================================
function setupMobileMenu() {
  const menuIcon = document.querySelector(".menu-icon");
  const menuList = document.querySelector("nav");
  const hamburgerIcon = document.querySelector(".fa-solid");

  if (menuIcon && hamburgerIcon && menuList) {
    menuIcon.addEventListener("click", () => {
      if (hamburgerIcon.classList.contains("fa-bars")) {
        hamburgerIcon.classList.add("fa-xmark");
        hamburgerIcon.classList.remove("fa-bars");
        menuList.style.display = "block";
      } else {
        hamburgerIcon.classList.add("fa-bars");
        hamburgerIcon.classList.remove("fa-xmark");
        menuList.style.display = "none";
      }
    });
  }
}

// ============================================
// Scroll to Top Functionality
// ============================================
function scrollToTop() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For other browsers
}

function setupScrollToTopButton(buttonId = "scrollToTopBtn") {
  const scrollToTopBtn = document.getElementById(buttonId);
  
  if (scrollToTopBtn) {
    window.onscroll = function () {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        scrollToTopBtn.style.display = "block";
      } else {
        scrollToTopBtn.style.display = "none";
      }
    };
  }
}

// ============================================
// Theme Toggle Functionality
// ============================================
// Base theme toggle - can be extended by specific pages
function setupThemeToggle(config = {}) {
  const defaults = {
    toggleButtonId: "toggleButton",
    storageKey: "themePreference",
    defaultTheme: "dark"
  };
  
  const options = { ...defaults, ...config };
  const toggleButton = document.getElementById(options.toggleButtonId);
  
  if (!toggleButton) return;

  // Load saved preference or use default
  const savedTheme = localStorage.getItem(options.storageKey) || options.defaultTheme;
  let isDarkMode = savedTheme === "dark";

  // Apply initial theme
  if (isDarkMode) {
    document.body.classList.add("dark-theme");
  } else {
    document.body.classList.remove("dark-theme");
  }

  // Toggle function
  function toggleTheme() {
    isDarkMode = !isDarkMode;
    
    if (isDarkMode) {
      document.body.classList.add("dark-theme");
      localStorage.setItem(options.storageKey, "dark");
    } else {
      document.body.classList.remove("dark-theme");
      localStorage.setItem(options.storageKey, "light");
    }
    
    // Call custom callback if provided
    if (options.onToggle) {
      options.onToggle(isDarkMode);
    }
  }

  // Set up click listener
  toggleButton.addEventListener("click", toggleTheme);
}

// ============================================
// Image Zoom Functionality
// ============================================
function setupImageZoom(selector = ".picture", scale = 2.2) {
  const images = document.querySelectorAll(selector);
  
  images.forEach((img, index) => {
    img.addEventListener("mouseenter", () => {
      img.style.transform = `scale(${scale})`;
    });

    img.addEventListener("mouseleave", () => {
      img.style.transform = "scale(1)";
    });
  });
}

// ============================================
// Initialize all common functionality
// ============================================
document.addEventListener("DOMContentLoaded", function() {
  setupMobileMenu();
  setupScrollToTopButton();
  setupThemeToggle();
  setupImageZoom();
});