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