scroll page example

index.html

@@ -7,21 +7,13 @@
     <meta name="viewport" content="width=device-width" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
-    <!-- We include jQuery only for the Parse SDK and Bootstrap; it's not needed for React. -->
-    <!-- <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> -->
-    <script type="text/javascript" src="thirdparty/jquery.js"></script>
-
     <!-- Hamburger icons -->
-    <!-- <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> -->
-    <link href="thirdparty/font-awesome/css/font-awesome.css" rel="stylesheet" />
+    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
 
     <!-- Zynga Scroller -->
-    <!-- <script type="text/javascript" src="http://zynga.github.io/scroller/src/Raf.js"></script> -->
-    <!-- <script type="text/javascript" src="http://zynga.github.io/scroller/src/Animate.js"></script> -->
-    <!-- <script type="text/javascript" src="http://zynga.github.io/scroller/src/Scroller.js"></script> -->
-    <script type="text/javascript" src="thirdparty/Raf.js"></script>
-    <script type="text/javascript" src="thirdparty/Animate.js"></script>
-    <script type="text/javascript" src="thirdparty/Scroller.js"></script>
+    <script type="text/javascript" src="http://zynga.github.io/scroller/src/Raf.js"></script>
+    <script type="text/javascript" src="http://zynga.github.io/scroller/src/Animate.js"></script>
+    <script type="text/javascript" src="http://zynga.github.io/scroller/src/Scroller.js"></script>
 
     <!-- Stats.js -->
     <script type="text/javascript" src="thirdparty/stats.min.js"></script>

src/framework/interactions/leftnav/LeftNavContainer.js

@@ -142,18 +142,6 @@ var LeftNavContainer = React.createClass({
     return this.transferPropsTo(
       <div>
         {side}
-        <AnimatableContainer
-          style={topStyle}
-          translate={behavior.top.translate(this.props.sideWidth, this.state.scrollLeft)}
-          rotate={behavior.top.rotate(this.props.sideWidth, this.state.scrollLeft)}
-          opacity={behavior.top.opacity(this.props.sideWidth, this.state.scrollLeft)}>
-          <TouchableArea
-            onTouchTap={this._handleTap}
-            scroller={this.scroller}>
-            {this.props.button}
-          </TouchableArea>
-          {this.props.topContent}
-        </AnimatableContainer>
         <AnimatableContainer
           style={contentStyle}
           translate={behavior.content.translate(this.props.sideWidth, this.state.scrollLeft)}
@@ -167,6 +155,18 @@ var LeftNavContainer = React.createClass({
             {this.props.children}
           </TouchableArea>
         </AnimatableContainer>
+        <AnimatableContainer
+          style={topStyle}
+          translate={behavior.top.translate(this.props.sideWidth, this.state.scrollLeft)}
+          rotate={behavior.top.rotate(this.props.sideWidth, this.state.scrollLeft)}
+          opacity={behavior.top.opacity(this.props.sideWidth, this.state.scrollLeft)}>
+          <TouchableArea
+            onTouchTap={this._handleTap}
+            scroller={this.scroller}>
+            {this.props.button}
+          </TouchableArea>
+          {this.props.topContent}
+        </AnimatableContainer>
       </div>
     );
   }

src/layout/Layout.js

@@ -21,7 +21,7 @@ var Layout = React.createClass({
 
   render: function() {
     var button = (
-      <div className="Layout-hamburger fa fa-bars">{'='}</div>
+      <div className="Layout-hamburger fa fa-bars" />
     );
 
     var topContent = (
@@ -31,6 +31,7 @@ var Layout = React.createClass({
     var sideContent = (
       <div className="Layout-nav">
         <RoutedLink href="/home" className="Layout-navLink" onClick={this.handleNavClick}>Home</RoutedLink>
+        <RoutedLink href="/scroll" className="Layout-navLink" onClick={this.handleNavClick}>Simple scroll</RoutedLink>
         <RoutedLink href="/glass" className="Layout-navLink" onClick={this.handleNavClick}>Frosted glass</RoutedLink>
         <RoutedLink href="/viewer" className="Layout-lastNavLink" onClick={this.handleNavClick}>Photo gallery</RoutedLink>
       </div>

src/main.js

@@ -1,5 +1,4 @@
 var React = require('React');
-var ReactHack = require('ReactHack');
 var ReactTouch = require('./framework/ReactTouch');
 var FPSCounter = require('./framework/environment/FPSCounter');
 
@@ -9,6 +8,7 @@ FPSCounter.start();
 ReactTouch.start(RootPage, document.getElementById('react-root'), {
   '/home': 'home',
   '/glass': 'glass',
+  '/scroll': 'scroll',
   '/viewer': 'viewer',
   '/': 'home'
 });

src/pages/RootPage.js

@@ -6,6 +6,7 @@ var Layout = require('../layout/Layout');
 var HomePage = require('../pages/HomePage');
 var GlassPage = require('../pages/GlassPage');
 var Message = require('../components/Message');
+var ScrollPage = require('../pages/ScrollPage');
 var ViewerPage = require('../pages/ViewerPage');
 
 var isIPhone5 = require('../environment/isIPhone5');
@@ -37,9 +38,11 @@ var RootPage = React.createClass({
     if (routeName === '' || routeName === 'home') {
       return <Layout className="HomePage" route="home"><HomePage /></Layout>;
     } else if (routeName === 'glass') {
-      return <Layout route="glass"><GlassPage /></Layout>;
+      return <Layout><GlassPage /></Layout>;
     } else if (routeName === 'viewer') {
-      return <Layout route="viewer"><ViewerPage /></Layout>;
+      return <Layout><ViewerPage /></Layout>;
+    } else if (routeName === 'scroll') {
+      return <Layout><ScrollPage /></Layout>;
     } else {
       return <h1>Route not found</h1>;
     }

src/pages/ScrollPage.css

@@ -0,0 +1,9 @@
+.ScrollPage {
+  background: white;
+  height: 100%;
+  width: 100%;
+}
+
+.ScrollPage-content {
+  padding: 10px;
+}

src/pages/ScrollPage.js

@@ -1,3 +1,26 @@
+/** @jsx React.DOM */
+
+var React = require('React');
+
 var SimpleScroller =
   require('../framework/interactions/simplescroller/SimpleScroller');
 
+require('./ScrollPage.css');
+
+var ScrollPage = React.createClass({
+  render: function() {
+    var content = [];
+
+    for (var i = 0; i < 100; i++) {
+      content.push(<p key={i}>Item {i}</p>);
+    }
+
+    return (
+      <SimpleScroller className="ScrollPage" options={{scrollingX: false}}>
+        <div className="ScrollPage-content">{content}</div>
+      </SimpleScroller>
+    );
+  }
+});
+
+module.exports = ScrollPage;