Better flags on /mlp/

// ==UserScript==
// @name        Better flags on /mlp/
// @namespace   https://boards.4channel.org/mlp/
// @description Improved flag selector for /mlp/ (requires 4chan X)
// @version     1.1
// @author      Anonymous
// @icon        https://s.4cdn.org/image/flags/mlp/anf.gif
// @downloadURL https://gist.github.com/nnuudev/6c4376687572f8627e1e10c5a5323497/raw/Better%2520flags.user.js
// @match       https://boards.4channel.org/mlp/*
// @run-at      document-start
// @grant       GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        #qr > form > .flagSelector {
            width: calc(75% - 18px);
        }
        #flagSelectorViewer:hover {
            background: none;
        }
        #flagSelectorViewer:hover::before {
            color: #5f89ac;
            font-family: FontAwesome;
            display: inline-block;
            font-size: 13px;
            vertical-align: top;
            margin: 0 0 0 2px;
            content: "\\f057";
        }
        #flagSelectorViewer.bfl-0 {
            background: none;
            pointer-events: none;
        }
        #flagSelectorViewer.bfl-0::before {
            color: #5f89ac;
            font-family: FontAwesome;
            display: inline-block;
            font-size: 13px;
            vertical-align: top;
            margin: 0 0 0 1px;
            content: "\\f024";
        }
    `);

    let preferredOrder = ["0","AJ","FL","PI","RD","RAR","TWI","4CC","AN","ANF","APB","AU","BS","BP","BM","BB","CL","CHE","CB","CO","CG","DD","DAY","DER","DT","DIS","FAU","FLE","GI","LI","LT","LY","MA","MAU","MIN","NI","NUR","OCT","PAR","PM","PC","PCE","PLU","QC","RLU","S1L","SCO","SHI","SIL","SP","SPI","STA","STL","SUN","SWB","TS","TX","VS","ZE","HT","IZ","PP","SPT","SS","ZS","TFA","TFO","TFP","TP","TFS","TFT","TFV","ADA","AB","SON","SUS","EQA","EQF","EQP","EQR","ERA","EQS","EQT","EQI"];
    let observedNodeAttribute = "flagselector-observer";
    let flagSelector = null;

    function onMutationCallback(mutationRecordArray) {
        flagSelector = document.querySelector("#qr > form > .flagSelector");
        if (flagSelector != null && flagSelector.getAttribute(observedNodeAttribute) == null) {
            flagSelector.setAttribute(observedNodeAttribute, 1);
            let optionNodes = Array.from(flagSelector.children);
            optionNodes.sort((a, b) => preferredOrder.indexOf(a.value) - preferredOrder.indexOf(b.value));
            optionNodes.forEach((option) => flagSelector.appendChild(option));
            flagSelector.firstChild.label = "No flag";
            flagSelector.insertAdjacentHTML("beforebegin", `<span id="flagSelectorViewer" title="Remove flag" style="margin-bottom: -2px;margin-right: 2px;" class="bfl bfl-0"></span>`);
            document.querySelector("#flagSelectorViewer").addEventListener("click", (ev) => { flagSelector.selectedIndex=0; flagSelector.dispatchEvent(new Event('change')); });
            flagSelector.addEventListener('change', onSelectChange);
            setTimeout(onSelectChange, 100);
        }
    }

    function onSelectChange() {
        document.querySelector("#flagSelectorViewer").className = "bfl bfl-" + flagSelector.value.toLowerCase();
    }

    let mutationObserver = new MutationObserver(onMutationCallback);
    mutationObserver.observe(document.documentElement, {childList: true, subtree: true});

})();