InoReader Colorful Listview

inoreader-colorful-list-view.user.js

// ==UserScript==
// @name        InoReader Colorful Listview
// @namespace   http://inoreader.colorful.list.view
// @description Colorizes items headers based on their source
// @include     http*://*.inoreader.com/*
// @version     0.4.0
// @grant       GM_addStyle
// ==/UserScript==

const colors = {};

const computeColor = title => {
  let h = 0;

  for (let i = 0; i < title.length; i++) {
    let s = i !== 0 ? title.length % i : 1;
    let r = s !== 0 ? title.charCodeAt(i) % s : title.charCodeAt(i);
    h += r;
  }

  let hs = {
    h: ((h % 36) + 1) * 10,
    s: 30 + ((h % 5) + 1) * 10,
  };

  colors[title] = hs;

  return hs;
};

GM_addStyle(`
  .article_unreaded .article_feed_title { color: #444 !important; font-weight: bold !important; }
  .ar { border-bottom: none !important; }
`);

const timeline = document.getElementById('reader_pane');
if (timeline) {
  timeline.addEventListener(
    'DOMNodeInserted',
    function() {
      const elements = document.getElementsByClassName('article_header');
      Array.from(elements)
        .map(el => el.parentNode)
        .filter(el => !el.getAttribute('colored'))
        .filter(el => el.querySelector('.article_feed_title'))
        .map(el => {
          const title = el.querySelector('.article_feed_title').textContent.trim();
          el.setAttribute('colored', title);
          return title;
        })
        .forEach(title => {
          if (!colors[title]) {
            const color = computeColor(title);
            GM_addStyle(`
          div[colored='${title}'] {
            background: hsl(${color.h},${color.s}%,80%) !important; }
          div[colored='${title}']:hover {
            background: hsl(${color.h},${color.s}%,85%) !important; }
          div[colored='${title}']//a[contains(@class, 'read')] {
            background: hsl(${color.h},${color.s}%,90%) !important; }
          div[colored='${title}']//a[contains(@class, 'read')]:hover {
            background: hsl(${color.h},${color.s}%,95%) !important; }
        `);
          }
        });
    },
    false
  );
}