1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
var React = require('react');
var Col = require('react-bootstrap/Col');
var Panel = require('react-bootstrap/Panel');
var RightPanelStore = require('../stores/RightPanelStore');
var RightPanelActions = require('../actions/RightPanelActions');
var Article = React.createClass({
propTypes: {article: React.PropTypes.object.isRequired},
render: function() {
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>
);
},
});
var Feed = React.createClass({
propTypes: {feed: React.PropTypes.object.isRequired},
render: function() {
var icon = null;
if(this.props.feed.icon_url){
icon = (<img width="16px" src={this.props.feed.icon_url} />);
}
var header = (<h4>
{icon}<strong>Title:</strong> {this.props.feed.title}
</h4>);
return (<Panel collapsible defaultExpanded header={header}>
<dl className="dl-horizontal">
<dt>Description</dt>
<dd>{this.props.feed.description}</dd>
<dt>Created on</dt>
<dd>{this.props.feed.created_date}</dd>
<dt>Feed adress</dt>
<dd>
<a href={this.props.feed.link}>
{this.props.feed.link}
</a>
</dd>
<dt>Site link</dt>
<dd>
<a href={this.props.feed.site_link}>
{this.props.feed.site_link}
</a>
</dd>
<dt>Last fetched</dt>
<dd>{this.props.feed.last_retrieved}</dd>
<dt>Enabled</dt>
<dd>{this.props.feed.enabled}</dd>
</dl>
</Panel>
);
},
});
var Category = React.createClass({
propTypes: {category: React.PropTypes.object.isRequired},
render: function() {
return (<Panel header={this.props.category.name}>
test
</Panel>
);
},
});
var RightPanel = React.createClass({
getInitialState: function() {
return {category: null, feed: null, article: null, current: null};
},
getCategoryCrum: function() {
return (<li><a onClick={this.selectCategory} href="#">
{this.state.category.name}
</a></li>);
},
getFeedCrum: function() {
return (<li><a onClick={this.selectFeed} href="#">
{this.state.feed.title}
</a></li>);
},
getArticleCrum: function() {
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) {
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.current == 'category') {
var content = <Category category={this.state.category} />;
}
return (<Col id="right-panel" xsOffset={2} smOffset={2}
mdOffset={7} lgOffset={6}
xs={10} sm={10} md={5} lg={6}>
{breadcrum}
{content}
</Col>
);
},
selectCategory: function() {
this.setState({current: 'category'});
},
selectFeed: function() {
this.setState({current: 'feed'});
},
selectArticle: function() {
this.setState({current: 'article'});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
RightPanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState(RightPanelStore._datas);
},
});
module.exports = RightPanel;
|
