// ==UserScript==
// @name         Twitter: Hide Image
// @version      1.0.0
// @description  Make Twitter Images Opacity Lower.
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/M9oO8K9.png
// @include      https://twitter.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    window.onload = () => {
        for (let i = 0; i < 10; i++) setTimeout(hideImage, 500 * (i + 1));
        observeSystem();
        detectUrl();
    };

    function hideImage() {
        document.querySelectorAll("img:not(.hide)").forEach(image => {
            image.classList.add("hide");
            // except emoji
            if (image.draggable) {
                const parent = image.parentElement;
                const children = parent.childNodes;
                children.forEach(div => {
                    if (div.nodeName === "DIV") {
                        div.style.transition = "opacity 0.3s";
                        div.style.opacity = 0.1;
                        addListener(image, div);
                    }
                });
            }
        });
    }

    function addListener(image, div) {
        // over
        image.addEventListener("mouseover", () => {
            div.style.opacity = 1;
        });
        // out
        image.addEventListener("mouseout", () => {
            div.style.opacity = 0.1;
        });
    }

    function observeSystem() {
        // error 1
        if (document.querySelectorAll("section > h1").length === 0 || document.querySelectorAll("title").length === 0) {
            setTimeout(observeSystem, 500);
            return;
        }
        // target
        const target1 = [...document.querySelectorAll("section > h1")[0].parentElement.childNodes].filter(child => child.tagName !== "H1")[0].childNodes[0].childNodes[0];
        const target2 = document.querySelectorAll("title")[0];
        // error 2
        if (target1.className == "css-1dbjc4n r-1adg3ll") {
            setTimeout(observeSystem, 500);
            return;
        }
        // observer
        const mutation = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        const observer = new mutation(hideImage);
        const config = { attributes: true, childList: true, characterData: true };
        observer.observe(target1, config); //timeline
        observer.observe(target2, config); //trending
    }

    function detectUrl() {
        // situation 1
        window.addEventListener('locationchange', observeSystem);
        // situation 2
        history.pushState = ( f => function pushState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('pushState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.pushState);
        // situation 3
        history.replaceState = ( f => function replaceState(){
            var ret = f.apply(this, arguments);
            window.dispatchEvent(new Event('replaceState'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        })(history.replaceState);
        // situation 4
        window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
    }

})();