Merge pull request #81 from chrisgarrity/feature/html-resources

Convert PDFs on the Teach/curricula and /assessments pages to HTML to make them easier to translate

package.json

@@ -27,6 +27,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "classnames": "2.2.5",
@@ -42,6 +43,7 @@
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "2.30.1",
     "json-loader": "^0.5.7",
+    "lodash.debounce": "4.0.8",
     "lodash.defaults": "4.2.0",
     "node-sass": "^4.5.3",
     "postcss-loader": "^2.0.6",
@@ -52,6 +54,7 @@
     "react-router-prop-types": "0.0.1",
     "react-slick": "0.15.4",
     "react-twitter-widgets": "1.5.1",
+    "rrc": "0.10.1",
     "sass-lint": "^1.11.1",
     "sass-loader": "^6.0.6",
     "slick-carousel": "1.7.1",

src/components/scrollmanager/scrollmanager.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import debounceFn from 'lodash.debounce';
+
+class ScrollManager extends React.Component {
+
+    constructor (props) {
+        super(props);
+
+        this.scrollSyncData = {
+            x: 0,
+            y: 0,
+            attemptsRemaining: props.scrollSyncAttemptLimit
+        };
+
+        const scrollCapture = () => {
+            requestAnimationFrame(() => {
+                const {pageXOffset: x, pageYOffset: y} = window;
+                let {pathname} = this.props.location;
+
+                // router location does not include basename, since this function is setting
+                // window.location later, pathname needs basename prepended
+                if (typeof (this.props.basename) === 'string') {
+                    pathname = this.props.basename + pathname;
+                }
+
+                // use browser history instead of router history to avoid infinite
+                // history.replace loop
+                const historyState = window.history.state || {};
+                const {
+                    state = {}
+                } = historyState;
+                if (!state.scroll || state.scroll.x !== pageXOffset || state.scroll.y !== pageYOffset) {
+                    window.history.replaceState({
+                        ...historyState,
+                        state: {
+                            ...state,
+                            scroll: {x, y}
+                        }
+                    }, null, pathname);
+                }
+            });
+        };
+
+        const _scrollSync = () => {
+            requestAnimationFrame(() => {
+                const {x, y, attemptsRemaining} = this.scrollSyncData;
+
+                if (attemptsRemaining < 1) {
+                    return;
+                }
+
+                const {pageXOffset, pageYOffset} = window;
+                if (y < window.document.body.scrollHeight && (x !== pageXOffset || y !== pageYOffset)) {
+                    window.scrollTo(x, y);
+                    this.scrollSyncData.attemptsRemaining = attemptsRemaining - 1;
+                    _scrollSync();
+                }
+            });
+        };
+
+        const scrollSync = (x = 0, y = 0) => {
+            this.scrollSyncData = {
+                x,
+                y,
+                attemptsRemaining: this.props.scrollSyncAttemptLimit
+            };
+            _scrollSync();
+        };
+
+        this.debouncedScroll = debounceFn(scrollCapture, props.scrollCaptureDebounce);
+        this.debouncedScrollSync = debounceFn(scrollSync, props.scrollSyncDebounce);
+    }
+
+    componentWillMount () {
+        const {location, onLocationChange} = this.props;
+        if (onLocationChange) {
+            onLocationChange(location);
+        }
+    }
+
+    componentDidMount () {
+        this.onPop(this.props);
+        window.addEventListener('scroll', this.debouncedScroll, {passive: true});
+    }
+
+    componentWillReceiveProps (nextProps) {
+        switch (nextProps.history.action) {
+        case 'PUSH':
+        case 'REPLACE':
+            this.onPush(nextProps);
+            break;
+        case 'POP':
+            this.onPop(nextProps);
+            break;
+        default:
+            console.warn( // eslint-disable-line no-console
+                `Unrecognized location change action! "${nextProps.history.action}"`
+            );
+        }
+        if (nextProps.onLocationChange) {
+            nextProps.onLocationChange(nextProps.location);
+        }
+    }
+
+    componentWillUnmount () {
+        this.scrollSyncPending = false;
+        window.removeEventListener('scroll', this.debouncedScroll, {passive: true});
+    }
+
+    onPush ({location}) {
+        if (!location.hash) {
+            this.debouncedScrollSync(0, 0);
+        }
+    }
+
+    onPop ({
+        location: {
+            state = {}
+        }
+    }) {
+        // attempt location restore
+        const {
+            x = 0,
+            y = 0
+        } = state.scroll || {};
+        this.debouncedScrollSync(x, y);
+    }
+
+    render () {
+        return this.props.children;
+    }
+}
+ScrollManager.propTypes = {
+    basename: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location,
+    onLocationChange: PropTypes.func,
+    scrollCaptureDebounce: PropTypes.number,
+    scrollSyncAttemptLimit: PropTypes.number,
+    scrollSyncDebounce: PropTypes.number
+};
+ScrollManager.defaultProps = {
+    scrollCaptureDebounce: 50,
+    scrollSyncDebounce: 100,
+    scrollSyncAttemptLimit: 5
+};
+export default withRouter(ScrollManager);

src/components/sectionitem/section.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './sectionitem.scss';
 import TxDiv from '../transifex/txdiv.jsx';
-import ScrollToTopOnMount from '../scrolltotoponmount/scrolltotoponmount.jsx';
 
 const Section = ({
     children,
@@ -18,7 +17,6 @@ const Section = ({
             id={id}
             txContent={txContent}
         >
-            <ScrollToTopOnMount />
             <div className="content-section-title">
                 {title}
             </div>

src/views/teach/assessments.jsx

@@ -4,14 +4,25 @@ import ReactRouterPropTypes from 'react-router-prop-types';
 
 import AssessmentsHomeSection from './assessments/home.jsx';
 import SolveitSection from './assessments/solveit.jsx';
+import AnswerSheetHtml from './assessments/answersheet.jsx';
+import ReverseEngineeringHtml from './assessments/reverseengineering.jsx';
 
 const AssessmentsSection = ({match}) => (
     <div>
         <Switch>
             <Route
+                exact
                 path={`${match.url}/solveit`}
                 component={SolveitSection}
             />
+            <Route
+                path={`${match.url}/solveit/answersheet`}
+                component={AnswerSheetHtml}
+            />
+            <Route
+                path={`${match.url}/reverse-engineering`}
+                component={ReverseEngineeringHtml}
+            />
             <Route component={AssessmentsHomeSection} />
         </Switch>
     </div>

src/views/teach/assessments/answersheet.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import htmlContent from './student_answer_sheet.html';
+
+import '../print.css';
+import '../../../components/sectionitem/sectionitem.scss';
+
+const AnswerSheetHtml = () => (
+    <div dangerouslySetInnerHTML={{__html: htmlContent}} /> // eslint-disable-line react/no-danger
+);
+export default AnswerSheetHtml;

src/views/teach/assessments/home.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import StaticLinkSectionItem from '../../../components/sectionitem/staticlinksectionitem.jsx';
 import LinkedSectionItem from '../../../components/sectionitem/linkedsectionitem.jsx';
 import TxDiv from '../../../components/transifex/txdiv.jsx';
 
@@ -29,11 +28,11 @@ const AssessmentsHome = () => (
             on their understanding of programming concepts.
         </LinkedSectionItem>
 
-        <StaticLinkSectionItem
+        <LinkedSectionItem
             title="Reverse-Engineering Assessment"
             format="full"
             thumbnail="/images/assessments/reverse-engineer.png"
-            linkURL="/assessments/reverse-engineer-and-labels.pdf"
+            linkURL="/assessments/reverse-engineering"
             linkText="Read more"
         >
             In this more in-depth assessment, students can build on the
@@ -42,8 +41,14 @@ const AssessmentsHome = () => (
             able to project videos on a projector. Students view a full-screen
             ScratchJr project without seeing the code for the characters&apos;
             programs. They then reconstruct the scripts of the project
-            using pre-printed blocks, provided at the end of the document...
-        </StaticLinkSectionItem>
+            using <a
+                href="/assessments/block-labels.png"
+                rel="noopener noreferrer"
+                target="_blank"
+            >
+                pre-printed blocks
+            </a>, provided at the end of the document...
+        </LinkedSectionItem>
     </TxDiv>
 );
 export default AssessmentsHome;