john-okeefe
24ea9d8a38
Phase 2 of the reader redesign: - Fixed-layout touch engine (foliate-js e9e61d8): pinch-zoom around the midpoint, two-finger pan, single-finger pan while zoomed, horizontal swipe page-turn at fit (RTL-aware via next()/prev()), and double-tap to zoom 2.5x / reset. Touch events forwarded from page iframes with converted coordinates; preventDefault only when the engine consumes the gesture, so PDF text selection and native taps stay intact. touch-action: none on the host and in comic/pdf page documents keeps the browser from fighting the engine. - Tap zones (Kindle-style) for touch devices: tap the outer margins to page, center to toggle chrome. Size configurable (10-50%) via the revived tap_zone_size setting; toggle via new tap_zones_enabled (Behavior section of the settings drawer). Pointer-based + passive so drags/swipes/selection never trigger; attached both to the viewport and inside every page document (iframe events don't bubble); debounced 280ms so double-tap zoom doesn't also page; no zone actions while a fixed-layout page is zoomed. - Drawers become full-width sheets on screens <= 640px.
127 lines
3.3 KiB
TypeScript
127 lines
3.3 KiB
TypeScript
import { getToken } from "../storage";
|
|
const LOCALSTORAGE_KEY = "reader_settings_local";
|
|
export async function loadSettings(): Promise<ReaderSettings> {
|
|
const token = getToken();
|
|
if (!token) {
|
|
const local = localStorage.getItem(LOCALSTORAGE_KEY);
|
|
return local ? JSON.parse(local) : getDefaultSettings();
|
|
}
|
|
try {
|
|
const response = await fetch("/readers/settings", {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
const settings = await response.json();
|
|
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(settings));
|
|
return settings;
|
|
} catch (error) {
|
|
const local = localStorage.getItem(LOCALSTORAGE_KEY);
|
|
return local ? JSON.parse(local) : getDefaultSettings();
|
|
}
|
|
}
|
|
export async function saveSettings(
|
|
settings: Partial<ReaderSettings>,
|
|
): Promise<void> {
|
|
const token = getToken();
|
|
const current = await loadSettings();
|
|
const updated = { ...current, ...settings };
|
|
if (!token) {
|
|
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
|
|
return;
|
|
}
|
|
try {
|
|
await fetch("/readers/settings", {
|
|
method: "PUT",
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(settings),
|
|
});
|
|
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
|
|
} catch (error) {
|
|
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(updated));
|
|
}
|
|
}
|
|
export async function syncSettings(): Promise<void> {
|
|
const local = localStorage.getItem(LOCALSTORAGE_KEY);
|
|
if (!local) return;
|
|
const settings = JSON.parse(local);
|
|
const token = getToken();
|
|
if (token) {
|
|
try {
|
|
await fetch("/readers/settings", {
|
|
method: "PUT",
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(settings),
|
|
});
|
|
} catch (error) {
|
|
console.error("Failed to sync settings:", error);
|
|
}
|
|
}
|
|
}
|
|
export function getDefaultSettings(): ReaderSettings {
|
|
return {
|
|
chrome_behavior: "auto-hide",
|
|
progress_mode: "pages",
|
|
chrome_theme: "tokyo-night",
|
|
reading_theme: "light",
|
|
reading_mode: "dark",
|
|
reading_font: "literata",
|
|
tap_zone_size: 30,
|
|
auto_scroll: false,
|
|
font_size: 18,
|
|
line_height: 1.6,
|
|
margin_width: 20,
|
|
double_page_spread: true,
|
|
pdf_interaction_mode: "select",
|
|
tap_zones_enabled: true,
|
|
reading_direction: "ltr",
|
|
hardware_acceleration: true,
|
|
panel_layout: {
|
|
toc: {
|
|
side: "left",
|
|
visible: true,
|
|
collapsed: false,
|
|
width_px: 320,
|
|
order: 1,
|
|
locked: false,
|
|
last_valid_side: "left",
|
|
},
|
|
settings: {
|
|
side: "left",
|
|
visible: false,
|
|
collapsed: true,
|
|
width_px: 380,
|
|
order: 2,
|
|
locked: false,
|
|
last_valid_side: "left",
|
|
},
|
|
navigator: {
|
|
side: "right",
|
|
visible: false,
|
|
collapsed: true,
|
|
width_px: 280,
|
|
order: 3,
|
|
locked: false,
|
|
last_valid_side: "right",
|
|
},
|
|
bookmarks: {
|
|
side: "right",
|
|
visible: false,
|
|
collapsed: true,
|
|
width_px: 280,
|
|
order: 4,
|
|
locked: false,
|
|
last_valid_side: "right",
|
|
},
|
|
mobile_nav_visible: true,
|
|
},
|
|
} as ReaderSettings;
|
|
}
|