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 |