From b5aa36be3986d888338f1f7c0ee1d5c5e411bb25 Mon Sep 17 00:00:00 2001 From: Joey Yakimowich-Payne Date: Fri, 18 Apr 2025 21:49:52 -0600 Subject: [PATCH] Header size --- beango/index.html | 6 ++++++ beango/js/beango.js | 21 ++++++++++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/beango/index.html b/beango/index.html index 23db9ea..c5c387c 100644 --- a/beango/index.html +++ b/beango/index.html @@ -108,6 +108,12 @@ + +
+ + +
+
diff --git a/beango/js/beango.js b/beango/js/beango.js index 24ab91c..5951d9f 100644 --- a/beango/js/beango.js +++ b/beango/js/beango.js @@ -53,6 +53,7 @@ const LS_MARKED_CELL_OUTLINE_WIDTH = 'beango_markedCellOutlineWidth'; const LS_HEADER_TEXT_OUTLINE_COLOR = 'beango_headerTextOutlineColor'; 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 // --- Default Values --- const DEFAULT_SAMPLE_ITEMS = [ @@ -105,6 +106,7 @@ const DEFAULT_MARKED_CELL_OUTLINE_WIDTH = 0; // Default 0px - No outline for mar const DEFAULT_HEADER_TEXT_OUTLINE_COLOR = '#ffffff'; // Default outline white 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) // --- Notification Function --- function showNotification(message, type = 'info', duration = 3000) { @@ -448,6 +450,7 @@ function saveHeaderSettings() { localStorage.setItem(LS_HEADER_IMAGE_URL, document.getElementById('header-image-url-input').value); localStorage.setItem(LS_HEADER_TEXT_COLOR, document.getElementById('header-text-color-picker').value); localStorage.setItem(LS_HEADER_TEXT_COLOR_OPACITY, document.getElementById('header-text-color-opacity-slider').value); + localStorage.setItem(LS_HEADER_TEXT_FONT_SIZE, document.getElementById('header-text-font-size-input').value); // Save font size // Save header background localStorage.setItem(LS_HEADER_BG_COLOR, document.getElementById('header-bg-color-picker').value); localStorage.setItem(LS_HEADER_BG_OPACITY, document.getElementById('header-bg-opacity-slider').value); @@ -517,7 +520,14 @@ function updateHeaderDisplay() { // Add text if it exists if (hasText) { const h1 = document.createElement("h1"); - h1.className = "text-4xl font-bold"; // Base styles + h1.className = "font-bold"; // Remove default text-4xl, apply font size via style + // Get and apply font size + let headerFontSize = parseInt(localStorage.getItem(LS_HEADER_TEXT_FONT_SIZE), 10); + if (isNaN(headerFontSize) || headerFontSize <= 0) { + headerFontSize = DEFAULT_HEADER_TEXT_FONT_SIZE; + } + h1.style.fontSize = `${headerFontSize}px`; // Apply font size + h1.style.color = rgbaDefaultColor; // Apply default color+opacity to H1 // Apply outline to H1 if (headerOutlineWidth > 0) { @@ -1217,12 +1227,14 @@ function restoreBackgroundSettings() { } function restoreHeaderSettings(savedHeaderText, savedHeaderImageUrl, savedHeaderTextColor, savedHeaderTextOpacity, savedHeaderBgColor, savedHeaderBgOpacity, - savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth) { + savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, savedHeaderFontSize) { _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); _restoreColorPickerSetting('header-text-color-picker', savedHeaderTextColor); _restoreOpacitySetting('header-text-color-opacity-slider', 'header-text-color-opacity-value', savedHeaderTextOpacity); + // Restore header font size input + _restoreInputSetting('header-text-font-size-input', savedHeaderFontSize); // Restore header background inputs _restoreColorPickerSetting('header-bg-color-picker', savedHeaderBgColor); _restoreOpacitySetting('header-bg-opacity-slider', 'header-bg-opacity-value', savedHeaderBgOpacity); @@ -1383,6 +1395,7 @@ function loadFromLocalStorage() { const savedHeaderOutlineColor = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_COLOR) || DEFAULT_HEADER_TEXT_OUTLINE_COLOR; const savedHeaderOutlineOpacity = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_OPACITY) || DEFAULT_HEADER_TEXT_OUTLINE_OPACITY; const savedHeaderOutlineWidth = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_WIDTH) || DEFAULT_HEADER_TEXT_OUTLINE_WIDTH; + const savedHeaderFontSize = localStorage.getItem(LS_HEADER_TEXT_FONT_SIZE) || DEFAULT_HEADER_TEXT_FONT_SIZE; // Load font size const savedMarkedColor = localStorage.getItem(LS_MARKED_COLOR) || DEFAULT_MARKED_COLOR; const savedMarkedColorOpacity = localStorage.getItem(LS_MARKED_COLOR_OPACITY) || DEFAULT_MARKED_COLOR_OPACITY; const savedMarkedImageUrl = localStorage.getItem(LS_MARKED_IMAGE_URL) || DEFAULT_MARKED_IMAGE_URL; @@ -1430,7 +1443,8 @@ function loadFromLocalStorage() { restoreHeaderSettings( savedHeaderText, savedHeaderImageUrl, savedHeaderTextColor, savedHeaderTextOpacity, savedHeaderBgColor, savedHeaderBgOpacity, - savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth + savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, + savedHeaderFontSize // Pass font size ); restoreMarkedStyleSettings( @@ -1612,6 +1626,7 @@ document.addEventListener('DOMContentLoaded', () => { setupInputListener('header-image-url-input', 'input', saveHeaderSettings, updateHeaderDisplay); setupInputListener('header-text-color-picker', 'input', saveHeaderSettings, updateHeaderDisplay); setupOpacitySliderListener('header-text-color-opacity-slider', 'header-text-color-opacity-value', saveHeaderSettings, updateHeaderDisplay); + setupInputListener('header-text-font-size-input', 'input', saveHeaderSettings, updateHeaderDisplay); // Add listener for font size setupInputListener('header-bg-color-picker', 'input', saveHeaderSettings, applyHeaderBgStyle); setupOpacitySliderListener('header-bg-opacity-slider', 'header-bg-opacity-value', saveHeaderSettings, applyHeaderBgStyle); // Header Text Outline Listeners