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 |