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="/accounts/{ACCOUNT_ID}/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="/accounts/{ACCOUNT_ID}/feeds" hx-includes="#auth-token">
  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>