9gag_already_seen

display "already seen"-status of posts
换行
// ==UserScript==
// @name         9gag_already_seen
// @namespace    https://greasyfork.org/de/users/157797-lual
// @version      0.7
// @description  display "already seen"-status of posts
// @author       lual
// @match        https://9gag.com/*
// @icon         https://icons.duckduckgo.com/ip2/9gag.com.ico
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
// @grant        GM_registerMenuCommand
// ==/UserScript==
////////////////////////////////////////////////////////////////////////////////
// changes:        2021-08-19 publish beta-version on greasyfork

////////////////////////////////////////////////////////////////////////////////
var SCRIPT_NAME = '9gag_already_seen';
//add styles for seen and unseen articles
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
addGlobalStyle('.seen     { border-left: 10px solid #0077ff !important; }');
addGlobalStyle('.justseen { border-left: 10px solid #0077ff !important; transition: border-color 3s;}');
addGlobalStyle('.unseen   { border-left: 10px solid #007700 !important; }');
addGlobalStyle('#seen-counter { position: fixed; color: #0077ff; padding-top: 0px; padding-left: 13px; right: 20px; top:50px; height: 36px; width: 100px; background-color:#AAAAAA; border-radius: 18px; font-size: 16px; font-weight: 700; line-height: 36px; opacity:70%}');

////////////////////////////////////////////////////////////////////////////////
//forget seen/unseen status
GM_registerMenuCommand(SCRIPT_NAME + ': Forget seen status!', function() {
    localStorage.removeItem('article_ids');
    document.querySelectorAll('.seen').forEach(function(node) {
        node.classList.remove('seen');
        node.classList.add('unseen');
    });
    document.querySelectorAll('.justseen').forEach(function(node) {
        node.classList.remove('justseen');
        node.classList.add('unseen');
    });
});

//insert element for "seen articles"-count
function insertCounter(cnt) {
    var parent, div;
    parent = document.getElementsByTagName('body')[0];
    if (!parent) { return; }
    div = document.createElement('div');
    div.id = 'seen-counter';
    div.innerHTML = '&#128065 ' + cnt;
    div.title = 'Userscript - ' + SCRIPT_NAME + ' - Counter'
    parent.appendChild(div);
}

//update element for "seen articles"-count
function updateCounter(cnt) {
    var div;
    div = document.querySelector('#seen-counter');
    if (!div) { return; }
    div.innerHTML = '&#128065 '+ cnt;
}

$(document).ready(function() {
    //insert element for "seen articles"-count
    var stored_seen_article_ids = [];
    if (localStorage.getItem('article_ids')) {
        stored_seen_article_ids = JSON.parse(localStorage.getItem('article_ids'));
    }
    insertCounter(stored_seen_article_ids.length);

    //do a minimal scroll to mark articles...
    window.scrollTo(window.scrollX, window.scrollY + 1);
});

////////////////////////////////////////////////////////////////////////////////
var i = 0;
$(window).on('scroll',function(){

    var stored_seen_article_ids = [];
    if (localStorage.getItem('article_ids')) {
        stored_seen_article_ids = JSON.parse(localStorage.getItem('article_ids'));
    }

    //check if article is unseen / style it / and return bool
    function isArticleUnseen(article) {
        if(stored_seen_article_ids.indexOf(article.attr("id")) === -1){
            article.addClass('unseen');
            return true
        }
        else {
            article.addClass('seen');
            return false
        }
    };

    var displayedArticles = $("article");

    if (isArticleUnseen(displayedArticles.eq(i))){
        stored_seen_article_ids.push(displayedArticles.eq(i).attr("id"));
    };
    isArticleUnseen(displayedArticles.eq(i+1));
    isArticleUnseen(displayedArticles.eq(i+2));
    isArticleUnseen(displayedArticles.eq(i+3));
    isArticleUnseen(displayedArticles.eq(i+4));
    isArticleUnseen(displayedArticles.eq(i+5));
    isArticleUnseen(displayedArticles.eq(i+6));

    //articel scrolled over top - mark it as seen
    if($(window).scrollTop() >= displayedArticles.eq(i).offset().top){
        updateCounter(stored_seen_article_ids.length);

        localStorage.setItem("article_ids", JSON.stringify(stored_seen_article_ids));
        if (displayedArticles.eq(i).hasClass('unseen')) {
          displayedArticles.eq(i).removeClass('unseen');
          displayedArticles.eq(i).addClass('justseen');
        };
        i++;
    }});