me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

When selecting a toot via keyboard, ensure it is scrolled into view

Browse source
This commit is contained in:
Thibaut Girka 2019-04-15 20:40:05 +02:00 committed by ThibG
parent ae88690fa6
commit a4db307b6a
3 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/javascript/flavours/glitch/components/status_list.js
View file

@ -46,22 +46,28 @@ export default class StatusList extends ImmutablePureComponent {
handleMoveUp = (id, featured) => { handleMoveUp = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) - 1; const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
this._selectChild(elementIndex); this._selectChild(elementIndex, true);
} }
handleMoveDown = (id, featured) => { handleMoveDown = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) + 1; const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
this._selectChild(elementIndex); this._selectChild(elementIndex, false);
} }
handleLoadOlder = debounce(() => { handleLoadOlder = debounce(() => {
this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined); this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
}, 300, { leading: true }) }, 300, { leading: true })
_selectChild (index) { _selectChild (index, align_top) {
const element = this.node.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`); const container = this.node.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
if (element) { if (element) {
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
}
element.focus(); element.focus();
} }
} }

14
app/javascript/flavours/glitch/features/notifications/index.js
View file

@ -133,18 +133,24 @@ export default class Notifications extends React.PureComponent {
handleMoveUp = id => { handleMoveUp = id => {
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1; const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
this._selectChild(elementIndex); this._selectChild(elementIndex, true);
} }
handleMoveDown = id => { handleMoveDown = id => {
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1; const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
this._selectChild(elementIndex); this._selectChild(elementIndex, false);
} }
_selectChild (index) { _selectChild (index, align_top) {
const element = this.column.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`); const container = this.column.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
if (element) { if (element) {
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
}
element.focus(); element.focus();
} }
} }

9
app/javascript/flavours/glitch/features/ui/index.js
View file

@ -341,11 +341,16 @@ export default class UI extends React.Component {
handleHotkeyFocusColumn = e => { handleHotkeyFocusColumn = e => {
const index = (e.key * 1) + 1; // First child is drawer, skip that const index = (e.key * 1) + 1; // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`); const column = this.node.querySelector(`.column:nth-child(${index})`);
if (!column) return;
const container = column.querySelector('.scrollable');
if (column) { if (container) {
const status = column.querySelector('.focusable'); const status = container.querySelector('.focusable');
if (status) { if (status) {
if (container.scrollTop > status.offsetTop) {
status.scrollIntoView(true);
}
status.focus(); status.focus();
} }
} }