From 4dc5c30b20b110a95d93b38b864aa05907f31a06 Mon Sep 17 00:00:00 2001 From: Joey Yakimowich-Payne Date: Fri, 18 Apr 2025 22:05:54 -0600 Subject: [PATCH] Add font style to header --- beango/index.html | 12 ++++++++++++ beango/js/beango.js | 37 ++++++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/beango/index.html b/beango/index.html index 3b8ef6f..32498e2 100644 --- a/beango/index.html +++ b/beango/index.html @@ -134,6 +134,18 @@ + +
+ + +
+
diff --git a/beango/js/beango.js b/beango/js/beango.js index c403dd9..4412cb4 100644 --- a/beango/js/beango.js +++ b/beango/js/beango.js @@ -55,6 +55,8 @@ const LS_HEADER_TEXT_OUTLINE_OPACITY = 'beango_headerTextOutlineOpacity'; const LS_HEADER_TEXT_OUTLINE_WIDTH = 'beango_headerTextOutlineWidth'; const LS_HEADER_TEXT_FONT_SIZE = 'beango_headerTextFontSize'; // New key const LS_HEADER_TEXT_FONT_FAMILY = 'beango_headerTextFontFamily'; // New key +const LS_HEADER_TEXT_STYLE_ITALIC = 'beango_headerTextStyleItalic'; // New key for italic +const LS_HEADER_TEXT_STYLE_BOLD = 'beango_headerTextStyleBold'; // New key for bold // --- Default Values --- const DEFAULT_SAMPLE_ITEMS = [ @@ -109,6 +111,8 @@ const DEFAULT_HEADER_TEXT_OUTLINE_OPACITY = 100; const DEFAULT_HEADER_TEXT_OUTLINE_WIDTH = 0; // Default no outline const DEFAULT_HEADER_TEXT_FONT_SIZE = 36; // New default (approx text-4xl) const DEFAULT_HEADER_TEXT_FONT_FAMILY = 'sans-serif'; // New default +const DEFAULT_HEADER_TEXT_STYLE_ITALIC = false; // Default not italic +const DEFAULT_HEADER_TEXT_STYLE_BOLD = true; // Default bold // --- Notification Function --- function showNotification(message, type = 'info', duration = 3000) { @@ -461,6 +465,9 @@ function saveHeaderSettings() { localStorage.setItem(LS_HEADER_TEXT_OUTLINE_COLOR, document.getElementById('header-text-outline-color-picker').value); localStorage.setItem(LS_HEADER_TEXT_OUTLINE_OPACITY, document.getElementById('header-text-outline-opacity-slider').value); localStorage.setItem(LS_HEADER_TEXT_OUTLINE_WIDTH, document.getElementById('header-text-outline-width-input').value); + // Save header font style + localStorage.setItem(LS_HEADER_TEXT_STYLE_ITALIC, document.getElementById('header-text-style-italic').checked); + localStorage.setItem(LS_HEADER_TEXT_STYLE_BOLD, document.getElementById('header-text-style-bold').checked); } // --- Function to apply header background style --- @@ -502,6 +509,8 @@ function updateHeaderDisplay() { if (headerTextOpacity === null) { headerTextOpacity = DEFAULT_HEADER_TEXT_COLOR_OPACITY; } + let headerStyleItalic = localStorage.getItem(LS_HEADER_TEXT_STYLE_ITALIC) === 'true'; // Convert string to boolean + let headerStyleBold = localStorage.getItem(LS_HEADER_TEXT_STYLE_BOLD) === 'true'; // Convert string to boolean const rgbaDefaultColor = hexToRgba(headerTextColor, parseInt(headerTextOpacity, 10)); // Get outline settings @@ -523,7 +532,8 @@ function updateHeaderDisplay() { // Add text if it exists if (hasText) { const h1 = document.createElement("h1"); - h1.className = "font-bold"; // Remove default text-4xl, apply font size/family via style + // Remove default text-4xl and font-bold, apply font size/family/style/weight via style + // h1.className = ""; // Get and apply font size let headerFontSize = parseInt(localStorage.getItem(LS_HEADER_TEXT_FONT_SIZE), 10); if (isNaN(headerFontSize) || headerFontSize <= 0) { @@ -534,6 +544,10 @@ function updateHeaderDisplay() { const headerFontFamily = localStorage.getItem(LS_HEADER_TEXT_FONT_FAMILY) || DEFAULT_HEADER_TEXT_FONT_FAMILY; h1.style.fontFamily = headerFontFamily; // Apply font family + // Apply font style and weight + h1.style.fontStyle = headerStyleItalic ? 'italic' : 'normal'; + h1.style.fontWeight = headerStyleBold ? 'bold' : 'normal'; + h1.style.color = rgbaDefaultColor; // Apply default color+opacity to H1 // Apply outline to H1 if (headerOutlineWidth > 0) { @@ -1233,7 +1247,8 @@ function restoreBackgroundSettings() { } function restoreHeaderSettings(savedHeaderText, savedHeaderImageUrl, savedHeaderTextColor, savedHeaderTextOpacity, savedHeaderBgColor, savedHeaderBgOpacity, - savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, savedHeaderFontSize, savedHeaderFontFamily) { + savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, savedHeaderFontSize, savedHeaderFontFamily, + savedHeaderStyleItalic, savedHeaderStyleBold) { _restoreInputSetting('header-text-input', savedHeaderText); // if the header image is the default bean, then add the explodeBeans function to the onclick event _restoreInputSetting('header-image-url-input', savedHeaderImageUrl); @@ -1250,6 +1265,9 @@ function restoreHeaderSettings(savedHeaderText, savedHeaderImageUrl, savedHeader _restoreColorPickerSetting('header-text-outline-color-picker', savedHeaderOutlineColor); _restoreOpacitySetting('header-text-outline-opacity-slider', 'header-text-outline-opacity-value', savedHeaderOutlineOpacity); _restoreInputSetting('header-text-outline-width-input', savedHeaderOutlineWidth); + // Restore header font style checkboxes + _restoreCheckboxSetting('header-text-style-italic', savedHeaderStyleItalic); + _restoreCheckboxSetting('header-text-style-bold', savedHeaderStyleBold); applyHeaderBgStyle(); // Apply header background style updateHeaderDisplay(); // Apply the loaded header content @@ -1454,7 +1472,9 @@ function loadFromLocalStorage() { savedHeaderBgColor, savedHeaderBgOpacity, savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, savedHeaderFontSize, // Pass font size - savedHeaderFontFamily // Pass font family + savedHeaderFontFamily, // Pass font family + localStorage.getItem(LS_HEADER_TEXT_STYLE_ITALIC) === 'true', // Pass italic style + localStorage.getItem(LS_HEADER_TEXT_STYLE_BOLD) === 'true' // Pass bold style ); restoreMarkedStyleSettings( @@ -1640,6 +1660,9 @@ document.addEventListener('DOMContentLoaded', () => { setupInputListener('header-text-font-family-select', 'change', saveHeaderSettings, updateHeaderDisplay); // Add listener for font family setupInputListener('header-bg-color-picker', 'input', saveHeaderSettings, applyHeaderBgStyle); setupOpacitySliderListener('header-bg-opacity-slider', 'header-bg-opacity-value', saveHeaderSettings, applyHeaderBgStyle); + // Header Font Style Listeners + setupInputListener('header-text-style-italic', 'change', saveHeaderSettings, updateHeaderDisplay); + setupInputListener('header-text-style-bold', 'change', saveHeaderSettings, updateHeaderDisplay); // Header Text Outline Listeners setupInputListener('header-text-outline-color-picker', 'input', saveHeaderSettings, updateHeaderDisplay); setupOpacitySliderListener('header-text-outline-opacity-slider', 'header-text-outline-opacity-value', saveHeaderSettings, updateHeaderDisplay); @@ -1841,3 +1864,11 @@ function importSettings() { document.body.appendChild(tempInput); tempInput.click(); } + +// Helper function to restore a checkbox state +function _restoreCheckboxSetting(checkboxId, savedValue) { + const checkbox = document.getElementById(checkboxId); + if (checkbox) { + checkbox.checked = savedValue; // savedValue should be boolean + } +}