aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components/RightPanel.react.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/js/components/RightPanel.react.js')
-rw-r--r--src/web/js/components/RightPanel.react.js64
1 files changed, 44 insertions, 20 deletions
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 00e2dd54..328bc6b1 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -7,7 +7,17 @@ var RightPanelActions = require('../actions/RightPanelActions');
var Article = React.createClass({
propTypes: {article: React.PropTypes.object.isRequired},
render: function() {
- return (<div />);
+ var icon = null;
+ if(this.props.article.icon_url){
+ icon = (<img width="16px" src={this.props.article.icon_url} />);
+ }
+ var header = (<h4>
+ {icon}<strong>Title:</strong> {this.props.article.title}
+ </h4>);
+ return (<Panel header={header}>
+ <div dangerouslySetInnerHTML={{__html: this.props.article.content}} />
+ </Panel>
+ );
},
});
@@ -61,7 +71,7 @@ var Category = React.createClass({
var RightPanel = React.createClass({
getInitialState: function() {
- return {category: null, feed: null, article: null};
+ return {category: null, feed: null, article: null, current: null};
},
getCategoryCrum: function() {
return (<li><a onClick={this.selectCategory} href="#">
@@ -74,28 +84,39 @@ var RightPanel = React.createClass({
</a></li>);
},
getArticleCrum: function() {
- return <li>Article</li>;
+ return <li>{this.state.article.title}</li>;
},
render: function() {
var content = null;
+ var brd_category = null;
+ var brd_feed = null;
+ var brd_article = null;
var breadcrum = null;
+ if(this.state.category) {
+ brd_category = (<li><a onClick={this.selectCategory} href="#">
+ {this.state.category.name}
+ </a></li>);
+ }
+ if(this.state.feed) {
+ brd_feed = (<li><a onClick={this.selectFeed} href="#">
+ {this.state.feed.title}
+ </a></li>);
+ }
if(this.state.article) {
- var breadcrum = (<ol className="breadcrumb">
- {this.getCategoryCrum()}
- {this.getFeedCrum()}
- {this.getArticleCrum()}
- </ol>);
- var content = <Article />;
- } else if(this.state.feed) {
- var breadcrum = (<ol className="breadcrumb">
- {this.getCategoryCrum()}
- {this.getFeedCrum()}
- </ol>);
+ brd_article = <li>{this.state.article.title}</li>;
+ }
+ if(brd_category || brd_feed || brd_article) {
+ breadcrum = (<ol className="breadcrumb">
+ {brd_category}
+ {brd_feed}
+ {brd_article}
+ </ol>);
+ }
+ if(this.state.current == 'article') {
+ var content = <Article article={this.state.article} />;
+ } else if(this.state.current == 'feed') {
var content = <Feed feed={this.state.feed} />;
- } else if(this.state.category) {
- var breadcrum = (<ol className="breadcrumb">
- {this.getCategoryCrum()}
- </ol>);
+ } else if(this.state.current == 'category') {
var content = <Category category={this.state.category} />;
}
@@ -108,10 +129,13 @@ var RightPanel = React.createClass({
);
},
selectCategory: function() {
- this.setState({feed: null, article: null});
+ this.setState({current: 'category'});
},
selectFeed: function() {
- this.setState({article: null});
+ this.setState({current: 'feed'});
+ },
+ selectArticle: function() {
+ this.setState({current: 'article'});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
bgstack15