]>
Commit | Line | Data |
---|---|---|
7c673cae FG |
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> |