Adds support for horizontal list (carousel) and example

examples/carousel/app.js

@@ -0,0 +1,72 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+var Page = require('./components/Page');
+var articles = require('../common/data');
+
+var Surface = ReactCanvas.Surface;
+var Carousel = ReactCanvas.Carousel;
+
+var App = React.createClass({
+
+  render: function () {
+    var size = this.getSize();
+    return (
+      <Surface top={0} left={0} width={size.width} height={size.height}>
+        <Carousel
+          style={this.getListViewStyle()}
+          snapping={true}
+          scrollingDeceleration={0.92}
+          scrollingPenetrationAcceleration={0.13}
+          numberOfItemsGetter={this.getNumberOfPages}
+          itemWidthGetter={this.getPageWidth}
+          itemGetter={this.renderPage} />
+      </Surface>
+    );
+  },
+
+  renderPage: function (pageIndex, scrollLeft) {
+    var size = this.getSize();
+    var article = articles[pageIndex % articles.length];
+    var pageScrollLeft = pageIndex * this.getPageWidth() - scrollLeft;
+    return (
+      <Page
+        width={size.width}
+        height={size.height}
+        article={article}
+        pageIndex={pageIndex}
+        scrollLeft={pageScrollLeft} />
+    );
+  },
+
+  getSize: function () {
+    return document.getElementById('main').getBoundingClientRect();
+  },
+
+  // ListView
+  // ========
+
+  getListViewStyle: function () {
+    var size = this.getSize();
+    return {
+      top: 0,
+      left: 0,
+      width: size.width,
+      height: size.height
+    };
+  },
+
+  getNumberOfPages: function () {
+    return 1000;
+  },
+
+  getPageWidth: function () {
+    return this.getSize().width;
+  }
+
+});
+
+React.render(<App />, document.getElementById('main'));

examples/carousel/components/Page.js

@@ -0,0 +1,131 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+
+var Group = ReactCanvas.Group;
+var Image = ReactCanvas.Image;
+var Text = ReactCanvas.Text;
+var FontFace = ReactCanvas.FontFace;
+var measureText = ReactCanvas.measureText;
+
+var CONTENT_INSET = 14;
+var TEXT_SCROLL_SPEED_MULTIPLIER = 0.6;
+var TEXT_ALPHA_SPEED_OUT_MULTIPLIER = 1.25;
+var TEXT_ALPHA_SPEED_IN_MULTIPLIER = 2.6;
+var IMAGE_LAYER_INDEX = 2;
+var TEXT_LAYER_INDEX = 1;
+
+var Page = React.createClass({
+
+  propTypes: {
+    width: React.PropTypes.number.isRequired,
+    height: React.PropTypes.number.isRequired,
+    article: React.PropTypes.object.isRequired,
+    scrollLeft: React.PropTypes.number.isRequired
+  },
+
+  componentWillMount: function () {
+    // Pre-compute headline/excerpt text dimensions.
+    var article = this.props.article;
+    var maxWidth = this.props.width - 2 * CONTENT_INSET;
+    var titleStyle = this.getTitleStyle();
+    var excerptStyle = this.getExcerptStyle();
+    this.titleMetrics = measureText(article.title, maxWidth, titleStyle.fontFace, titleStyle.fontSize, titleStyle.lineHeight);
+    this.excerptMetrics = measureText(article.excerpt, maxWidth, excerptStyle.fontFace, excerptStyle.fontSize, excerptStyle.lineHeight);
+  },
+
+  render: function () {
+    var groupStyle = this.getGroupStyle();
+    var imageStyle = this.getImageStyle();
+    var titleStyle = this.getTitleStyle();
+    var excerptStyle = this.getExcerptStyle();
+
+    // Layout title and excerpt below image.
+    titleStyle.height = this.titleMetrics.height;
+    excerptStyle.top = titleStyle.top + titleStyle.height + CONTENT_INSET;
+    excerptStyle.height = this.props.height - excerptStyle.top - CONTENT_INSET;
+
+    return (
+      <Group style={groupStyle}>
+        <Image style={imageStyle} src={this.props.article.imageUrl} fadeIn={true} useBackingStore={true} />
+        <Group style={this.getTextGroupStyle()} useBackingStore={true}>
+          <Text style={titleStyle}>{this.props.article.title}</Text>
+          <Text style={excerptStyle}>{this.props.article.excerpt}</Text>
+        </Group>
+      </Group>
+    );
+  },
+
+  // Styles
+  // ======
+
+  getGroupStyle: function () {
+    return {
+      top: 0,
+      left: 0,
+      width: this.props.width,
+      height: this.props.height,
+    };
+  },
+
+  getImageHeight: function () {
+    return Math.round(this.props.height * 0.5);
+  },
+
+  getImageStyle: function () {
+    return {
+      top: 0,
+      left: 0,
+      width: this.props.width,
+      height: this.getImageHeight(),
+      backgroundColor: '#eee',
+      zIndex: IMAGE_LAYER_INDEX
+    };
+  },
+
+  getTitleStyle: function () {
+    return {
+      top: this.getImageHeight() + CONTENT_INSET,
+      left: CONTENT_INSET,
+      width: this.props.width - 2 * CONTENT_INSET,
+      fontSize: 20,
+      lineHeight: 30,
+      fontFace: FontFace('Avenir Next Condensed, Helvetica, sans-serif', null, {weight: 500})
+    };
+  },
+
+  getExcerptStyle: function () {
+    return {
+      left: CONTENT_INSET,
+      width: this.props.width - 2 * CONTENT_INSET,
+      fontFace: FontFace('Georgia, serif'),
+      fontSize: 12,
+      lineHeight: 23
+    };
+  },
+
+  getTextGroupStyle: function () {
+    var imageHeight = this.getImageHeight();
+    var translateX = 0;
+    var alphaMultiplier = (this.props.scrollLeft <= 0) ? -TEXT_ALPHA_SPEED_OUT_MULTIPLIER : TEXT_ALPHA_SPEED_IN_MULTIPLIER;
+    var alpha = 1 - (this.props.scrollLeft / this.props.width) * alphaMultiplier;
+    alpha = Math.min(Math.max(alpha, 0), 1);
+    translateX = -this.props.scrollLeft * TEXT_SCROLL_SPEED_MULTIPLIER;
+
+    return {
+      width: this.props.width,
+      height: this.props.height - imageHeight,
+      top: imageHeight,
+      left: 0,
+      alpha: alpha,
+      translateX: translateX,
+      zIndex: TEXT_LAYER_INDEX
+    };
+  }
+
+});
+
+module.exports = Page;

examples/carousel/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>ReactCanvas: Timeline</title>
+  <link rel="stylesheet" type="text/css" href="/examples/common/examples.css">
+  <script src="/examples/common/touch-emulator.js"></script>
+  <script type="text/javascript">
+    TouchEmulator();
+  </script>
+</head>
+<body>
+  <div id="main"></div>
+  <script src="/build/carousel.js"></script>
+</body>
+</html>