From 4ef197085bc2b58685838db3d066cca027c51365 Mon Sep 17 00:00:00 2001
From: Cameron Bothner <cameronbothner@gmail.com>
Date: Wed, 13 Dec 2017 12:36:53 -0500
Subject: [PATCH] Cards and CommentThreadItems scroll into view when needed

---
 app/javascript/card/CardContents.jsx          |   3 +
 .../comments/CommentThreadsCard.jsx           |   3 +-
 .../conversation/CommentThreadItem.jsx        |  13 +-
 .../conversation/RecentCommentThreads.jsx     |   2 +-
 .../conversation/SelectedCommentThread.jsx    |   3 +-
 app/javascript/conversation/shared.jsx        |  63 ----------
 app/javascript/utility/ScrollLock.jsx         |  21 ----
 app/javascript/utility/ScrollView.jsx         | 114 ++++++++++++++++++
 8 files changed, 133 insertions(+), 89 deletions(-)
 delete mode 100644 app/javascript/utility/ScrollLock.jsx
 create mode 100644 app/javascript/utility/ScrollView.jsx

diff --git a/app/javascript/card/CardContents.jsx b/app/javascript/card/CardContents.jsx
index 854df28e1..804cf259f 100644
--- a/app/javascript/card/CardContents.jsx
+++ b/app/javascript/card/CardContents.jsx
@@ -20,6 +20,7 @@ import CitationTooltip from './CitationTooltip'
 import CommentThreadsTag from 'comments/CommentThreadsTag'
 import { OnScreenTracker } from 'utility/Tracker'
 import { FocusContainer } from 'utility/A11y'
+import { ScrollIntoView } from 'utility/ScrollView'
 
 import type { ContextRouter, Match } from 'react-router-dom'
 
@@ -142,6 +143,8 @@ class CardContents extends React.Component<Props, *> {
           transition: 'padding-top 0.1s, flex 0.3s',
         }}
       >
+        {theseCommentThreadsOpen ? <ScrollIntoView /> : null}
+
         {editing && <EditorToolbar cardId={id} />}
         {title}
         <FocusContainer
diff --git a/app/javascript/comments/CommentThreadsCard.jsx b/app/javascript/comments/CommentThreadsCard.jsx
index 4bf577011..4ffda539e 100644
--- a/app/javascript/comments/CommentThreadsCard.jsx
+++ b/app/javascript/comments/CommentThreadsCard.jsx
@@ -17,7 +17,8 @@ import CommentThreadItem from 'conversation/CommentThreadItem'
 import CommentsCard from 'comments/CommentsCard'
 import NewCommentButton from 'comments/NewCommentButton'
 import { FocusContainer } from 'utility/A11y'
-import { CommentThreadBreadcrumbs, ScrollView } from 'conversation/shared'
+import { CommentThreadBreadcrumbs } from 'conversation/shared'
+import ScrollView from 'utility/ScrollView'
 
 import { Link, Route, matchPath } from 'react-router-dom'
 import { elementOpen, commentsOpen } from 'shared/routes'
diff --git a/app/javascript/conversation/CommentThreadItem.jsx b/app/javascript/conversation/CommentThreadItem.jsx
index 29cf5d844..b75ec6d61 100644
--- a/app/javascript/conversation/CommentThreadItem.jsx
+++ b/app/javascript/conversation/CommentThreadItem.jsx
@@ -18,6 +18,7 @@ import {
   CommentThreadBreadcrumb,
 } from 'conversation/shared'
 import Identicon from 'shared/Identicon'
+import { ScrollIntoView } from 'utility/ScrollView'
 
 import { commentsOpen, commentThreadsOpen } from 'shared/routes'
 import { hoverCommentThread, deleteCommentThread } from 'redux/actions'
@@ -69,9 +70,15 @@ function mapDispatchToProps (
   dispatch: Dispatch,
   { id, history, location }: OwnProps
 ) {
+  const inSitu = /cards/.test(location.pathname)
+  const hoverHandlers = inSitu
+    ? {
+      handleMouseEnter: () => dispatch(hoverCommentThread(id)),
+      handleMouseLeave: () => dispatch(hoverCommentThread(null)),
+    }
+    : {}
   return {
-    handleMouseEnter: () => dispatch(hoverCommentThread(id)),
-    handleMouseLeave: () => dispatch(hoverCommentThread(null)),
+    ...hoverHandlers,
     handleDeleteThread: (e: SyntheticMouseEvent<*>) => {
       e.preventDefault()
       const promise = dispatch(deleteCommentThread(id))
@@ -106,6 +113,8 @@ const CommentThreadItem = ({
     onMouseEnter={handleMouseEnter}
     onMouseLeave={handleMouseLeave}
   >
+    {open && <ScrollIntoView />}
+
     <CommentThreadBreadcrumbs>
       <CommentThreadBreadcrumb>
         <FormattedMessage
diff --git a/app/javascript/conversation/RecentCommentThreads.jsx b/app/javascript/conversation/RecentCommentThreads.jsx
index 8a813e3e9..d332defe0 100644
--- a/app/javascript/conversation/RecentCommentThreads.jsx
+++ b/app/javascript/conversation/RecentCommentThreads.jsx
@@ -13,7 +13,7 @@ import { NonIdealState } from '@blueprintjs/core'
 import { CoverImageContainer } from 'overview/BillboardTitle'
 import CommunityChooser from 'overview/CommunityChooser'
 import CommentThreadItem from 'conversation/CommentThreadItem'
-import { ScrollView } from 'conversation/shared'
+import ScrollView from 'utility/ScrollView'
 
 import type { State } from 'redux/state'
 
diff --git a/app/javascript/conversation/SelectedCommentThread.jsx b/app/javascript/conversation/SelectedCommentThread.jsx
index 8ee065c3d..2e2873f18 100644
--- a/app/javascript/conversation/SelectedCommentThread.jsx
+++ b/app/javascript/conversation/SelectedCommentThread.jsx
@@ -15,7 +15,8 @@ import Responses from 'conversation/Responses'
 import ResponseForm, {
   EmptyResponseFormContainer,
 } from 'conversation/ResponseForm'
-import { ScrollView, NoSelectedCommentThread } from 'conversation/shared'
+import { NoSelectedCommentThread } from 'conversation/shared'
+import ScrollView from 'utility/ScrollView'
 import { LabelForScreenReaders, FocusContainer } from 'utility/A11y'
 
 import { deleteCommentThread } from 'redux/actions'
diff --git a/app/javascript/conversation/shared.jsx b/app/javascript/conversation/shared.jsx
index 5f49801d3..053427f21 100644
--- a/app/javascript/conversation/shared.jsx
+++ b/app/javascript/conversation/shared.jsx
@@ -7,12 +7,6 @@ import styled, { css } from 'styled-components'
 import { FormattedDate } from 'react-intl'
 import ReactMarkdown from 'react-markdown'
 
-function cancelScrollEvent (e: WheelEvent) {
-  e.stopImmediatePropagation()
-  e.preventDefault()
-  return false
-}
-
 export const CommentThreadBreadcrumbs = styled.ul.attrs({
   className: 'pt-breadcrumbs',
 })`
@@ -88,63 +82,6 @@ const OptionalUnderline = styled.span.attrs({
     `};
 `
 
-export class ScrollView extends React.Component<{
-  maxHeightOffset: string,
-  innerRef: HTMLDivElement => any,
-  children: React.Node,
-}> {
-  static defaultProps = { innerRef: (_: HTMLDivElement) => {} }
-
-  container: ?HTMLDivElement
-
-  componentDidMount () {
-    this.container &&
-      this.container.addEventListener('wheel', this.handleScroll, false)
-    this.container && this.props.innerRef(this.container)
-  }
-
-  componentWillUnmount () {
-    this.container &&
-      this.container.removeEventListener('wheel', this.handleScroll, false)
-  }
-
-  render () {
-    const { children, ...rest } = this.props
-    return (
-      <ScrollViewDiv {...rest} innerRef={el => (this.container = el)}>
-        {children}
-      </ScrollViewDiv>
-    )
-  }
-
-  handleScroll = (e: WheelEvent) => {
-    const target = ((e.target: any): HTMLElement)
-    if (this.container && this.container.contains(target)) {
-      var scrollTop = this.container.scrollTop
-      var scrollHeight = this.container.scrollHeight
-      var height = this.container.clientHeight
-      var wheelDelta = e.deltaY
-      var isDeltaPositive = wheelDelta > 0
-
-      if (isDeltaPositive && wheelDelta > scrollHeight - height - scrollTop) {
-        this.container.scrollTop = scrollHeight
-        return cancelScrollEvent(e)
-      } else if (!isDeltaPositive && -wheelDelta > scrollTop) {
-        this.container.scrollTop = 0
-        return cancelScrollEvent(e)
-      }
-    }
-  }
-}
-
-const ScrollViewDiv = styled.div.attrs({ className: 'ScrollView' })`
-  max-height: ${({ maxHeightOffset }) =>
-    `calc(100vh - (${maxHeightOffset}))` || '100vh'};
-  overflow-x: hidden;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-`
-
 export const SmallGreyText = styled.span`
   font-size: 14px;
   color: #5c7080;
diff --git a/app/javascript/utility/ScrollLock.jsx b/app/javascript/utility/ScrollLock.jsx
deleted file mode 100644
index e7fe1126f..000000000
--- a/app/javascript/utility/ScrollLock.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @providesModule ScrollLock
- * @flow
- */
-
-import * as React from 'react'
-
-class ScrollLock extends React.Component<{ children: React.Node }> {
-  componentDidMount () {
-    document.body && document.body.classList.add('pt-overlay-open')
-  }
-
-  componentWillUnmount () {
-    document.body && document.body.classList.remove('pt-overlay-open')
-  }
-
-  render () {
-    return this.props.children
-  }
-}
-export default ScrollLock
diff --git a/app/javascript/utility/ScrollView.jsx b/app/javascript/utility/ScrollView.jsx
new file mode 100644
index 000000000..7965d6dfe
--- /dev/null
+++ b/app/javascript/utility/ScrollView.jsx
@@ -0,0 +1,114 @@
+/**
+ * @providesModule ScrollView
+ * @flow
+ */
+
+import * as React from 'react'
+import styled from 'styled-components'
+
+class ScrollView extends React.Component<{
+  maxHeightOffset: string,
+  innerRef: HTMLDivElement => any,
+  children: React.Node,
+}> {
+  static defaultProps = { innerRef: (_: HTMLDivElement) => {} }
+
+  container: ?HTMLDivElement
+
+  componentDidMount () {
+    this.container &&
+      this.container.addEventListener('wheel', this.handleScroll, false)
+    this.container && this.props.innerRef(this.container)
+  }
+
+  componentWillUnmount () {
+    this.container &&
+      this.container.removeEventListener('wheel', this.handleScroll, false)
+  }
+
+  render () {
+    const { children, ...rest } = this.props
+    return (
+      <ScrollViewDiv {...rest} innerRef={el => (this.container = el)}>
+        {children}
+      </ScrollViewDiv>
+    )
+  }
+
+  handleScroll = (e: WheelEvent) => {
+    const target = ((e.target: any): HTMLElement)
+    if (this.container && this.container.contains(target)) {
+      var scrollTop = this.container.scrollTop
+      var scrollHeight = this.container.scrollHeight
+      var height = this.container.clientHeight
+      var wheelDelta = e.deltaY
+      var isDeltaPositive = wheelDelta > 0
+
+      if (isDeltaPositive && wheelDelta > scrollHeight - height - scrollTop) {
+        this.container.scrollTop = scrollHeight
+        return cancelScrollEvent(e)
+      } else if (!isDeltaPositive && -wheelDelta > scrollTop) {
+        this.container.scrollTop = 0
+        return cancelScrollEvent(e)
+      }
+    }
+  }
+}
+export default ScrollView
+
+function cancelScrollEvent (e: WheelEvent) {
+  e.stopImmediatePropagation()
+  e.preventDefault()
+  return false
+}
+
+const ScrollViewDiv = styled.div.attrs({ className: 'ScrollView' })`
+  max-height: ${({ maxHeightOffset }) =>
+    `calc(100vh - (${maxHeightOffset}))` || '100vh'};
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+`
+
+export class ScrollIntoView extends React.Component<{}> {
+  ref: ?HTMLDivElement
+
+  componentDidMount () {
+    setTimeout(() => {
+      const rect = this.ref && this.ref.getBoundingClientRect()
+      const windowHeight =
+        document.documentElement && document.documentElement.clientHeight
+
+      if (
+        rect &&
+        windowHeight &&
+        (rect.top < 0 || rect.bottom > windowHeight)
+      ) {
+        this.ref &&
+          this.ref.scrollIntoView &&
+          this.ref.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }, 50)
+  }
+
+  render () {
+    return <ScrollTarget innerRef={ref => (this.ref = ref)} />
+  }
+}
+const ScrollTarget = styled.div`
+  transform: translateY(-50px);
+`
+
+export class ScrollLock extends React.Component<{ children: React.Node }> {
+  componentDidMount () {
+    document.body && document.body.classList.add('pt-overlay-open')
+  }
+
+  componentWillUnmount () {
+    document.body && document.body.classList.remove('pt-overlay-open')
+  }
+
+  render () {
+    return this.props.children
+  }
+}