### The Demo:

### The Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | `var` `Rd = ReactDatum` `var` `ReactTilegrid = Tilegrid.ReactTilegrid` `// This is the source for the left-right iframe viewer used to` `// view examples on our github.io pages like http://zulily.github.io/react-datum/docs/examples` `//` `// this file is created by bumble-docs if it doesn't exist in the docs/examples dir` `// EXAMPLES_METADATA is loaded by the index.html from ./examplesMetadata.js which is generated` `// by bumble-docs/scripts/buildExamples.coffee` `var` `examplesCollection =` `new` `Backbone.Collection(EXAMPLES_METADATA.demos)` `// Each of the demos are wrapped in their own .html which is generated using /src/docs/exampleFile.tpl` `// It makes each of them individually debuggable.` `var` `DemoIframe = React.createClass({` `` `propTypes: {` `` `model: React.PropTypes.instanceOf(Backbone.Model)` `` `},` `` `contextTypes: {` `` `model: React.PropTypes.instanceOf(Backbone.Model)` `` `},` `` `render:` `function``() {` `` `var` `model =` `this``.getModel()` `` `var` `srcPath = model.get('path``')` `` `var htmlPath = srcPath.replace(/(.*)(\.jsx|\.js|\.coffee|\.cjsx)/, "$1.html")` `` `return <iframe src={htmlPath}/>` `` `},` `` `` `getModel: function() {` `` `return this.props.model || this.context.model` `` `},` `})` `var ExamplesView = React.createClass({` `` `render: function() {` `` `return (` `` `<div id="examplesView">` `` `<Rd.Collection collection={examplesCollection}>` `` `<ReactTilegrid>` `` `<Rd.LazyPhoto attr="thumbnailUrl"/>` `` `<h4><Rd.Text attr="name"/></h4>` `` `<div><Rd.Text attr="description" ellipsizeAt={false} displayAsHtml/></div>` `` `</ReactTilegrid>` `` `<div className="content-pane">` `` `<Rd.SelectedModel placeholder="Select a demo from the list on the left">` `` `<DemoIframe/>` `` `</Rd.SelectedModel>` `` `</div>` `` `</Rd.Collection>` `` `</div>` `` `)` `` `},` `` `componentDidMount: function() {` `` `if( window && window.location && window.location.hash ){` `` `var idToSelect = window.location.hash.slice(1)` `` `_.delay(function(){examplesCollection.selectModelById(idToSelect)}, 1000)` `` `}` `` `examplesCollection.on('``selectionsChanged',` `function``(){` `` `var` `model = examplesCollection.getSelectedModels()[0]` `` `window.location.hash = model && model.id ||` `""` `` `})` `` `}` `` `})` `if``( window )` `` `window.Demo = ExamplesView` `else` `if` `( module )` `` `module.exports = ExamplesView`