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