111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
import { ref } from 'vue'
|
|
|
|
const HEADLINE_FONT_OPTIONS = [
|
|
{ key: 'default', label: 'Default (Glook)', value: "Glook, 'Courier New'" },
|
|
{ key: 'playfair', label: 'Playfair Display', value: "'Playfair Display', Georgia, serif" },
|
|
{ key: 'lora', label: 'Lora', value: "Lora, Georgia, serif" },
|
|
{ key: 'raleway', label: 'Raleway', value: "Raleway, -apple-system, sans-serif" },
|
|
{ key: 'inter', label: 'Inter', value: "Inter, -apple-system, sans-serif" },
|
|
]
|
|
|
|
const CONTENT_FONT_OPTIONS = [
|
|
{ key: 'default', label: 'Default (Merriweather)', value: "Merriweather, Georgia, 'Times New Roman', Times, serif" },
|
|
{ key: 'lora', label: 'Lora', value: "Lora, Georgia, serif" },
|
|
{ key: 'source-serif', label: 'Source Serif 4', value: "'Source Serif 4', Georgia, serif" },
|
|
{ key: 'inter', label: 'Inter', value: "Inter, -apple-system, sans-serif" },
|
|
{ key: 'playfair', label: 'Playfair Display', value: "'Playfair Display', Georgia, serif" },
|
|
]
|
|
|
|
const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
|
|
const SIZE_LABELS = ['S', 'M', 'L', 'XL']
|
|
|
|
const TEXT_ALIGN_OPTIONS = [
|
|
{ key: 'left', label: 'Left' },
|
|
{ key: 'justify', label: 'Justified' },
|
|
]
|
|
|
|
const PADDING_STEPS = [1, 0.5, 0.15]
|
|
const PADDING_LABELS = ['Default', 'Compact', 'Minimal']
|
|
|
|
const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
|
|
const contentSizeScale = ref(parseFloat(localStorage.getItem('s-content-size') ?? '1'))
|
|
const headlineFontKey = ref(localStorage.getItem('s-headline-font') ?? 'default')
|
|
const contentFontKey = ref(localStorage.getItem('s-content-font') ?? 'default')
|
|
const textAlignKey = ref(localStorage.getItem('s-text-align') ?? 'left')
|
|
const contentPadding = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))
|
|
|
|
function fontValue(options, key) {
|
|
return (options.find(o => o.key === key) ?? options[0]).value
|
|
}
|
|
|
|
function applySettings() {
|
|
const s = document.documentElement.style
|
|
s.setProperty('--headline-font-size-scale', headlineSizeScale.value)
|
|
s.setProperty('--content-font-size-scale', contentSizeScale.value)
|
|
s.setProperty('--headline-font-family', fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
|
|
s.setProperty('--content-font-family', fontValue(CONTENT_FONT_OPTIONS, contentFontKey.value))
|
|
s.setProperty('--content-text-align', textAlignKey.value)
|
|
s.setProperty('--content-padding', contentPadding.value + 'rem')
|
|
}
|
|
|
|
function setHeadlineSize(scale) {
|
|
headlineSizeScale.value = scale
|
|
localStorage.setItem('s-headline-size', scale)
|
|
applySettings()
|
|
}
|
|
|
|
function setContentSize(scale) {
|
|
contentSizeScale.value = scale
|
|
localStorage.setItem('s-content-size', scale)
|
|
applySettings()
|
|
}
|
|
|
|
function setHeadlineFont(key) {
|
|
headlineFontKey.value = key
|
|
localStorage.setItem('s-headline-font', key)
|
|
applySettings()
|
|
}
|
|
|
|
function setContentFont(key) {
|
|
contentFontKey.value = key
|
|
localStorage.setItem('s-content-font', key)
|
|
applySettings()
|
|
}
|
|
|
|
function setTextAlign(key) {
|
|
textAlignKey.value = key
|
|
localStorage.setItem('s-text-align', key)
|
|
applySettings()
|
|
}
|
|
|
|
function setContentPadding(step) {
|
|
contentPadding.value = step
|
|
localStorage.setItem('s-content-padding', step)
|
|
applySettings()
|
|
}
|
|
|
|
export function useSettings() {
|
|
return {
|
|
headlineSizeScale,
|
|
contentSizeScale,
|
|
headlineFontKey,
|
|
contentFontKey,
|
|
SIZE_STEPS,
|
|
SIZE_LABELS,
|
|
HEADLINE_FONT_OPTIONS,
|
|
CONTENT_FONT_OPTIONS,
|
|
TEXT_ALIGN_OPTIONS,
|
|
PADDING_STEPS,
|
|
PADDING_LABELS,
|
|
applySettings,
|
|
setHeadlineSize,
|
|
setContentSize,
|
|
setHeadlineFont,
|
|
setContentFont,
|
|
setTextAlign,
|
|
setContentPadding,
|
|
textAlignKey,
|
|
contentPadding,
|
|
}
|
|
}
|