TEXT   15

app.txt

Guest on 16th August 2021 06:18:44 PM

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';
  5. import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
  6. import JqxExpander from '../../../jqwidgets-react/react_jqxexpander.js';
  7. import JqxListBox from '../../../jqwidgets-react/react_jqxlistbox.js';
  8. import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';
  9.  
  10. class App extends React.Component {
  11.     constructor(props) {
  12.       super(props);
  13.       this.state = {
  14.         config:
  15.         {
  16.             feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
  17.             currentFeedContent: {}
  18.         }
  19.       };
  20.     }
  21.     componentDidMount () {
  22.       this.refs.mainSplitter.expand();
  23.       let firstItem = this.refs.myTree.getItems()[0].element;
  24.       this.refs.myTree.expandItem(firstItem);
  25.       this.refs.myTree.on('select', (event) => {
  26.         let item = this.refs.myTree.getItem(event.args.element);
  27.         if(this.state.config['feeds'][item.label] !== undefined) {
  28.           this.getFeed(this.state.config['feeds'][item.label]);
  29.         }
  30.       });
  31.       this.refs.myListBox.on('select', (event) => {
  32.           this.loadContent(event.args.index);
  33.       });
  34.       this.getFeed('sciencedaily');
  35.     }
  36.     getFeed (feed) {
  37.       feed = 'data/' + feed + '.txt';
  38.       this.loadFeed(feed);
  39.     };
  40.     loadFeed (feed, callback) {
  41.         $.jqx.data.ajax({
  42.             'dataType': 'json',
  43.             'url': feed,
  44.             success: (data) => {
  45.                 let channel = data.rss.channel;
  46.                 this.setState({ config:
  47.                   {
  48.                       feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
  49.                       currentFeedContent: channel.item
  50.                   }
  51.                 });
  52.                 this.displayFeedList(this.state.config.currentFeedContent);
  53.                 this.displayFeedHeader(channel.title);
  54.                 this.selectFirst();
  55.             },
  56.             error: (msg) => {
  57.             }
  58.         });
  59.     };
  60.     displayFeedList (items) {
  61.         let headers = this.getHeaders(items);
  62.         this.refs.myListBox.source(headers);
  63.     };
  64.     displayFeedHeader (header) {
  65.         this.refs.feedListExpander.setHeaderContent(header);
  66.     };
  67.     selectFirst () {
  68.         this.refs.myListBox.selectIndex(0);
  69.         this.loadContent(0);
  70.     };
  71.     loadContent (index) {
  72.         let item = this.state.config.currentFeedContent[index];
  73.         if (item != null) {
  74.           this.refs.myPanel.clearcontent();
  75.           this.refs.myPanel.prepend('<div style="padding: 1px;"><span>' + item.description + '</span></div>');
  76.           this.addContentHeaderData(item);
  77.         }
  78.     };
  79.     getHeaders (items) {
  80.         let headers = [], header;
  81.         for (let i = 0; i < items.length; i += 1) {
  82.             header = items[i].title;
  83.             headers.push(header);
  84.         }
  85.         return headers;
  86.     };
  87.     addContentHeaderData (item) {
  88.       let link = document.createElement('a');
  89.       link.style.whiteSpace = 'nowrap';
  90.       link.style.marginLeft = '15px';
  91.       link.target = '_blank';
  92.       let text = document.createTextNode('Source');
  93.       link.appendChild(text);
  94.       let date = document.createElement('div');
  95.       date.style.whiteSpace = 'nowrap';
  96.       date.style.marginLeft = '30px';
  97.       date.appendChild(document.createTextNode(item.pubDate));
  98.       let container = document.createElement('table');
  99.       container.style.height = '100%';
  100.       let element1 = document.createElement('tr');
  101.       container.appendChild(element1);
  102.       container.appendChild(document.createElement('td'));
  103.       container.appendChild(document.createElement('td'));
  104.       link.href = item.link;
  105.       document.getElementById('feedItemHeader').innerHTML = null;
  106.       document.getElementById('feedItemHeader').appendChild(container);
  107.       container.getElementsByTagName('td')[0].appendChild(link);
  108.       container.querySelector('td:last-child').appendChild(date);
  109.       this.refs.feedListExpander.setHeaderContent(container.outerHTML);
  110.     };
  111.     render () {
  112.  
  113.         return (
  114.             <JqxSplitter ref='mainSplitter'
  115.               width={850} height={600}
  116.               panels={[{ size: 200, min: 100 }, {min: 200, size: 400}]}
  117.             >
  118.                 <JqxExpander style={{ border: 'none'}}
  119.                   width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  120.                 >
  121.                     <div className="jqx-hideborder">
  122.                         Feeds
  123.                     </div>
  124.                     <div className="jqx-hideborder jqx-hidescrollbars">
  125.                         <JqxTree ref='myTree' width={'100%'} height={'100%'}>
  126.                             <ul>
  127.                                 <li id="t1">
  128.                                     <img src='../images/contactsIcon.png' /><span>News and Blogs</span>
  129.                                     <ul>
  130.                                         <li>
  131.                                             <img src='../images/favorites.png' /><span>Favorites</span>
  132.                                             <ul>
  133.                                                 <li>
  134.                                                     <img src='../images/folder.png' /><span>ScienceDaily</span>
  135.                                                 </li>
  136.                                             </ul>
  137.                                         </li>
  138.                                         <li>
  139.                                             <img src='../images/folder.png' /><span>Geek.com</span>
  140.                                         </li>
  141.                                         <li>
  142.                                             <img src='../images/folder.png' /><span>CNN.com</span>
  143.                                         </li>
  144.                                     </ul>
  145.                                 </li>
  146.                             </ul>
  147.                         </JqxTree>
  148.                     </div>
  149.                 </JqxExpander>
  150.                 <div>
  151.                     <JqxSplitter
  152.                       width={850} height={600} orientation={'horizontal'}
  153.                       panels={[{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}]}
  154.                     >
  155.                         <div className="feed-item-list-container" id="feedUpperPanel">
  156.                             <JqxExpander ref='feedListExpander' className="jqx-hideborder"
  157.                                 width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  158.                             >
  159.                                 <div className="jqx-hideborder" id="feedHeader">
  160.                                 </div>
  161.                                 <div className="jqx-hideborder jqx-hidescrollbars">
  162.                                     <JqxListBox ref='myListBox' width={'100%'} height={'100%'} source={['1']} className="jqx-hideborder">
  163.                                     </JqxListBox>
  164.                                 </div>
  165.                             </JqxExpander>
  166.                         </div>
  167.                         <div id="feedContentArea">
  168.                             <JqxExpander className="jqx-hideborder"
  169.                                 width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  170.                             >
  171.                                 <div className="jqx-hideborder" id="feedItemHeader">
  172.                                 </div>
  173.                                 <div className="jqx-hideborder jqx-hidescrollbars">
  174.                                     <JqxPanel ref='myPanel' width={'100%'} height={'100%'} className="jqx-hideborder">
  175.                                         Select a news item to see it's content
  176.                                     </JqxPanel>
  177.                                 </div>
  178.                             </JqxExpander>
  179.                         </div>
  180.                     </JqxSplitter>
  181.                 </div>
  182.             </JqxSplitter>
  183.         )
  184.     }
  185. }
  186.  
  187. //Render our App Component to the desirable element
  188. ReactDOM.render(<App />, document.getElementById('app'));

Raw Paste


Login or Register to edit or fork this paste. It's free.