Replace Facebook 'Angry' with 'Dislike'

Makes it feel more like a dislike button!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         Replace Facebook 'Angry' with 'Dislike'
// @namespace    http://kippykip.com/
// @version      1.2.1
// @description  Makes it feel more like a dislike button!
// @author       Kippykip
// @match        https://www.facebook.com/*
// @grant        none
// ==/UserScript==

//The majority of this code is just a modified version of my "Halloween Reactions Restored for Facebook" script
//It's totally R A D I C A L ironically
//You should totally get it.
//https://greasyfork.org/en/scripts/24512-halloween-reactions-restored-for-facebook

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);
}

//All the class codes, these may change in the future
var CODE_Angry = '._3j7q';
var CODE_Popup = '._9-_';
var CODE_LinkText = 'UFILikeLink';
var CODE_MiniColourBar = '_dsx';
var CODE_NotificationIMG = '_10cu img _8o _8r img';
var CODE_NotificationPopup = '_1x8t img _8o _8r img';
var CODE_ReactionsFullview = '_ds- _45hc';
var CODE_ReactionsBar = '_4sm1';
var CODE_ReactionText = '_1vea';
//This just searches part of the filename, then it replaces the whole thing
var CODE_NotificationAngry = '6K8v8Ju8kL2';
//Replacement Content
var CODE_MiniReactURL = 'https://i.imgur.com/nsOLVfB.png';
var CODE_PopupReactURL = 'https://i.imgur.com/ppM9qhP.png';
var CODE_NotificationAngryRURL = 'https://i.imgur.com/pTD0eop.png';

//Replace the reaction bar images and... that's it.
//Angry
addGlobalStyle(CODE_Angry + '{background-image:url(' + CODE_MiniReactURL + ') !important;background-repeat:no-repeat}');
addGlobalStyle(CODE_Popup + CODE_Angry + '{background-image:url(' + CODE_PopupReactURL + ') !important;background-repeat:no-repeat;background-size:auto;background-position:0 0}');

//Changes the link colour
function SetLinkColours()
{
    TMP_Class = document.getElementsByClassName(CODE_LinkText);
    for(var i = 0; i < TMP_Class.length; i++)
    {
        //If it contains the name of the reaction
        //Angry
        if(TMP_Class[i].childNodes[2] !== undefined)
        {
            if(TMP_Class[i].childNodes[2].nodeValue == "Angry")
            {
                //THEN replace it, otherwise it replaces all colours
                TMP_Class[i].childNodes[2].nodeValue = "Dislike";
                TMP_Class[i].style.color = "rgb(242,82,104)";
            }
        }
    }

    //View reactions fullscreen thingy
    //Mini bar underneath
    var TMP_Classi = document.getElementsByClassName(CODE_MiniColourBar)[0];
    //Text
    var TMP_Classii = document.getElementsByClassName(CODE_ReactionsFullview);
    for(var ii = 0; ii < TMP_Classii.length; ii++)
    {
        if(TMP_Classii[ii].childNodes[0].childNodes[0].childNodes[0] !== undefined)
        {
            if(TMP_Classii[ii].childNodes[0].childNodes[0].childNodes[0].getAttribute('aria-label').indexOf('Angry') > -1)
            {
                if(TMP_Classii[ii].childNodes[0].childNodes[0].childNodes[0].style.color == 'rgb(247, 113, 75)')
                {
                    TMP_Classii[ii].childNodes[0].childNodes[0].childNodes[0].style.color = "rgb(242,82,104)";
                    TMP_Classi.style.background = "rgb(242,82,104)";
                }
            }
        }
    }
    //Reaction Bar Text
    var TMP_Classiii = document.getElementsByClassName(CODE_ReactionsBar);
    for(var iii = 0; iii < TMP_Classiii.length; iii++)
    {
        if(TMP_Classiii[iii].innerHTML == "Angry")
        {
            TMP_Classiii[iii].innerHTML = "Dislike";
        }
    }
    //Reaction Text
    var TMP_Classiiii = document.getElementsByClassName(CODE_ReactionText);
    for(var iiii = 0; iiii < TMP_Classiiii.length; iiii++)
    {
        if(TMP_Classiiii[iiii].innerHTML == "Angry")
        {
            TMP_Classiiii[iiii].innerHTML = "Dislike";
        }
    }
}

//Replace the images in notifications too
function SetN_IMGS()
{
    //Replace the ones from the notifications button
    var TMP_Class = document.getElementsByClassName(CODE_NotificationIMG);
    for(var i = 0; i < TMP_Class.length; i++)
    {
        //Angry
        if(TMP_Class[i].src.indexOf(CODE_NotificationAngry) > -1)
        {
            TMP_Class[i].src = CODE_NotificationAngryRURL;
        }
    }
    //This is for the notifications that popup on the left side!
    var TMP_Classi = document.getElementsByClassName(CODE_NotificationPopup);
    for(var ii = 0; ii < TMP_Classi.length; ii++)
    {
        //Angry
        if(TMP_Classi[ii].src.indexOf(CODE_NotificationAngry) > -1)
        {
            TMP_Classi[ii].src = CODE_NotificationAngryRURL;
        }
    }
}

//Add event listeners
//Run the colour set function
document.addEventListener("DOMNodeInserted", SetLinkColours, false);
//Replace notification images
document.addEventListener("DOMNodeInserted", SetN_IMGS, false);