[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});