// ==UserScript==
// @name         9gag_already_seen
// @namespace    https://greasyfork.org/de/users/157797-lual
// @version      0.4
// @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
// @downloadURL none
// ==/UserScript==
////////////////////////////////////////////////////////////////////////////////
// changes:        2021-08-19 publish beta-version on greasyfork

////////////////////////////////////////////////////////////////////////////////
//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 rgb(0, 0, 255) !important; }');
addGlobalStyle('.justseen { border-left: 10px solid rgb(0, 0, 255) !important; transition: border-color 3s;}');
addGlobalStyle('.unseen   { border-left: 10px solid rgb(0, 255, 0) !important; }');
addGlobalStyle('#seen-counter { position: fixed; color: #00f; padding: 20px; right: 20px; top:50px; height: 30px; width: 100px; background-color:#f00; border-radius: 10px; font-size: 150%; opacity:50%}');

////////////////////////////////////////////////////////////////////////////////
//forget seen/unseen status
var SCRIPT_NAME = '9gag_seen_or_new';
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');
    });
});

//add counter for seen articles
function insertCounter(cnt) {
    var parent, div;
    parent = document.getElementsByTagName('body')[0];
    //parent = document.querySelector('nav-menu');
    if (!parent) { return; }
    div = document.createElement('div');
    div.id = 'seen-counter';
    div.innerHTML = '&#128065 ' + cnt;
    parent.appendChild(div);
}

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

$(document).ready(function() {
    insertCounter('0');
});

////////////////////////////////////////////////////////////////////////////////
var i = 0;
$(window).on('scroll',function(){
    var article_ids = [];
    if (localStorage.getItem('article_ids')) {
        article_ids = JSON.parse(localStorage.getItem('article_ids'));
    }
    var displayedArticle = $("article");
    var articles_i_ids = displayedArticle.eq(i).attr("id");
    if(article_ids.indexOf(articles_i_ids) === -1 && !displayedArticle.eq(i).hasClass('seen')){
        article_ids.push(articles_i_ids);
        displayedArticle.eq(i).addClass('unseen');
    }
    else {
        displayedArticle.eq(i).addClass('seen');
    }

    if($(window).scrollTop() >= displayedArticle.eq(i).offset().top){
        updateCounter(article_ids.length);

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