Skip to content

Commit

Permalink
allow scroll wheel to navigate
Browse files Browse the repository at this point in the history
also, fix focus ring not showing when previous selection was textarea.
  • Loading branch information
schlawg committed Sep 21, 2022
1 parent f7be125 commit e4130db
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 12 deletions.
5 changes: 5 additions & 0 deletions scss/_lichess-pgn-viewer.lib.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$c-site-hue: 37 !default;
$c-primary: hsl(209, 77%, 50%) !default;
$c-accent: hsl(88, 62%, 37%) !default;
$c-accent-over: white !default;
$c-bg: hsl($c-site-hue, 5%, 18%) !default;
Expand Down Expand Up @@ -46,4 +47,8 @@ $c-interesting: hsl(307, 80%, 70%) !default;
box-shadow: none;
}
}

&:focus {
outline: auto 2px $c-primary;
}
}
8 changes: 4 additions & 4 deletions src/ctrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default class Ctrl {
curNode = (): AnyNode => this.game.nodeAt(this.path) || this.game.moves;
curData = (): InitialOrMove => this.game.dataAt(this.path) || this.game.initial;

goTo = (to: GoTo) => {
goTo = (to: GoTo, focus = true) => {
const path =
to == 'first'
? Path.root
Expand All @@ -36,18 +36,18 @@ export default class Ctrl {
: to == 'next'
? this.game.nodeAt(this.path)?.children[0]?.data.path
: this.game.pathAtMainlinePly('last');
this.toPath(path || this.path);
this.toPath(path || this.path, focus);
};

canGoTo = (to: GoTo) => (to == 'prev' || to == 'first' ? !this.path.empty() : !!this.curNode().children[0]);

toPath = (path: Path) => {
toPath = (path: Path, focus = true) => {
this.path = path;
this.pane = 'board';
this.autoScrollRequested = true;
this.redrawGround();
this.redraw();
this.focus();
if (focus) this.focus();
};

focus = () => this.div?.focus();
Expand Down
13 changes: 5 additions & 8 deletions src/view/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,11 @@ const renderBoard = (ctrl: Ctrl): VNode =>
hook: onInsert(el => {
el.addEventListener('click', ctrl.focus);
if (ctrl.opts.scrollToMove && !('ontouchstart' in window))
bindNonPassive(
'wheel',
stepwiseScroll((e: WheelEvent, scroll: boolean) => {
e.preventDefault();
if (e.deltaY > 0 && scroll) ctrl.goTo('next');
else if (e.deltaY < 0 && scroll) ctrl.goTo('prev');
})
);
el.addEventListener('wheel', stepwiseScroll((e: WheelEvent, scroll: boolean) => {
e.preventDefault();
if (e.deltaY > 0 && scroll) ctrl.goTo('next', false);
else if (e.deltaY < 0 && scroll) ctrl.goTo('prev', false);
}));
}),
},
h('div.cg-wrap')
Expand Down

0 comments on commit e4130db

Please sign in to comment.