9gag_already_seen

display "already seen"-status of posts

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==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++;
    }});