Jason/enable interfaces

packages/dual-channel/src/app/components/embedded-items/index.js

@@ -7,6 +7,7 @@ import styled, { css } from 'styled-components'
 import mq from '../../utils/media-query'
 import { connect } from 'react-redux'
 import { Waypoint } from 'react-waypoint'
+import { offsetTop } from '../../constants/customized-props'
 
 const _ = {
   get,
@@ -80,9 +81,9 @@ const ItemViewport = styled.div`
       } else if (props.sectionsPosition === Waypoint.above) {
         return `position: absolute; bottom: 50vh;`
       } else if (props.sectionsPosition === Waypoint.below) {
-        return `position: absolute; top:0px;`
+        return `position: absolute; top: 0px;`
       }
-      return `position: fixed; top: 0px;`
+      return `position: fixed; top: ${offsetTop}px;`
     }}
   `}
   ${mq.desktopOnly`

packages/dual-channel/src/app/components/sections-entry-points.js

@@ -3,6 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Waypoint } from 'react-waypoint'
 import { connect } from 'react-redux'
+import { scrollableAncestor } from '../constants/customized-props'
 
 const EntryPoint = styled.div`
   width: 1px;
@@ -51,6 +52,7 @@ class _HeadEntryPoint extends React.PureComponent {
   render() {
     return (
       <Waypoint
+        scrollableAncestor={scrollableAncestor}
         topOffset={this.props.topOffset}
         bottomOffset={this.props.bottomOffset}
         onPositionChange={this._handlePositionChange}

packages/dual-channel/src/app/components/text/index.js

@@ -11,6 +11,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Waypoint } from 'react-waypoint'
 import { connect } from 'react-redux'
+import { scrollableAncestor } from '../../constants/customized-props'
 
 const _ = {
   get,
@@ -67,7 +68,7 @@ class ArticleText extends React.Component {
     chapters: PropTypes.arrayOf(predefinedPropTypes.chapter).isRequired,
     // provided by redux
     // currentAnchor: PropTypes.number.isRequired,
-    updatAnchorIndex: PropTypes.func.isRequired,
+    updateAnchorIndex: PropTypes.func.isRequired,
   }
 
   _handlePositionChange = (
@@ -87,7 +88,7 @@ class ArticleText extends React.Component {
       positionState.previousSection = sectionIndex
     }
 
-    this.props.updatAnchorIndex({
+    this.props.updateAnchorIndex({
       ...positionState,
     })
   }
@@ -110,6 +111,7 @@ class ArticleText extends React.Component {
     const _renderSection = (section, sectionIndex) => {
       const sectionJsx = (
         <Waypoint
+          scrollableAncestor={scrollableAncestor}
           key={section.id}
           id={section.id}
           topOffset="49%"
@@ -142,7 +144,7 @@ class ArticleText extends React.Component {
 }
 
 const mapDispatchToProps = dispatch => ({
-  updatAnchorIndex: dispatch.position.update,
+  updateAnchorIndex: dispatch.position.update,
 })
 
 export default connect(

packages/dual-channel/src/app/constants/customized-props.js

@@ -0,0 +1,16 @@
+const isClientSide =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined'
+
+const scrollableAncestorValue =
+  isClientSide &&
+  document.currentScript.getAttribute('data-scrollable-ancestor')
+export const scrollableAncestor = scrollableAncestorValue || undefined
+
+const offsetTopValue =
+  isClientSide && document.currentScript.getAttribute('data-offset-top')
+export const offsetTop =
+  offsetTopValue &&
+  Number.isInteger(Number(offsetTopValue)) &&
+  Number(offsetTopValue) > 0
+    ? offsetTopValue
+    : 0