html/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>News River</title>
   5     <meta charset="utf-8">
   6     <link rel="stylesheet" href="style.css">
   7     <script src="https://unpkg.com/htmx.org@1.7.0"></script>
   8   </head>
   9   <body class="app">
  10     <div id="feed-pane" valign="top" hx-get="/feeds" hx-trigger="load, newFeed from:body, every 900s" hx-target="#feed-list">
  11       <h1>Feed List</h1>
  12       <div id="add-feed">
  13         <form hx-post="/feeds">
  14           <input type="url" name="link" placeholder="Link to RSS Feed">
  15           <button type="submit">Add</button>
  16         </form>
  17       </div>
  18       <div id="feed-list"></div>
  19     </div>
  20     <div id="list-pane">
  21       <div>
  22         <table><thead><tr><th style="width: 80%">Title</th><th>Publish Date</th></head></table>
  23       </div>
  24       <ul class="scrollable list" id="feed-item-list"></ul>
  25     </div>
  26     <div id="reading-pane"></div>
  27     <div id="status-bar">
  28       A project by <a href="https://xangelo.ca">xangelo</a> that is still in active <a href="https://git.xangelo.ca">development</a>
  29     </div>
  30   </body>
  31   <script>
  32     function $(sel, root, opts) {
  33       const el = (root || document).querySelectorAll(sel);
  34       if(opts && opts.array) {
  35         return Array.from(el);
  36       }
  37       if(el.length === 1) {
  38         return el[0];
  39       }
  40       else {
  41         return Array.from(el);
  42       }
  43     }
  44
  45 function activeMarker(e) {
  46   // clear sibling active class.
  47   if(e.target.parentElement.tagName === 'LI') {
  48     const parent = e.target.parentElement.parentElement;
  49     $('a.active', parent, {array: true}).forEach(el => {
  50       el.classList.remove('active');
  51     });
  52   }
  53
  54   e.target.classList.add('active');
  55 }
  56
  57     $('body').addEventListener('click', e => {
  58       const actions = e.target.getAttribute('data-actions');
  59       if(actions && actions.split(' ').includes('activate')) {
  60         activeMarker(e);
  61       }
  62       if (e.target.classList.contains('unread') && e.target.getAttribute('data-feed-item-id') !== null) {
  63         e.target.classList.remove('unread');
  64         // ok it was unread.. so we should figure out the id that it belongs
  65         // to and decr the counter for that!
  66         const feedId = e.target.getAttribute('data-feed-id');
  67         const el = $(`#feed-list a[data-feed-id="${feedId}"] .unread-count`);
  68         if(el) {
  69           if(el.innerHTML.length) {
  70             let count = parseInt(el.innerHTML.split('(')[1].split(')')[0]);
  71             count--;
  72             if(count < 1) {
  73               el.innerHTML = '';
  74               el.parentElement.classList.remove('unread');
  75             }
  76             else {
  77               el.innerHTML = `(${count})`;
  78             }
  79           }
  80         }
  81       }
  82     });
  83   </script>
  84 </html>