jyapayne/justbean
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header size

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-18 21:49:52 -06:00
commit b5aa36be39
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
2 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
beango/index.html
View file

@ -108,6 +108,12 @@
</div>
</div>
</div>
<!-- START Header Font Size Setting -->
<div class="mt-2">
<label for="header-text-font-size-input" class="block text-sm font-medium text-gray-700">Header Font Size (px):</label>
<input type="number" id="header-text-font-size-input" name="header-text-font-size-input" min="10" max="100" step="1" value="36" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
<!-- END Header Font Size Setting -->
<!-- START Header Text Outline Settings -->
<div class="mt-2">
<label for="header-text-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>

21
beango/js/beango.js
View file

@ -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