Merge pull request steemit#297 from steemit/282-post-overlay

focus post overlay when opened and let it close with esc
gryter · Sep 20, 2016 · 1a74f60 · 1a74f60
2 parents 22ebd52 + 6502068
commit 1a74f60
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/app/components/cards/PostSummary.jsx b/app/components/cards/PostSummary.jsx
@@ -36,7 +36,16 @@ function TimeAuthorCategory({post, links, authorRepLog10, gray}) {
     );
 }
 
+function isLeftClickEvent(event) {
+    return event.button === 0
+}
+
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+}
+
 function navigate(e, onClick, post, url) {
+    if (isModifiedEvent(e) || !isLeftClickEvent(e)) return;
     e.preventDefault();
     if (onClick) onClick(post, url);
     else browserHistory.push(url);

diff --git a/app/components/cards/PostsList.jsx b/app/components/cards/PostsList.jsx
@@ -55,34 +55,41 @@ class PostsList extends React.Component {
     componentWillUnmount() {
         this.detachScrollListener();
         window.removeEventListener('popstate', this.onBackButton);
+        window.removeEventListener('keydown', this.onBackButton);
         const post_overlay = document.getElementById('post_overlay');
         if (post_overlay) post_overlay.removeEventListener('click', this.closeOnOutsideClick);
         document.getElementsByTagName('body')[0].className = "";
     }
 
     componentWillUpdate(nextProps) {
-        if (this.state.showPost && (window.location.pathname !== this.post_url)) {
+        const location = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        if (this.state.showPost && (location !== this.post_url)) {
             this.setState({showPost: null});
         }
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.showPost) {
+        if (this.state.showPost && !prevState.showPost) {
             document.getElementsByTagName('body')[0].className = 'with-post-overlay';
             window.addEventListener('popstate', this.onBackButton);
+            window.addEventListener('keydown', this.onBackButton);
             const post_overlay = document.getElementById('post_overlay');
-            if (post_overlay) post_overlay.addEventListener('click', this.closeOnOutsideClick);
-        } else if (prevState.showPost) {
-            window.history.pushState({}, '', this.props.pathname);
-            this.post_url = null;
+            if (post_overlay) {
+                post_overlay.addEventListener('click', this.closeOnOutsideClick);
+                post_overlay.focus();
+            }
         }
-        if (!this.state.showPost) {
+        if (!this.state.showPost && prevState.showPost) {
+            window.history.pushState({}, '', this.props.pathname);
             document.getElementsByTagName('body')[0].className = '';
+            this.post_url = null;
         }
     }
 
-    onBackButton() {
+    onBackButton(e) {
+        if (e.keyCode && e.keyCode !== 27) return;
         window.removeEventListener('popstate', this.onBackButton);
+        window.removeEventListener('keydown', this.onBackButton);
         this.setState({showPost: null});
     }
 
@@ -162,7 +169,7 @@ class PostsList extends React.Component {
                     {renderSummary(comments)}
                 </ul>
                 {loading && <center><LoadingIndicator type="circle" /></center>}
-                {showPost && <div id="post_overlay" className="PostsList__post_overlay">
+                {showPost && <div id="post_overlay" className="PostsList__post_overlay" tabIndex={0}>
                     <div className="PostsList__post_top_overlay">
                         <div className="PostsList__post_top_bar">
                             <button className="back-button" type="button" title="Back" onClick={() => {this.setState({showPost: null})}}>