SteamGifts: UI Simplify

Remove unnecessary UI on SteamGifts.

// ==UserScript==
// @name         SteamGifts: UI Simplify
// @version      1.0.3
// @description  Remove unnecessary UI on SteamGifts.
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/2s73pG4.jpg
// @match        https://www.steamgifts.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
    'use strict';

    // icons made by https://www.flaticon.com/authors/those-icons
    // icons made by https://www.flaticon.com/authors/pixel-perfect
    // icons made by https://www.flaticon.com/authors/freepik
    // icons made by https://www.flaticon.com/authors/those-icons
    const svgMenu = `<svg style="margin-top: 8px;" viewBox="0 0 469.333 469.333" fill="black"><path d="M426.667,0h-384C19.146,0,0,19.135,0,42.667v384c0,23.531,19.146,42.667,42.667,42.667h384    c23.521,0,42.667-19.135,42.667-42.667v-384C469.333,19.135,450.188,0,426.667,0z M138.667,42.667    c5.891,0,10.667,4.775,10.667,10.667c0,5.891-4.776,10.667-10.667,10.667S128,59.224,128,53.333    C128,47.441,132.776,42.667,138.667,42.667z M96,42.667c5.891,0,10.667,4.775,10.667,10.667C106.667,59.224,101.891,64,96,64    s-10.667-4.776-10.667-10.667C85.333,47.441,90.109,42.667,96,42.667z M53.333,42.667C59.224,42.667,64,47.441,64,53.333    C64,59.224,59.224,64,53.333,64s-10.667-4.776-10.667-10.667C42.667,47.441,47.443,42.667,53.333,42.667z M426.667,426.667h-384    v-320h384V426.667z"/></svg>`;
    const svgFeature = `<svg width="25" height="25" viewBox="0 0 512 512" fill="#f7434c"><path d="M32,271.692v192c0,17.664,14.368,32,32,32h160v-224H32z"/><path d="M480,143.692H378.752c7.264-4.96,13.504-9.888,17.856-14.304c25.824-25.952,25.824-68.192,0-94.144    c-25.088-25.28-68.8-25.216-93.856,0c-13.888,13.92-50.688,70.592-45.6,108.448h-2.304c5.056-37.856-31.744-94.528-45.6-108.448    c-25.088-25.216-68.8-25.216-93.856,0C89.6,61.196,89.6,103.436,115.36,129.388c4.384,4.416,10.624,9.344,17.888,14.304H32    c-17.632,0-32,14.368-32,32v48c0,8.832,7.168,16,16,16h208v-64h64v64h208c8.832,0,16-7.168,16-16v-48    C512,158.06,497.664,143.692,480,143.692z M222.112,142.636c0,0-1.344,1.056-5.92,1.056c-22.112,0-64.32-22.976-78.112-36.864    c-13.408-13.504-13.408-35.52,0-49.024c6.496-6.528,15.104-10.112,24.256-10.112c9.12,0,17.728,3.584,24.224,10.112    C208.128,79.5,229.568,134.924,222.112,142.636z M295.776,143.692c-4.544,0-5.888-1.024-5.888-1.056    c-7.456-7.712,13.984-63.136,35.552-84.832c12.896-13.024,35.456-13.088,48.48,0c13.44,13.504,13.44,35.52,0,49.024    C360.128,120.716,317.92,143.692,295.776,143.692z"/><path d="M288,271.692v224h160c17.664,0,32-14.336,32-32v-192H288z"/></svg>`;
    const svgCopies = `<svg width="25" height="25" viewBox="0 0 512 512" fill="#8cc153"><g><path d="m121 60v60h270v-60h-120v-15c0-8.276 6.724-15 15-15s15 6.724 15 15h30c0-24.814-20.186-45-45-45-11.567 0-22.02 4.508-30 11.704-7.98-7.196-18.433-11.704-30-11.704-24.814 0-45 20.186-45 45h30c0-8.276 6.724-15 15-15s15 6.724 15 15v15z"/><path d="m121 150h120v121h-120z"/><path d="m271 150h120v121h-120z"/><path d="m127.211 422 90 90h77.578l90-90z"/><path d="m337.211 512h174.789v-90h-84.789z"/><path d="m84.789 422h-84.789v90h174.789z"/><path d="m241 301h30v91h-30z"/><path d="m61 301h150v91h-150z"/><path d="m301 301h150v91h-150z"/></g></svg>`;
    const svgEntered = `<svg width="25" height="25" viewBox="0 0 512 512" fill="#ffd039"><g><path d="m96 150h145v-40h30v40h145c8.284 0 15-6.716 15-15v-40c0-8.284-6.716-15-15-15h-71.035c3.848-7.507 6.035-16 6.035-25 0-30.327-24.673-55-55-55-15.75 0-29.964 6.665-40 17.31-10.036-10.645-24.25-17.31-40-17.31-30.327 0-55 24.673-55 55 0 9 2.187 17.493 6.035 25h-71.035c-8.284 0-15 6.716-15 15v40c0 8.284 6.716 15 15 15zm200-120c13.785 0 25 11.215 25 25s-11.215 25-25 25h-25v-25c0-13.785 11.215-25 25-25zm-105 25c0-13.785 11.215-25 25-25s25 11.215 25 25v25h-25c-13.785 0-25-11.215-25-25z"/><path d="m501.607 309.513c-13.55-15.243-36.85-16.727-52.224-3.327l-59.784 52.109c.026.763.058 1.525.058 2.294 0 37.21-30.272 67.483-67.483 67.483h-80.399c-8.284 0-15-6.716-15-15s6.716-15 15-15h40.226 40.186c20.695 0 37.472-16.777 37.472-37.472 0-20.704-16.791-37.484-37.495-37.472l-78.289.049c-21.398-24.333-50.967-39.073-83.286-41.507-32.384-2.437-63.885 7.748-88.708 28.684l-7.024 5.924 73.75 172.084h190.463c18.527 0 36.323-6.817 50.107-19.195l119.482-107.283c15.226-13.67 16.544-37.076 2.948-52.371z"/><path d="m271 293.161 51.144-.032c24.809 0 46.521 13.426 58.255 33.389l30.601-26.673v-119.845h-140z"/><path d="m151.173 251.316c3.869 0 7.794.148 11.666.439 28.591 2.154 55.455 12.059 78.161 28.493v-100.248h-140v79.827c16.036-5.583 32.993-8.511 50.173-8.511z"/><path d="m10.091 343.209c-3.656 1.567-6.541 4.522-8.019 8.216-1.478 3.693-1.427 7.823.14 11.479l60 140c2.438 5.688 7.975 9.095 13.794 9.095 1.971 0 3.975-.391 5.902-1.217l28.443-12.189-71.816-167.573z"/></g></svg>`;
    const svgForum = `<svg width="25" height="25" viewBox="0 0 512.029 512.029" fill="#854f89"><path d="M224.018,0.015c-123.52,0-224,81.824-224,182.4c0,50.944,25.6,98.72,70.784,133.088    c-14.944,23.328-34.272,46.944-58.656,52.96c-7.712,1.92-12.864,9.216-12.064,17.12c0.8,7.936,7.296,14.048,15.264,14.4    c0.352,0,1.728,0.064,4.032,0.064c16.544,0,80.416-2.656,152.896-40.256c16.608,3.36,33.984,5.024,51.744,5.024    c123.488,0,224-81.824,224-182.4S347.506,0.015,224.018,0.015z"/><path d="M499.858,479.279c-20.384-5.024-35.808-19.936-46.592-34.72c37.536-29.408,58.752-69.856,58.752-112.96    c0-36.096-15.168-69.28-40.352-95.808c-28.448,92.448-128.512,161.024-247.648,161.024c-15.904,0-31.616-1.216-46.88-3.616    c-9.088,4.384-17.984,8.256-26.72,11.712c32.288,49.6,96.16,83.488,169.6,83.488c15.008,0,29.568-1.376,43.392-4.064    c45.92,23.392,87.808,27.712,112.448,27.68c13.504,0,21.824-1.28,22.752-1.44c7.488-1.216,13.088-7.552,13.408-15.136    C512.306,487.855,507.25,481.071,499.858,479.279z"/></svg>`;
    const svgAd = `<svg width="25" height="25" viewBox="0 0 469.333 469.333" fill="#1c2c64"><path d="M234.667,266.667V224c0-5.885-4.781-10.667-10.667-10.667h-10.667v64H224     C229.885,277.333,234.667,272.552,234.667,266.667z"/><path d="M149.333,224c0-5.885-4.781-10.667-10.667-10.667S128,218.115,128,224v32h21.333V224z"/><path d="M74.667,341.333H288c5.896,0,10.667-4.771,10.667-10.667V160c0-5.896-4.771-10.667-10.667-10.667H74.667     C68.771,149.333,64,154.104,64,160v170.667C64,336.563,68.771,341.333,74.667,341.333z M192,202.667     c0-5.896,4.771-10.667,10.667-10.667H224c17.646,0,32,14.354,32,32v42.667c0,17.646-14.354,32-32,32h-21.333     c-5.896,0-10.667-4.771-10.667-10.667V202.667z M106.667,224c0-17.646,14.354-32,32-32s32,14.354,32,32v64     c0,5.896-4.771,10.667-10.667,10.667c-5.896,0-10.667-4.771-10.667-10.667v-10.667H128V288c0,5.896-4.771,10.667-10.667,10.667     c-5.896,0-10.667-4.771-10.667-10.667V224z"/><path d="M74.667,405.333h320c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667h-320     C68.771,384,64,388.771,64,394.667C64,400.563,68.771,405.333,74.667,405.333z"/><path d="M330.667,213.333h64c5.896,0,10.667-4.771,10.667-10.667S400.563,192,394.667,192h-64     c-5.896,0-10.667,4.771-10.667,10.667S324.771,213.333,330.667,213.333z"/><path d="M330.667,277.333h64c5.896,0,10.667-4.771,10.667-10.667S400.563,256,394.667,256h-64     c-5.896,0-10.667,4.771-10.667,10.667S324.771,277.333,330.667,277.333z"/><path d="M330.667,341.333h64c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667h-64     c-5.896,0-10.667,4.771-10.667,10.667C320,336.563,324.771,341.333,330.667,341.333z"/><path d="M426.667,0h-384C19.146,0,0,19.135,0,42.667v384c0,23.531,19.146,42.667,42.667,42.667h384     c23.521,0,42.667-19.135,42.667-42.667v-384C469.333,19.135,450.188,0,426.667,0z M138.667,42.667     c5.891,0,10.667,4.775,10.667,10.667c0,5.891-4.776,10.667-10.667,10.667S128,59.224,128,53.333     C128,47.441,132.776,42.667,138.667,42.667z M96,42.667c5.891,0,10.667,4.775,10.667,10.667C106.667,59.224,101.891,64,96,64     s-10.667-4.776-10.667-10.667C85.333,47.441,90.109,42.667,96,42.667z M53.333,42.667C59.224,42.667,64,47.441,64,53.333     C64,59.224,59.224,64,53.333,64s-10.667-4.776-10.667-10.667C42.667,47.441,47.443,42.667,53.333,42.667z M426.667,426.667h-384     v-320h384V426.667z"/></svg>`;

    const style = document.createElement("style");
    document.head.appendChild(style);
    style.type = "text/css";
    style.innerHTML =
        `.animation {
             max-height: 300px;
             overflow: hidden;
             transition: max-height 0.3s;
         }
         .hide {
             max-height: 0px;
         }
         .icon {
             width: 13px;
             height: 29px;
         }
         .drop {
             position: relative;
         }
         .menu {
             width: 275px;
             height: 250px;
             left: -37px !important;
             top: 35px;
         }
         .option {
             height: 25px;
         }
         .name {
             margin-left: 15px;
         }
         .select {
             position: absolute;
             right: 10px;
         }
         .toggle {
             color: hsla(90, 39%, 47%, 1);
         }`;

    window.addEventListener("load", init);

    function init() {
        getFeature();
        getCopies();
        getEntered();
        getForum();
        getAd();
        createButton();
    }

    function getFeature(retry = 0) {
        // check
        const feature = document.querySelector(".featured__container:not(.animation)");
        if (!feature && retry < 5) {
            setTimeout(() => {
                getFeature(retry++);
            }, 500);
            return;
        }
        // animation
        feature.className = "featured__container feature animation";
        // initialization
        if (GM_getValue("feature", false) && !(window.location.href.includes("giveaway") && !window.location.href.includes("giveaways"))) {
            feature.classList.add("hide");
        }
    }

    function getCopies(retry = 0) {
        // check
        const copies = document.querySelector(".pinned-giveaways__outer-wrap:not(.animation)");
        if (!copies && retry < 5) {
            setTimeout(() => {
                getCopies(retry++);
            }, 500);
            return;
        }
        // animation
        copies.className = "copies animation";
        // initialization
        if (GM_getValue("copies", false) && !(window.location.href.includes("giveaway") && !window.location.href.includes("giveaways"))) {
            copies.classList.add("hide");
        }
    }

    function getEntered(retry = 0) {
        // check
        const entered = [...document.querySelectorAll(".giveaway__row-outer-wrap:not(.animation)")].filter(giveaway => giveaway.children[0].className.includes("is-faded"));
        if (!entered.length && retry < 5) {
            setTimeout(() => {
                getEntered(retry++);
            }, 500);
            return;
        }
        // animation
        entered.forEach(enter => {
            enter.className = "entered animation";
            // initialization
            if (GM_getValue("entered", false) && !(window.location.href.includes("giveaway") && !window.location.href.includes("giveaways"))) {
                enter.classList.add("hide");
            }
        });
    }

    function getForum(retry = 0) {
        // check
        const forum = document.querySelector(".widget-container--margin-top:not(.animation)");
        if (!forum && retry < 5) {
            setTimeout(() => {
                getForum(retry++);
            }, 500);
            return;
        }
        // animation
        forum.className = "forum animation";
        // initialization
        if (GM_getValue("forum", false) && !(window.location.href.includes("giveaway") && !window.location.href.includes("giveaways"))) {
            forum.classList.add("hide");
        }
    }

    function getAd(retry = 0) {
        // check
        const ad1 = document.querySelector(".sidebar__mpu");
        const ad2 = document.querySelectorAll("body script[async]");
        if ((!ad1 || !ad2.length) && retry < 5) {
            setTimeout(() => {
                getAd(retry++);
            }, 500);
            return;
        }
        // class
        ad1.classList.add("ad");
        ad2.forEach(ad => {
            ad.parentElement.classList.add("ad");
        });
        // initialization
        if (GM_getValue("ad", false) && !(window.location.href.includes("giveaway") && !window.location.href.includes("giveaways"))) {
            ad1.remove();
            ad2.forEach(ad => {
                ad.parentElement.remove();
            });
        }
    }

    function createButton(retry = 0) {
        const parent = document.querySelector(".nav__right-container");
        // check
        if (!parent && retry < 5) {
            setTimeout(() => {
                createButton(retry++);
            }, 500);
            return;
        }
        // button
        const button = parent.firstElementChild.cloneNode(false);
        parent.insertBefore(button, parent.firstElementChild);
        // icon
        const icon = document.createElement("div");
        icon.className = "nav__button fa icon";
        icon.innerHTML = svgMenu;
        button.appendChild(icon);
        // next function
        createMenu(button);
    }

    function createMenu(button) {
        // drop
        const drop = document.createElement("div");
        drop.classList.add("drop");
        button.appendChild(drop);
        // menu
        const menu = document.createElement("div");
        menu.className = "nav__absolute-dropdown menu animation hide";
        drop.appendChild(menu);
        // onButton
        let onButton = false;
        button.addEventListener("mouseenter", () => { onButton = true; });
        button.addEventListener("mouseleave", () => { onButton = false; });
        // onMenu
        let onMenu = false;
        menu.addEventListener("mouseenter", () => { onMenu = true; });
        menu.addEventListener("mouseleave", () => { onMenu = false; });
        // event
        button.addEventListener("click", () => {
            if (onMenu) return;
            menu.classList.toggle("hide");
        });
        document.body.addEventListener("click", () => {
            if (onMenu || onButton || menu.className.includes("hide")) return;
            menu.classList.toggle("hide");
        });
        // next function
        createOption(menu);
    }

    function createOption(menu) {
        singleOption(menu, svgFeature, "Feature Giveaway", "feature");
        singleOption(menu, svgCopies, "50+ Copies Giveaway", "copies");
        singleOption(menu, svgEntered, "Entered Giveaway", "entered");
        singleOption(menu, svgForum, "Forum", "forum");
        singleOption(menu, svgAd, "Advertisement<br/><span style='font-size:50%;color:red'>Need to refresh page.<span>", "ad");
    }

    function singleOption(menu, svg, strName, gmKey) {
        // option
        const option = document.createElement("div");
        option.className = "nav__row option";
        option.innerHTML = svg;
        menu.appendChild(option);
        // name
        const name = document.createElement("div");
        name.className = "nav__row__summary__name name";
        name.innerHTML = strName;
        option.appendChild(name);
        // select
        const select = document.createElement("div");
        const status = GM_getValue(gmKey, false) ? "form__checkbox cb__yes is-selected" : "form__checkbox cb__yes is-disabled";
        select.className = `${status} select`;
        option.appendChild(select);
        // default
        const toggle1 = document.createElement("i");
        toggle1.className = "form__checkbox__default fa fa-circle-o";
        select.appendChild(toggle1);
        // hover
        const toggle2 = document.createElement("i");
        toggle2.className = "form__checkbox__hover fa fa-circle";
        select.appendChild(toggle2);
        // selected
        const toggle3 = document.createElement("i");
        toggle3.className = "form__checkbox__selected fa fa-check-circle toggle";
        toggle3.style.color = "hsla(90, 39%, 47%, 1)";
        select.appendChild(toggle3);
        // event
        option.addEventListener("click", () => { saveChange(select, gmKey); });
    }

    function saveChange(select, key) {
        // gm
        select.classList.toggle("is-selected");
        select.classList.toggle("is-disabled");
        GM_setValue(key, !GM_getValue(key, false));
        // toggle
        document.querySelectorAll(`.${key}`).forEach(target => {
            if (key === "ad") {
                target.remove();
            } else {
                target.classList.toggle("hide");
            }
        });
    }

})();