tkrkt
7/27/2017 - 8:43 AM

[userscript] [Feedly] any-purpose counter

[userscript] [Feedly] any-purpose counter

// ==UserScript==
// @name         [Feedly] any-purpose counter
// @description  add any-purpose counter on each feed
// @namespace    https://gist.github.com/tkrkt
// @version      0.2
// @author       tkrkt
// @match        https://feedly.com/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

const getFeed = () => {
  if (location.pathname.startsWith('/i/subscription/feed')) {
    return location.pathname.replace(/^i\/subscription\/feed(\/|%20)/, '');
  } else {
    return null;
  }
};

const createCounter = feed => {
  let count = GM_getValue(feed) || 0;
  const counter = document.createElement('div');
  counter.id = 'counter';
  counter.className = 'mark-as-read-button-group button secondary';
  counter.innerHTML = `
<div class="button-dropdown" style="border-left: none; border-right: solid 1px rgba(0, 0, 0, 0.15);">
  <button id="down-count" class="no-border secondary button-icon-only" type="button">
    <i class="icon icon-sm icon-tertiary icon-fx-arrowhead-down-ios-sm-black"></i>
  </button>
</div>
<button id="indicator" class="no-border secondary" type="button" style="min-width: 40px;"></button>
<div class="button-dropdown">
  <button id="up-count" class="no-border secondary button-icon-only" title="" type="button">
    <i class="icon icon-sm icon-tertiary icon-fx-arrowhead-down-ios-sm-black" style="transform: rotate(180deg);"></i>
  </button>
</div>`;
  const [up, down, indicator] = ['#up-count', '#down-count', '#indicator'].map(q => counter.querySelector(q));

  const setCount = () => {
    GM_setValue(feed, count);
    indicator.textContent = count > 0 ? '+' + count : count;
  };

  up.addEventListener('click', () => {
    count++;
    setCount();
  }, false);
  down.addEventListener('click', () => {
    count--;
    setCount();
  }, false);
  setCount();
  return counter;
};

const handleTransition = () => {
  const feed = getFeed();
  if (feed) {
    const container = document.querySelector('#feedlyPageFX header.header .right-col .actions-container');
    if (container && !container.querySelector('#counter')) {
      container.insertBefore(createCounter(feed), container.firstElementChild);
    } else {
      setTimeout(handleTransition, 1000);
    }
  }
};

const observer = new MutationObserver(handleTransition);
observer.observe(document.querySelector('head > title'), {childList: true});