-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
242 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| "use strict"; | ||
|
|
||
| var presentations = [{ | ||
| title: "LNUG", | ||
| subtitle: "February 2015", | ||
| youtubeId: "cQOPoDmkFg8" | ||
| }, { | ||
| title: "Container Camp", | ||
| subtitle: "September 2014", | ||
| youtubeId: "Zve7rJ1FoDU" | ||
| }]; | ||
|
|
||
| var YoutubeEmbed = React.createClass({ | ||
| displayName: "YoutubeEmbed", | ||
|
|
||
| render: function render() { | ||
| var url = "https://www.youtube.com/embed/" + this.props.id + "?modestbranding=1&autohide=1&showinfo=0&controls=1"; | ||
| return React.createElement("iframe", { src: url, frameBorder: "0", allowFullScreen: true }); | ||
| } | ||
| }); | ||
|
|
||
| var MenuItem = React.createClass({ | ||
| displayName: "MenuItem", | ||
|
|
||
| onClick: function onClick() { | ||
| this.props.onClick(this.props.item.youtubeId); | ||
| }, | ||
| render: function render() { | ||
| var classList = "clearfix p2 mxn2 mb1 rounded border"; | ||
| if (this.props.active) { | ||
| classList += " bg-white-translucent border-white"; | ||
| } else { | ||
| classList += " border-transparent"; | ||
| } | ||
| return React.createElement( | ||
| "div", | ||
| { className: classList, onClick: this.onClick }, | ||
| React.createElement( | ||
| "div", | ||
| { className: "left mr2" }, | ||
| React.createElement(YoutubeThumbnail, { id: this.props.item.youtubeId }) | ||
| ), | ||
| React.createElement( | ||
| "div", | ||
| { className: "overflow-hidden" }, | ||
| React.createElement( | ||
| "p", | ||
| { className: "bold mb0" }, | ||
| this.props.item.title | ||
| ), | ||
| React.createElement( | ||
| "p", | ||
| { className: "mb0" }, | ||
| this.props.item.subtitle | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| var YoutubeThumbnail = React.createClass({ | ||
| displayName: "YoutubeThumbnail", | ||
|
|
||
| render: function render() { | ||
| var url = "http://img.youtube.com/vi/" + this.props.id + "/0.jpg"; | ||
| return React.createElement("img", { src: url, alt: "", width: "75", className: "block rounded" }); | ||
| } | ||
| }); | ||
|
|
||
| var Tabs = React.createClass({ | ||
| displayName: "Tabs", | ||
|
|
||
| getInitialState: function getInitialState() { | ||
| return { active: this.props.data[0].youtubeId }; | ||
| }, | ||
| setActive: function setActive(id) { | ||
| this.setState({ active: id }); | ||
| }, | ||
| menuItems: function menuItems() { | ||
| var _this = this; | ||
|
|
||
| return this.props.data.map(function (p, i) { | ||
| var active = _this.state.active === p.youtubeId; | ||
| return React.createElement(MenuItem, { item: p, active: active, key: i, onClick: _this.setActive }); | ||
| }); | ||
| }, | ||
| render: function render() { | ||
| return React.createElement( | ||
| "div", | ||
| { className: "clearfix mt4" }, | ||
| React.createElement( | ||
| "div", | ||
| { className: "sm-col sm-col-4" }, | ||
| React.createElement( | ||
| "h2", | ||
| { className: "h1 mt0 mb3" }, | ||
| "Presentations & screencasts" | ||
| ), | ||
| this.menuItems() | ||
| ), | ||
| React.createElement( | ||
| "div", | ||
| { className: "sm-col sm-col-8" }, | ||
| React.createElement( | ||
| "div", | ||
| { className: "media-16-by-9 shadow rounded bg-white-translucent" }, | ||
| React.createElement(YoutubeEmbed, { id: this.state.active }) | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| React.render(React.createElement(Tabs, { data: presentations }), document.getElementById("react-base")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| const presentations = [ | ||
| { | ||
| title: 'LNUG', | ||
| subtitle: 'February 2015', | ||
| youtubeId: 'cQOPoDmkFg8' | ||
| }, | ||
| { | ||
| title: 'Container Camp', | ||
| subtitle: 'September 2014', | ||
| youtubeId: 'Zve7rJ1FoDU' | ||
| } | ||
| ]; | ||
|
|
||
| const YoutubeEmbed = React.createClass({ | ||
| render() { | ||
| const url = `https://www.youtube.com/embed/${this.props.id}?modestbranding=1&autohide=1&showinfo=0&controls=1` | ||
| return ( | ||
| <iframe src={url} frameBorder="0" allowFullScreen></iframe> | ||
| ) | ||
| } | ||
| }); | ||
|
|
||
| const MenuItem = React.createClass({ | ||
| onClick() { | ||
| this.props.onClick(this.props.item.youtubeId); | ||
| }, | ||
| render() { | ||
| var classList = 'clearfix p2 mxn2 mb1 rounded border' | ||
| if (this.props.active) { | ||
| classList += ' bg-white-translucent border-white'; | ||
| } else { | ||
| classList += ' border-transparent' | ||
| } | ||
| return ( | ||
| <div className={classList} onClick={this.onClick}> | ||
| <div className="left mr2"> | ||
| <YoutubeThumbnail id={this.props.item.youtubeId}/> | ||
| </div> | ||
| <div className="overflow-hidden"> | ||
| <p className="bold mb0">{this.props.item.title}</p> | ||
| <p className="mb0">{this.props.item.subtitle}</p> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| }); | ||
|
|
||
| const YoutubeThumbnail = React.createClass({ | ||
| render() { | ||
| const url = `http://img.youtube.com/vi/${this.props.id}/0.jpg`; | ||
| return ( | ||
| <img src={url} alt="" width="75" className="block rounded" /> | ||
| ) | ||
| } | ||
| }); | ||
|
|
||
| const Tabs = React.createClass({ | ||
| getInitialState() { | ||
| return { active: this.props.data[0].youtubeId } | ||
| }, | ||
| setActive(id) { | ||
| this.setState({ active: id }) | ||
| }, | ||
| menuItems() { | ||
| return this.props.data.map((p, i) => { | ||
| const active = (this.state.active === p.youtubeId); | ||
| return <MenuItem item={p} active={active} key={i} onClick={this.setActive} /> | ||
| }) | ||
| }, | ||
| render() { | ||
| return ( | ||
| <div className="clearfix mt4"> | ||
| <div className="sm-col sm-col-4"> | ||
| <h2 className="h1 mt0 mb3">Presentations & screencasts</h2> | ||
| {this.menuItems()} | ||
| </div> | ||
| <div className="sm-col sm-col-8"> | ||
| <div className="media-16-by-9 shadow rounded bg-white-translucent"> | ||
| <YoutubeEmbed id={this.state.active} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| }); | ||
|
|
||
| React.render(<Tabs data={presentations} />, document.getElementById('react-base')) |