fastladder/fastladder

%title #{@subscription.feed.title} - Fastladder Mobile
<link href='https://unpkg.com/sakura.css/css/sakura.css' media='screen' rel='stylesheet' type='text/css'>
<meta content='width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>

%h1
  %a{href: '/mobile'}
    %img(src="/img/logo_small.gif" alt="Fastladder")
%h2 #{@subscription.feed.title}
-@items.each do |item|
  %div.item{id: "item-#{item.id}"}
    %h3 
      %a.read{href: item.link, target: "_blank"}=item.title

    %div!= remove_style_attr_of_all_tags(item.body)
    %div
      %p.smallgrey 
        %a.pin{href: "/mobile/#{item.id}/pin"} Pin
        Created: #{item.created_on.localtime} 
    %hr

%div
  %a#next{href: "/mobile/#{@subscription.id}/read?timestamp=#{@items.last.updated_on.to_i}"}
    %button{style: "font-size: 1.5em;"} Mark as read

%div(style="height:2000px")
:css
  .smallgrey {
    font-size: 0.8em;
    color: #666;
  }

:javascript
  var current = "item-#{params[:item_id]}";

  const scroll = (id)=>{
    document.querySelectorAll('.item').forEach((e)=> e.style.backgroundColor = '#f9f9f9');
    const dom = document.getElementById(current)
    dom.scrollIntoView();
    dom.style.backgroundColor = "#ffffcc";
  }

  if(location.hash) {
    current = location.hash.replace('#', '');
    scroll(current);
  }
  var ids = Array.from(document.querySelectorAll('.item')).map((e)=> e.id);

  window.addEventListener('keydown', (e) => {
    if (e.key === 'j') {
      var next = ids[ids.indexOf(current) + 1];
      if(next) current = next;
      scroll(current);
    }
    if (e.key === 'k') {
      var prev = ids[ids.indexOf(current) - 1];
      if(prev) current = prev;
      scroll(current);
    }
  });

  window.addEventListener('keyup', (e)=> {
    // pin
    if(e.key === 'p') {
      const link = document.getElementById(current).querySelector('a.pin');
      if(link) link.click();
    }

    // read
    if(e.key === 'v') {
      const link = document.getElementById(current).querySelector('a.read');
      if(link) link.click();
    }

    // next
    if(e.key === 's') {
      document.getElementById('next').click();
    }
  });