about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/notifications
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2019-04-15 20:40:05 +0200
committerThibG <thib@sitedethib.com>2019-04-17 10:07:33 +0200
commit8d57c0e70ea76b2f482c0919fc815d40352ef477 (patch)
tree746b951862402f65cce8f724250ca20c7858ac33 /app/javascript/flavours/glitch/features/notifications
parentfbec0edf08ce686e1b4c8332fad4481986e2dad5 (diff)
When selecting a toot via keyboard, ensure it is scrolled into view
Diffstat (limited to 'app/javascript/flavours/glitch/features/notifications')
-rw-r--r--app/javascript/flavours/glitch/features/notifications/index.js14
1 files changed, 10 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index 6a149927c..f2a1ccc3b 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -133,18 +133,24 @@ export default class Notifications extends React.PureComponent {
 
   handleMoveUp = id => {
     const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
-    this._selectChild(elementIndex);
+    this._selectChild(elementIndex, true);
   }
 
   handleMoveDown = id => {
     const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
-    this._selectChild(elementIndex);
+    this._selectChild(elementIndex, false);
   }
 
-  _selectChild (index) {
-    const element = this.column.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+  _selectChild (index, align_top) {
+    const container = this.column.node;
+    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
 
     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();
     }
   }