Merge pull request #395 from coderoad/fix/scroll

Fix/scroll

Author: ShMcK

web-app/src/containers/Tutorial/components/Level.tsx

@@ -15,7 +15,6 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
-    paddingBottom: '5rem',
   },
 
   text: {
@@ -39,13 +38,6 @@ type Props = {
 }
 
 const Level = ({ level }: Props) => {
-  const pageBottomRef = React.useRef(null)
-  const scrollToBottom = () => {
-    // @ts-ignore
-    pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
-  }
-  React.useEffect(scrollToBottom, [level.id])
-
   return (
     <div css={styles.page}>
       <div css={styles.content}>
@@ -54,8 +46,6 @@ const Level = ({ level }: Props) => {
         {level.content.length && level.steps.length ? <div css={styles.separator} /> : null}
 
         <Steps steps={level.steps} />
-
-        <div ref={pageBottomRef} />
       </div>
     </div>
   )

web-app/src/containers/Tutorial/components/ScrollContent.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Icon } from '@alifd/next'
+
+const styles = {
+  scrollIndicator: {
+    position: 'fixed' as 'fixed',
+    display: 'flex' as 'flex',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as 'center',
+    left: 'calc(50% - 8px)',
+    borderRadius: '100%',
+    zIndex: 100,
+    bottom: '2.2rem',
+    boxShadow: '0 0 0 5px transparent',
+  },
+}
+
+type Props = {
+  item: string
+  children: React.ReactElement
+}
+
+const ScrollContent = ({ item, children }: Props) => {
+  const [showScrollIndicator, setShowScrollIndicator] = React.useState<'UNDETERMINED' | 'SHOW' | 'HIDE'>('UNDETERMINED')
+  const pageTopRef: React.RefObject<any> = React.useRef(null)
+  const pageBottomRef: React.RefObject<any> = React.useRef(null)
+
+  const scrollToTop = () => {
+    pageTopRef.current.scrollIntoView({ behavior: 'smooth' })
+    let hideTimeout: any
+
+    // API to detect if an HTML element is in the viewport
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // show a scroll indicator to let the user know
+        // they can scroll down for more
+        const isVisible = entry.isIntersecting
+        if (!isVisible && showScrollIndicator === 'UNDETERMINED') {
+          setShowScrollIndicator('SHOW')
+        }
+        hideTimeout = setTimeout(() => {
+          setShowScrollIndicator('HIDE')
+          observer.unobserve(pageBottomRef.current)
+        }, 2000)
+      },
+      { rootMargin: '0px' },
+    )
+
+    const showTimeout = setTimeout(() => {
+      // detect if bottom of page is visible
+
+      if (pageBottomRef.current) {
+        observer.observe(pageBottomRef.current)
+      }
+    }, 600)
+    return () => {
+      // cleanup timeouts & subs
+      observer.unobserve(pageBottomRef.current)
+      clearTimeout(showTimeout)
+      clearTimeout(hideTimeout)
+    }
+  }
+
+  React.useEffect(scrollToTop, [item])
+
+  return (
+    <div css={{ position: 'relative' }}>
+      <div ref={pageTopRef} />
+      {children}
+      {showScrollIndicator === 'SHOW' ? (
+        <div style={styles.scrollIndicator}>
+          <Icon type="arrow-down" size="small" />
+        </div>
+      ) : null}
+      <div ref={pageBottomRef} />
+    </div>
+  )
+}
+
+export default ScrollContent

web-app/src/containers/Tutorial/index.tsx

@@ -13,8 +13,12 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
 import Reset from './components/Reset'
 import Continue from './components/Continue'
+import ScrollContent from './components/ScrollContent'
 
 const styles = {
+  page: {
+    paddingBottom: '5rem',
+  },
   header: {
     display: 'flex' as 'flex',
     alignItems: 'center',
@@ -47,6 +51,7 @@ const styles = {
     left: 0,
     right: 0,
     color: 'white',
+    zIndex: 1000,
   },
   processes: {
     padding: '0 1rem',
@@ -112,15 +117,19 @@ const TutorialPage = (props: PageProps) => {
 
   return (
     <div>
-      <div>
+      <div css={styles.page}>
         <div css={styles.header}>
           <a onClick={() => setMenuVisible(!menuVisible)}>
             <Icon type="toggle-left" size="small" style={{ color: '#333' }} />
           </a>
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
-        {page === 'level' && <Level level={level} />}
+        {page === 'level' && (
+          <ScrollContent item={level.id}>
+            <Level level={level} />
+          </ScrollContent>
+        )}
         {page === 'review' && <ReviewPage levels={levels} />}
         {/* {page === 'settings' && <SettingsPage />} */}
       </div>

web-app/stories/Tutorial.stories.tsx

@@ -36,7 +36,8 @@ const context: Partial<T.MachineContext> = {
         id: '1',
         title: 'First Level',
         summary: 'A summary of the first level',
-        content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+        content:
+          'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!\nShould support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
         setup: null,
         status: 'COMPLETE' as 'COMPLETE',
         steps: [
@@ -147,6 +148,6 @@ storiesOf('Tutorial', module)
       position: { levelId: '1', stepId: '1.2' },
       progress: { levels: {}, steps: {}, complete: false },
     }
-    return <Tutorial context={firstLevel} send={action('send')} />
+    return <Tutorial state="Normal" context={firstLevel} send={action('send')} />
   })
-  .add('3 step', () => <Tutorial context={context} send={action('send')} />)
+  .add('3 step', () => <Tutorial state="Normal" context={context} send={action('send')} />)