allow dynamic changing the font-size of the notes #428
Conversation
| if (e.key === '+' || e.key === '=') resizeNotes('bigger') | ||
| if (e.key === '-' || e.key === '_') resizeNotes('smaller') |
There was a problem hiding this comment.
= and _ are not required.
In my keyboard layout, there is no _ key assign in - keycap. Instead, - key has = key assign.
There was a problem hiding this comment.
On my uk keyboard it looks like this. The plus requires holding shift.
The extra key binding while not correct felt more intuitive
There was a problem hiding this comment.
I think it is not intuitive for me because my key layout will trigger unexpected scaling by not related key.
| resizeNotes('smaller') | ||
| ) | ||
|
|
||
| document.addEventListener('keyup', (e: KeyboardEvent) => { |
There was a problem hiding this comment.
Should use keydown event instead of keyup.
Check e.repeat within event callback to ignore key repeat.
There was a problem hiding this comment.
Something else is binding to keydown and stopping propagation.
What do you advise?
There was a problem hiding this comment.
The element for notes is stopping event propagation because global slide page navigation will conflict with arrow keys for scrolling notes. #431 has enabled useCapture flag in third argument:
| const resizeNotes = (direction: string) => { | ||
| const current = parseFloat($(classes.noteContainer).style.fontSize) || 1 | ||
| const intended = current + (direction === 'bigger' ? 0.1 : -0.1) | ||
| $(classes.noteContainer).style.fontSize = `${intended.toFixed(1)}em` | ||
| } |
There was a problem hiding this comment.
Using CSS custom property would be smart as like as #427 (comment).
const notesFontSizeBase = 0
const resizeNotesFont = (increment: number) => {
notesFontSizeBase = Math.max(-0.5, increment + notesFontSizeBase) // Prevent making too smaller
$(classes.noteContainer).style.setProperty('--bespoke-marp-note-font-base', notesFontSizeBase.toFixed(1))
}
$(classes.noteButtonsBigger).addEventListener('click', () => resizeNotesFont(0.1))
$(classes.noteButtonsSmaller).addEventListener('click', () => resizeNotesFont(-0.1)).bespoke-marp-note {
/* Base font size is 1.1em, and add modified difference of font size by user */
font-size: calc((1.1 + var(--bespoke-marp-note-font-base, 0)) * 1em);
}| @@ -0,0 +1 @@ | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5" d="M92,70L52,30L12,70"/></svg> | |||
There was a problem hiding this comment.
Chevron marks may confuse users who were thinking them as to scroll notes. Modern browsers are using - and + icons as to scale so we should follow common style by creating new icons.
There was a problem hiding this comment.
I'll admit I was being lazy and just rotating the ones you already had😂, do you have an easy way to make +&- that match?
There was a problem hiding this comment.
I made new designs for plus and minus icon at #431.
|
-> #431 |
…otes Polished #428: Make notes font size changeable in bespoke template
|
A improved version #431 has been merged. Thank you for your nice suggestion and contribution 😄 |
buttons that appear when hovering over the notes in presenter view, change the font-size by +/-
0.1em