ceph/src/rocksdb/docs/_includes/plugins/slideshow.html

   1 <div class="slideshowBlock pluginWrapper" id="slideshow"></div>
   2 <script>
   3   var slideshowData = [
   4     {% for image in site.data.slideshow %}
   5     {
   6       id         : "{{ image.id }}",
   7       imagesrc   : "{{ image.src }}",
   8       tooltip    : "{{ image.tooltip }}",
   9       href       : "{{ image.link }}",
  10     },
  11     {% endfor %}
  12   ];
  13 </script>
  14 <script src="http://fb.me/react-with-addons-0.13.1.min.js"></script>
  15 <script type="text/javascript">
  16   var Slideshow = React.createClass({displayName: "Slideshow",
  17     getInitialState: function() {
  18       return {
  19         currentSlide: 0,
  20       };
  21     },
  22     getDefaultProps: function() {
  23       return {
  24         data: slideshowData,
  25       };
  26     },
  27     handleSelect: function(id) {
  28       var index = this.props.data.map(function (el, elIndex) {
  29         return (
  30           elIndex
  31         );
  32       });
  33       var currentIndex = index.indexOf(id);
  34       this.setState({
  35         currentSlide: currentIndex,
  36       });
  37     },
  38     render: function() {
  39       return (
  40         React.createElement("div", {className: "slideshow"},
  41           React.createElement("div", {className: "slides"},
  42             this.props.data.map(this.renderSlide)
  43           ),
  44           React.createElement("div", {className: "pagination"},
  45             this.props.data.map(this.renderPager)
  46           )
  47         )
  48       );
  49     },
  50     renderSlide: function(child, index) {
  51       var classes = React.addons.classSet({
  52         'slide': true,
  53         'slideActive': this.state.currentSlide === index,
  54       });
  55       if (child.href) {
  56         return (
  57           React.createElement("div", {key: index, className: classes},
  58             React.createElement("a", {href: child.href, alt: child.tooltip, title: child.tooltip},
  59               React.createElement("img", {src: child.imagesrc, alt: child.tooltip, title: child.tooltip})
  60             )
  61           )
  62         );
  63       }
  64       return (
  65         React.createElement("div", {key: index, className: classes},
  66           React.createElement("img", {src: child.imagesrc, alt: child.tooltip})
  67         )
  68       );
  69     },
  70     renderPager: function(child, index) {
  71       var classes = React.addons.classSet({
  72         'pager': true,
  73         'pagerActive': this.state.currentSlide === index,
  74       });
  75       return (
  76         React.createElement("span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
  77       );
  78     },
  79   });
  80
  81   function render(slideshowData) {
  82     React.render(
  83       React.createElement(Slideshow, {data: slideshowData}),
  84       document.getElementById('slideshow')
  85     );
  86   }
  87   render(slideshowData);
  88 </script>