jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
189 lines (184 loc) • 8.37 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';
import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
import JqxExpander from '../../../jqwidgets-react/react_jqxexpander.js';
import JqxListBox from '../../../jqwidgets-react/react_jqxlistbox.js';
import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
config:
{
feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
currentFeedContent: {}
}
};
}
componentDidMount () {
this.refs.mainSplitter.expand();
let firstItem = this.refs.myTree.getItems()[0].element;
this.refs.myTree.expandItem(firstItem);
this.refs.myTree.on('select', (event) => {
let item = this.refs.myTree.getItem(event.args.element);
if(this.state.config['feeds'][item.label] !== undefined) {
this.getFeed(this.state.config['feeds'][item.label]);
}
});
this.refs.myListBox.on('select', (event) => {
this.loadContent(event.args.index);
});
this.getFeed('sciencedaily');
}
getFeed (feed) {
feed = 'data/' + feed + '.txt';
this.loadFeed(feed);
};
loadFeed (feed, callback) {
$.jqx.data.ajax({
'dataType': 'json',
'url': feed,
success: (data) => {
let channel = data.rss.channel;
this.setState({ config:
{
feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
currentFeedContent: channel.item
}
});
this.displayFeedList(this.state.config.currentFeedContent);
this.displayFeedHeader(channel.title);
this.selectFirst();
},
error: (msg) => {
}
});
};
displayFeedList (items) {
let headers = this.getHeaders(items);
this.refs.myListBox.source(headers);
};
displayFeedHeader (header) {
this.refs.feedListExpander.setHeaderContent(header);
};
selectFirst () {
this.refs.myListBox.selectIndex(0);
this.loadContent(0);
};
loadContent (index) {
let item = this.state.config.currentFeedContent[index];
if (item != null) {
this.refs.myPanel.clearcontent();
this.refs.myPanel.prepend('<div style="padding: 1px;"><span>' + item.description + '</span></div>');
this.addContentHeaderData(item);
}
};
getHeaders (items) {
let headers = [], header;
for (let i = 0; i < items.length; i += 1) {
header = items[i].title;
headers.push(header);
}
return headers;
};
addContentHeaderData (item) {
let link = document.createElement('a');
link.style.whiteSpace = 'nowrap';
link.style.marginLeft = '15px';
link.target = '_blank';
let text = document.createTextNode('Source');
link.appendChild(text);
let date = document.createElement('div');
date.style.whiteSpace = 'nowrap';
date.style.marginLeft = '30px';
date.appendChild(document.createTextNode(item.pubDate));
let container = document.createElement('table');
container.style.height = '100%';
let element1 = document.createElement('tr');
container.appendChild(element1);
container.appendChild(document.createElement('td'));
container.appendChild(document.createElement('td'));
link.href = item.link;
document.getElementById('feedItemHeader').innerHTML = null;
document.getElementById('feedItemHeader').appendChild(container);
container.getElementsByTagName('td')[0].appendChild(link);
container.querySelector('td:last-child').appendChild(date);
this.refs.feedListExpander.setHeaderContent(container.outerHTML);
};
render () {
return (
<JqxSplitter ref='mainSplitter'
width={850} height={600}
panels={[{ size: 200, min: 100 }, {min: 200, size: 400}]}
>
<JqxExpander style={{ border: 'none'}}
width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
>
<div className="jqx-hideborder">
Feeds
</div>
<div className="jqx-hideborder jqx-hidescrollbars">
<JqxTree ref='myTree' width={'100%'} height={'100%'}>
<ul>
<li id="t1">
<img src='../../../images/contactsIcon.png' /><span>News and Blogs</span>
<ul>
<li>
<img src='../../../images/favorites.png' /><span>Favorites</span>
<ul>
<li>
<img src='../../../images/folder.png' /><span>ScienceDaily</span>
</li>
</ul>
</li>
<li>
<img src='../../../images/folder.png' /><span>Geek.com</span>
</li>
<li>
<img src='../../../images/folder.png' /><span>CNN.com</span>
</li>
</ul>
</li>
</ul>
</JqxTree>
</div>
</JqxExpander>
<div>
<JqxSplitter
width={850} height={600} orientation={'horizontal'}
panels={[{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}]}
>
<div className="feed-item-list-container" id="feedUpperPanel">
<JqxExpander ref='feedListExpander' className="jqx-hideborder"
width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
>
<div className="jqx-hideborder" id="feedHeader">
</div>
<div className="jqx-hideborder jqx-hidescrollbars">
<JqxListBox ref='myListBox' width={'100%'} height={'100%'} source={['1']} className="jqx-hideborder">
</JqxListBox>
</div>
</JqxExpander>
</div>
<div id="feedContentArea">
<JqxExpander className="jqx-hideborder"
width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
>
<div className="jqx-hideborder" id="feedItemHeader">
</div>
<div className="jqx-hideborder jqx-hidescrollbars">
<JqxPanel ref='myPanel' width={'100%'} height={'100%'} className="jqx-hideborder">
Select a news item to see it's content
</JqxPanel>
</div>
</JqxExpander>
</div>
</JqxSplitter>
</div>
</JqxSplitter>
)
}
}
//Render our App Component to the desirable element
ReactDOM.render(<App />, document.getElementById('app'));