diff --git a/src/pyj/read_book/prefs/font_size.pyj b/src/pyj/read_book/prefs/font_size.pyj index fdd7c50234..91f8d3014c 100644 --- a/src/pyj/read_book/prefs/font_size.pyj +++ b/src/pyj/read_book/prefs/font_size.pyj @@ -7,16 +7,17 @@ from gettext import gettext as _ from book_list.globals import get_session_data from book_list.theme import get_color -from dom import add_extra_css, element, rule, set_css, unique_id +from dom import add_extra_css, rule, unique_id from read_book.globals import ui_operations from widgets import create_button CONTAINER = unique_id('font-size-prefs') -QUICK = unique_id('quick') +MIN_FONT_SIZE = 8 +MAX_FONT_SIZE = 80 add_extra_css(def(): - style = rule(QUICK, 'li.current', background_color=get_color('window-background2')) - style += rule(QUICK, 'li:hover', background_color=get_color('window-background2')) + style = rule(CONTAINER, 'option.current', background_color=get_color('window-background2')) + style += rule(CONTAINER, 'option:hover', background_color=get_color('window-background2')) style += rule(CONTAINER, 'a:hover', color=get_color('window-hover-foreground')) style += rule(CONTAINER, 'a.calibre-push-button:hover', color=get_color('button-text')) return style @@ -28,64 +29,98 @@ def change_font_size(sz): sd.set('base_font_size', sz) ui_operations.update_font_size() -def set_quick_size(ev): - li = ev.currentTarget - sz = int(li.dataset.sz) - change_font_size(sz) -def set_custom_size(ev): - sz = int(element(CONTAINER, 'input').value) - change_font_size(sz) +def apply_font_size(): + fs = int(document.getElementById(CONTAINER).dataset.cfs) + change_font_size(fs) + + +def set_quick_size(ev): + newval = ev.currentTarget.value + try: + int(newval) + except: + return + if newval is not document.getElementById(CONTAINER).dataset.cfs: + display_changed_font_size(newval) + def change_font_size_by(frac): sd = get_session_data() sz = sd.get('base_font_size') amt = sz * frac - nsz = sz + amt - nsz = max(8, min(nsz, 80)) + nsz = int(sz + amt) + nsz = max(MIN_FONT_SIZE, min(nsz, MAX_FONT_SIZE)) change_font_size(nsz) -def show_custom_size(ev): - c = element(CONTAINER) - for child in c.childNodes: - child.style.display = 'none' - c.lastChild.style.display = 'block' - c.lastChild.querySelector('input').focus() + +def display_changed_font_size(sz): + sz = max(MIN_FONT_SIZE, min(int(sz), MAX_FONT_SIZE)) + sz += '' + c = document.getElementById(CONTAINER) + c.dataset.cfs = sz + for option in c.querySelectorAll('option'): + if option.value is sz: + option.classList.add('current') + else: + option.classList.remove('current') + for input in c.querySelectorAll('input'): + input.value = sz + c.querySelector('.cfs_preview').style.fontSize = f'{sz}px' + def create_font_size_panel(container, close): - container.appendChild(E.div(id=CONTAINER, - style='margin:15vh auto; max-width: 500px; border-radius: 8px; border: solid 1px currentColor; padding:1ex 1rem', - onclick=def(ev): ev.preventDefault(), ev.stopPropagation() - )) - container = container.lastChild - container.style.backgroundColor = get_color('window-background') - quick = E.ul(id=QUICK, style='display:flex; justify-content:space-around; flex-wrap: wrap; align-items: baseline; list-style: none') - container.appendChild(quick) sd = get_session_data() cfs = sd.get('base_font_size') + container.appendChild(E.div( + style='width: 100%; height: 100%; display: flex; justify-content: center; align-items: center', + E.div( + id=CONTAINER, + style='max-width: 500px; width: 80vw; border-radius: 8px; border: solid 1px currentColor; padding:1ex 1rem;', + onclick=def(ev): ev.preventDefault(), ev.stopPropagation() + ))) + container = container.lastChild.lastChild + container.style.backgroundColor = get_color('window-background') + container.dataset.cfs = cfs + '' + quick = E.datalist(style='display:flex; justify-content:space-around; flex-wrap: wrap; align-items: baseline;') + container.appendChild(quick) for sz in (10, 12, 14, 16, 18, 20, 22): - quick.appendChild(set_css(E.li('Aa', title='{} px'.format(sz), class_='current' if cfs is sz else '', data_sz=str(sz), onclick=def(ev):set_quick_size(ev), close();), - display='inline-block', font_size=sz + 'px', padding='5px', cursor='pointer', border_radius='2px')) + quick.appendChild(E.option( + 'Aa', title='{} px'.format(sz), + class_='current' if cfs is sz else '', + value=sz + '', + style=f'display: inline-block; font-size:{sz}px; padding: 5px; cursor: pointer; border-radius: 4px; margin: 0 0.5rem', + onclick=def(ev): + set_quick_size(ev) + )) container.appendChild(E.div( - E.a(_('Custom size'), class_='blue-link', href='javascript:void', onclick=show_custom_size, style='cursor:pointer'), - style='text-align: right; font-size: smaller; margin-top: 2ex' + style='display: flex; margin-top: 1rem', + E.input( + type='range', min=MIN_FONT_SIZE + '', max=MAX_FONT_SIZE + '', value=cfs + '', style='flex-grow: 4', + oninput=set_quick_size, + ), + + E.span('\xa0', E.input( + value=f'{cfs}', type='text', oninput=set_quick_size, type='number', min=MIN_FONT_SIZE, max=MAX_FONT_SIZE, + step='1', style='width: 3em', + ), '\xa0px') )) - container.appendChild(E.div(style='display:none', - E.div(E.label(_('Font size (pixels):'), '\xa0', E.input( - type='number', min=8, max=60, step=1, - value=sd.get('base_font_size') + '', - onkeydown=def(evt): - if evt.key is 'Enter': - evt.preventDefault() - set_custom_size(), close() - ))), - E.div(style='text-align:right; margin-top:1ex; display:flex; justify-content: flex-end', - create_button(_('OK'), 'check', def(): set_custom_size(), close();), E.span('\xa0'), - create_button(_('Cancel'), action=close) - ))) + container.appendChild(E.div( + style=f'font-size: {cfs}px; margin-top: 1rem; min-height: 60px; max-height: 60px; overflow: hidden; display: flex;', + E.div(class_='cfs_preview', _('Sample to preview font size')) + )) + container.appendChild(E.div( + style='margin-top: 1rem; text-align: right', + create_button(_('OK'), highlight=True, action=def(): + apply_font_size() + close() + ), + '\xa0\xa0', + create_button(_('Cancel'), action=close), + )) def develop(container):