aboutsummaryrefslogtreecommitdiff
path: root/src/web/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/web/js')
-rw-r--r--src/web/js/actions/RightPanelActions.js19
-rw-r--r--src/web/js/components/MiddlePanel.react.js12
-rw-r--r--src/web/js/components/RightPanel.react.js64
-rw-r--r--src/web/js/constants/JarrConstants.js2
-rw-r--r--src/web/js/stores/RightPanelStore.js10
5 files changed, 74 insertions, 33 deletions
diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js
index 7a7b935a..6831f9b8 100644
--- a/src/web/js/actions/RightPanelActions.js
+++ b/src/web/js/actions/RightPanelActions.js
@@ -5,15 +5,16 @@ var RightPanelStore = require('../stores/RightPanelStore');
var RightPanelActions = {
- load: function(obj_type, obj_id) {
- filters = MiddlePanelStore.getRequestFilter();
- jquery.getJSON('api/v2.0/' + obj_type + '/' + obj_id, function(payload) {
- _last_fetched_with = filters;
- JarrDispatcher.dispatch({
- type: ActionTypes.LOAD_RIGHT_PANEL,
- articles: payload.articles,
- });
- });
+ loadArticle: function(article_id) {
+ jquery.getJSON('/getart/' + article_id,
+ function(payload) {
+ JarrDispatcher.dispatch({
+ type: ActionTypes.LOAD_ARTICLE,
+ article: payload,
+ });
+ }
+ );
+
},
};
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index a46d7346..199316e6 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -6,6 +6,7 @@ var Glyphicon = require('react-bootstrap/Glyphicon');
var MiddlePanelStore = require('../stores/MiddlePanelStore');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
+var RightPanelActions = require('../actions/RightPanelActions');
var TableLine = React.createClass({
propTypes: {article_id: React.PropTypes.number.isRequired,
@@ -34,23 +35,28 @@ var TableLine = React.createClass({
onClick={this.toogleRead} />);
var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
onClick={this.toogleLike} />);
- return (<div className="list-group-item">
+ return (<div className="list-group-item" onClick={this.loadArticle}>
<h5><strong>{title}</strong></h5><div />
<div>{read} {liked} {this.props.title}</div>
</div>
);
},
- toogleRead: function() {
+ toogleRead: function(evnt) {
this.setState({read: !this.state.read}, function() {
MiddlePanelActions.changeRead(this.props.category_id,
this.props.feed_id, this.props.article_id, this.state.read);
}.bind(this));
+ evnt.stopPropagation();
},
- toogleLike: function() {
+ toogleLike: function(evnt) {
this.setState({liked: !this.state.liked}, function() {
MiddlePanelActions.changeLike(this.props.category_id,
this.props.feed_id, this.props.article_id, this.state.liked);
}.bind(this));
+ evnt.stopPropagation();
+ },
+ loadArticle: function() {
+ RightPanelActions.loadArticle(this.props.article_id);
},
});
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);
diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js
index ca5eacc7..4a673cf8 100644
--- a/src/web/js/constants/JarrConstants.js
+++ b/src/web/js/constants/JarrConstants.js
@@ -18,5 +18,5 @@ module.exports = keyMirror({
CHANGE_ATTR: null,
RELOAD_MIDDLE_PANEL: null,
MIDDLE_PANEL_FILTER: null,
- LOAD_RIGHT_PANEL: null,
+ LOAD_ARTICLE: null,
});
diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js
index f08be009..68d3b7e9 100644
--- a/src/web/js/stores/RightPanelStore.js
+++ b/src/web/js/stores/RightPanelStore.js
@@ -26,19 +26,29 @@ var RightPanelStore = assign({}, EventEmitter.prototype, {
RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) {
switch(action.type) {
case ActionTypes.PARENT_FILTER:
+ RightPanelStore._datas.article = null;
if(action.filter_id == null) {
RightPanelStore._datas.category = null;
RightPanelStore._datas.feed = null;
} else if(action.filter_type == 'category_id') {
RightPanelStore._datas.category = MenuStore._datas.categories[action.filter_id];
RightPanelStore._datas.feed = null;
+ RightPanelStore._datas.current = 'category';
} else {
RightPanelStore._datas.feed = MenuStore._datas.feeds[action.filter_id];
RightPanelStore._datas.category = MenuStore._datas.categories[RightPanelStore._datas.feed.category_id];
+ RightPanelStore._datas.current = 'feed';
}
RightPanelStore.emitChange();
break;
+ case ActionTypes.LOAD_ARTICLE:
+ RightPanelStore._datas.feed = MenuStore._datas.feeds[action.article.feed_id];
+ RightPanelStore._datas.category = MenuStore._datas.categories[action.article.category_id];
+ RightPanelStore._datas.article = action.article;
+ RightPanelStore._datas.current = 'article';
+ RightPanelStore.emitChange();
+ break;
default:
// pass
}
bgstack15