Skip to content

Commit 296e898

Browse files
jd-code76jd-code76
committed
- Added font size slider for notes section
- Moved dark mode toggle to settings as a toggle slider - Fixed verse footnote references sometimes being split across multiple lines as individual characters - Removed color themes from verse numbers and footnotes for better readability - Minor adjustment to filterTranslationOptions to prevent parsing all selects - Fixed CSS bug causing sidebar links to be hidden
1 parent de5b672 commit 296e898

15 files changed

Lines changed: 228 additions & 92 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎main.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { clearCache, closeSettings, deleteAllData, exportData, importData, initi
66
import { APP_VERSION, BOOK_ORDER, updateBibleGatewayVersion, loadFromCookies, loadFromStorage, saveToCookies, saveToStorage, state } from './modules/state.js'
77
import { closeStrongsPopup, showStrongsReference } from './modules/strongs.js'
88
import { exportNotes, initResizeHandles, insertMarkdown, restoreBookChapterUI, restorePanelStates, restoreSidebarState, switchNotesView, togglePanelCollapse, toggleReferencePanel, toggleSection,
9-
updateMarkdownPreview, updateReferencePanel, updateScriptureFontSize } from './modules/ui.js'
9+
updateMarkdownPreview, updateReferencePanel, updateNotesFontSize, updateScriptureFontSize } from './modules/ui.js'
1010
const OFFLINE_STYLES = `
1111
#offlineIndicator {
1212
position: fixed;
@@ -230,7 +230,6 @@ function refreshHighlightsModalTheme() {
230230
}
231231
}
232232
function setupEventListeners() {
233-
setupThemeToggle();
234233
setupHeaderButtons();
235234
setupToolbarNavigation();
236235
setupAudioControls();
@@ -242,10 +241,6 @@ function setupEventListeners() {
242241
setupMarkdownShortcuts();
243242
setupTouchEvents();
244243
}
245-
function setupThemeToggle() {
246-
const toggle = document.querySelector('.theme-toggle');
247-
if (toggle) toggle.addEventListener('click', toggleTheme);
248-
}
249244
function setupHeaderButtons() {
250245
const buttons = {
251246
openSettingsBtn: openSettings,
@@ -499,7 +494,10 @@ async function init() {
499494
restoreSidebarState();
500495
restorePanelStates();
501496
if (typeof updateScriptureFontSize === 'function') {
502-
updateScriptureFontSize(state.settings.fontSize);
497+
updateScriptureFontSize(state.settings.scriptureFontSize);
498+
}
499+
if (typeof updateNotesFontSize === 'function') {
500+
updateNotesFontSize(state.settings.notesFontSize);
503501
}
504502
updateHeaderTitle();
505503
initResizeHandles();

‎modules/settings.js‎

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -152,20 +152,39 @@ function populateSettingsForm() {
152152
const translationSelect = document.getElementById('bibleTranslationSetting');
153153
const audioToggle = document.getElementById('audioControlsToggle');
154154
const versionElement = document.getElementById('appVersion');
155-
const fontSizeSlider = document.getElementById('fontSizeSlider');
156-
const fontSizeValue = document.getElementById('fontSizeValue');
155+
const scriptureFontSizeSlider = document.getElementById('scriptureFontSizeSlider');
156+
const scriptureFontSizeValue = document.getElementById('scriptureFontSizeValue');
157+
const notesFontSizeSlider = document.getElementById('notesFontSizeSlider');
158+
const notesFontSizeValue = document.getElementById('notesFontSizeValue');
159+
const themeToggle = document.getElementById('themeToggleSetting');
157160
if (translationSelect) translationSelect.value = state.settings.bibleTranslation;
158161
if (audioToggle) audioToggle.checked = state.settings.audioControlsVisible;
159162
if (versionElement) versionElement.textContent = APP_VERSION;
160-
if (fontSizeSlider) {
161-
fontSizeSlider.value = state.settings.fontSize || 16;
162-
fontSizeSlider.addEventListener('input', () => {
163-
const val = fontSizeSlider.value;
164-
if (fontSizeValue) fontSizeValue.textContent = `${val}px`;
163+
if (themeToggle) {
164+
themeToggle.checked = state.settings.theme === 'dark';
165+
themeToggle.addEventListener('change', () => {
166+
document.documentElement.setAttribute('data-theme', themeToggle.checked ? 'dark' : 'light');
165167
});
166168
}
167-
if (fontSizeValue) {
168-
fontSizeValue.textContent = `${state.settings.fontSize || 16}px`;
169+
if (scriptureFontSizeSlider) {
170+
scriptureFontSizeSlider.value = state.settings.scriptureFontSize || 16;
171+
scriptureFontSizeSlider.addEventListener('input', () => {
172+
const val = scriptureFontSizeSlider.value;
173+
if (scriptureFontSizeValue) scriptureFontSizeValue.textContent = `${val}px`;
174+
});
175+
}
176+
if (scriptureFontSizeValue) {
177+
scriptureFontSizeValue.textContent = `${state.settings.scriptureFontSize || 16}px`;
178+
}
179+
if (notesFontSizeSlider) {
180+
notesFontSizeSlider.value = state.settings.notesFontSize || 16;
181+
notesFontSizeSlider.addEventListener('input', () => {
182+
const val = notesFontSizeSlider.value;
183+
if (notesFontSizeValue) notesFontSizeValue.textContent = `${val}px`;
184+
});
185+
}
186+
if (notesFontSizeValue) {
187+
notesFontSizeValue.textContent = `${state.settings.notesFontSize || 16}px`;
169188
}
170189
updateColorThemeSelection();
171190
}
@@ -191,12 +210,18 @@ export async function saveSettings() {
191210
try {
192211
showLoading(true);
193212
const newSettings = getSettingsFromForm();
213+
const oldNotesFontSize = state.settings.notesFontSize;
194214
validateSettings(newSettings);
195215
await applyNewSettings(newSettings);
196216
saveSettingsToStorage();
197217
updateUIAfterSettingsChange();
198218
closeSettings();
199-
await reloadPassageWithNewSettings();
219+
if (newSettings.notesFontSize !== oldNotesFontSize) {
220+
alert('Notes font size changed. Page will refresh to apply changes.');
221+
setTimeout(() => window.location.reload(), 1000);
222+
} else {
223+
await reloadPassageWithNewSettings();
224+
}
200225
} catch (error) {
201226
handleError(error, 'saveSettings');
202227
alert('Error saving settings: ' + error.message);
@@ -209,13 +234,17 @@ function getSettingsFromForm() {
209234
const audioToggle = document.getElementById('audioControlsToggle');
210235
const selectedTheme = document.querySelector('.color-theme-option.selected');
211236
const narratorSelect = document.getElementById('narratorSelect');
212-
const fontSizeSlider = document.getElementById('fontSizeSlider');
237+
const scriptureFontSizeSlider = document.getElementById('scriptureFontSizeSlider');
238+
const notesFontSizeSlider = document.getElementById('notesFontSizeSlider');
239+
const themeToggle = document.getElementById('themeToggleSetting');
213240
return {
214241
translation: translationSelect?.value || state.settings.bibleTranslation,
215242
audioControlsVisible: audioToggle?.checked ?? state.settings.audioControlsVisible,
216243
colorTheme: selectedTheme?.dataset.theme || state.settings.colorTheme,
217244
narrator: narratorSelect?.value || state.settings.audioNarrator,
218-
fontSize: fontSizeSlider ? parseInt(fontSizeSlider.value, 10) : state.settings.fontSize
245+
scriptureFontSize: scriptureFontSizeSlider ? parseInt(scriptureFontSizeSlider.value, 10) : state.settings.scriptureFontSize,
246+
notesFontSize: notesFontSizeSlider ? parseInt(notesFontSizeSlider.value, 10) : state.settings.notesFontSize,
247+
theme: themeToggle?.checked ? 'dark' : 'light'
219248
};
220249
}
221250
function validateSettings(settings) {
@@ -231,10 +260,13 @@ async function applyNewSettings(newSettings) {
231260
state.settings.audioControlsVisible = newSettings.audioControlsVisible;
232261
state.settings.colorTheme = newSettings.colorTheme;
233262
state.settings.audioNarrator = newSettings.narrator || state.settings.audioNarrator;
234-
state.settings.fontSize = newSettings.fontSize ?? state.settings.fontSize;
263+
state.settings.scriptureFontSize = newSettings.scriptureFontSize ?? state.settings.scriptureFontSize;
264+
state.settings.notesFontSize = newSettings.notesFontSize ?? state.settings.notesFontSize;
265+
state.settings.theme = newSettings.theme;
235266
updateURL(newSettings.translation, state.settings.manualBook, state.settings.manualChapter, 'push');
236267
updateAudioControlsVisibility();
237268
updateBibleGatewayVersion();
269+
applyTheme();
238270
}
239271
function saveSettingsToStorage() {
240272
saveToStorage();
@@ -247,7 +279,10 @@ function updateUIAfterSettingsChange() {
247279
referenceTranslationSelect.value = state.settings.referenceVersion;
248280
}
249281
if (typeof updateScriptureFontSize === 'function') {
250-
updateScriptureFontSize(state.settings.fontSize);
282+
updateScriptureFontSize(state.settings.scriptureFontSize);
283+
}
284+
if (typeof updateNotesFontSize === 'function') {
285+
updateNotesFontSize(state.settings.notesFontSize);
251286
}
252287
}
253288
async function reloadPassageWithNewSettings() {

‎modules/state.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { handleError } from '../main.js';
2-
export const APP_VERSION = '1.8.2025.11.18';
2+
export const APP_VERSION = '1.9.2025.11.28';
33
const SAVE_DEBOUNCE_MS = 500;
44
const COOKIE_LENGTH = 10;
55
let saveTimeout = null;
@@ -91,7 +91,8 @@ export const state = {
9191
scriptureSection: null,
9292
notesSection: 350
9393
},
94-
fontSize: 16
94+
scriptureFontSize: 16,
95+
notesFontSize: 16
9596
},
9697
hotkeys: {
9798
toggleReferencePanel: { key: 'b', altKey: true, shiftKey: false, ctrlKey: false },

‎modules/ui.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ const UNSUPPORTED_TRANSLATIONS = {
88
stepbible: ['NKJV', 'CSB', 'NLT'],
99
ebibleorg: ['LSB', 'NASB', 'ASV', 'ESV', 'NKJV', 'CSB', 'NIV', 'NLT']
1010
};
11-
const CONTENT_TYPES = {
12-
text: { btnClass: 'text', display: 'block', inputDisplay: 'block' },
13-
markdown: { btnClass: 'markdown', display: 'block', inputDisplay: 'none' }
14-
};
1511
const PANEL_LIMITS = {
1612
sidebar: { min: 150, max: 600 },
1713
referencePanel: { min: 250, max: 800 },
@@ -21,7 +17,7 @@ const PANEL_LIMITS = {
2117
export function updateScriptureFontSize(sizePx) {
2218
try {
2319
const size = Number(sizePx);
24-
if (Number.isNaN(size) || size < 10 || size > 36) return;
20+
if (Number.isNaN(size) || size < 10 || size > 24) return;
2521
const scriptureSection = document.getElementById('scriptureSection');
2622
if (scriptureSection) {
2723
scriptureSection.style.fontSize = `${size}px`;
@@ -30,12 +26,26 @@ export function updateScriptureFontSize(sizePx) {
3026
const headerRef = document.getElementById('passageReference');
3127
if (headerTitle) headerTitle.style.fontSize = '';
3228
if (headerRef) headerRef.style.fontSize = '';
33-
state.settings.fontSize = size;
29+
state.settings.scriptureFontSize = size;
3430
saveToStorage();
3531
} catch (err) {
3632
console.error('Failed to update scripture font size:', err);
3733
}
3834
}
35+
export function updateNotesFontSize(sizePx) {
36+
try {
37+
const size = Number(sizePx);
38+
if (Number.isNaN(size) || size < 10 || size > 24) return;
39+
const notesSection = document.getElementById('notesSection');
40+
if (notesSection) {
41+
notesSection.style.fontSize = `${size}px`;
42+
}
43+
state.settings.notesFontSize = size;
44+
saveToStorage();
45+
} catch (err) {
46+
console.error('Failed to update notes font size:', err);
47+
}
48+
}
3949
export function switchNotesView(view) {
4050
try {
4151
state.settings.notesView = view;
@@ -271,6 +281,9 @@ function generateBibleGatewayUrl(translation, passage) {
271281
return `https://www.biblegateway.com/passage/?search=${query}&version=${version}&interface=print`;
272282
}
273283
function filterTranslationOptions(source, selectElement) {
284+
if (!selectElement.id.includes('Translation') && !selectElement.id.includes('reference')) {
285+
return;
286+
}
274287
const currentValue = selectElement.value;
275288
const unsupported = UNSUPPORTED_TRANSLATIONS[source] || [];
276289
let needsUpdate = false;

‎src/css/notes.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
justify-content: space-between;
2828
align-items: center;
2929
margin-bottom: 15px;
30+
font-size: inherit;
3031
}
3132

3233
.notes-header h3 {
@@ -133,12 +134,11 @@
133134
margin-bottom: 10px;
134135
background-color: var(--card-background);
135136
color: var(--text-color);
137+
font-size: inherit;
136138
}
137139

138140
#notesInput {
139141
font-family: 'Courier New', monospace;
140-
font-size: 14px;
141-
resize: none;
142142
}
143143

144144
#notesInput:focus {
@@ -149,7 +149,6 @@
149149
#notesDisplay {
150150
overflow-y: auto;
151151
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
152-
font-size: 14px;
153152
}
154153

155154
/* Markdown Rendering Styles */

‎src/css/scripture.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676

7777
.verse-number {
7878
font-weight: bold;
79-
color: var(--accent-color);
8079
margin-right: 8px;
8180
font-size: 0.85em;
8281
vertical-align: super;
@@ -140,18 +139,18 @@
140139

141140
.footnote-ref {
142141
position: relative;
143-
color: var(--accent-color);
144142
font-size: 0.7em;
145143
vertical-align: super;
146144
cursor: pointer;
147145
margin: 0 1px;
148146
text-decoration: none;
149147
font-weight: bold;
150-
background-color: rgba(0, 0, 0, 0.08);
151148
padding: 1px 4px;
152149
border-radius: 3px;
153150
line-height: 1;
154151
transition: all 0.2s ease;
152+
white-space: nowrap;
153+
display: inline-block;
155154
}
156155

157156
.footnote-ref:hover {

‎src/css/settings.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,7 @@
267267
outline-offset: 2px;
268268
}
269269

270-
#fontSizeSlider {
270+
#scriptureFontSizeSlider,
271+
#notesFontSizeSlider {
271272
accent-color: var(--accent-color);
272273
}

‎src/css/sidebar.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@
7676
}
7777

7878
.sidebar-section-content {
79-
max-height: 1000px;
80-
overflow: hidden;
79+
max-height: none;
80+
overflow: auto;
8181
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
8282
opacity: 1;
8383
}

0 commit comments

Comments
 (0)