BiliBili 直播颜文字

恢复直播区颜文字功能

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください。 
// ==UserScript==
// @name         BiliBili 直播颜文字
// @namespace    mscststs
// @version      0.12
// @description  恢复直播区颜文字功能
// @author       mscststs
// @match        *://live.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @require      https://greasyfork.org/scripts/38220-mscststs-tools/code/MSCSTSTS-TOOLS.js?version=713767
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const IconContainerQuery = ".control-panel-icon-row>.icon-left-part";
    let dataVersion = "data-v-39dcacee";
    const emojiList = ["(⌒▽⌒)", "（￣▽￣）", "(=・ω・=)", "(｀・ω・´)", "(〜￣△￣)〜", "(･∀･)", "(°∀°)ﾉ", "(￣3￣)", "╮(￣▽￣)╭", "_(:3」∠)_", "( ´_ゝ｀)", "←_←", "→_→", "(<_<)", "(>_>)", "(;¬_¬)", '("▔□▔)/', "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ(ﾟдﾟ;)", "Σ( ￣□￣||)", "(´；ω；`)", "（/TДT)/", "(^・ω・^ )", "(｡･ω･｡)", "(●￣(ｴ)￣●)", "ε=ε=(ノ≧∇≦)ノ", "(´･_･`)", "(-_-#)", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "（#-_-)┯━┯", "(╯°口°)╯(┴—┴", "←◡←", "( ♥д♥)", "Σ>―(〃°ω°〃)♡→", "⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄", "(╬ﾟдﾟ)▄︻┻┳═一", "･*･:≡(　ε:)", "(汗)", "(苦笑)"];
    const styles = `
.emoji-icon{
    margin: 0 5px;
    font-size: 14px !important;
    transform:scale(1.4);
    vertical-align: middle;
    color: #c8c8c8;
    transition: color cubic-bezier(.22,.58,.12,.98) .4s;
    cursor:default;
    display:inline-block;
    width:20px;
    height:20px;
    user-select:none;
    user-focus:
    outline:none;
}
.emoji-icon:hover, .emoji-icon:focus{
    color:#21a5da !important;
}
#emojiBox{
    transform-origin: 63px bottom;
    width: 280px;
    margin: 0px 0px 0px -140px;
    left: 50%;
    bottom: 100%;
    padding: 10px;
    position: absolute;
    z-index: 699;
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    flex-flow:row wrap;
}
.emoji-item{
    display:inline-block;
    padding: 4px 4px;
    cursor:pointer;
    user-select:none;
    transition: all 0.25s;
}
.emoji-item:hover{
    color:#21a5da;
}
    `

    let panelVisible = false;

    // 创建 Dom 元素
    function createElement(tag, innerHTML, attrs = {}){
        let ele = document.createElement(tag);
        ele.innerHTML = innerHTML;
        Object.entries(attrs).map(([key,value])=>{
            ele.setAttribute(key,value || "")
        })
        return ele;
    }

    // 创建 Style 标签
    function insertStyle(){
        let styleEle = createElement("style", styles);
        document.head.append(styleEle)
    }

    // 显示面板
    function showPanel(){
        let panel = createElement("div","",{
            class:"border-box dialog-ctnr common-popup-wrap top-center",[dataVersion]:"", id:"emojiBox"
        })
        let parent= document.querySelector("#control-panel-ctnr-box");

        emojiList.forEach(item=>{
            const emojiEle = createElement("span",item,{
                class:"emoji-item"
            })
            emojiEle.addEventListener("click",()=>{
                let ele = document.querySelector("#chat-control-panel-vm > div > div.chat-input-ctnr.p-relative > div > textarea");


                ele.value = ele.value + item;
				let e = new Event('input',{bubbles:true, cancelable: true, composed:true});
				let f = new Event('focus',{bubbles:true, cancelable: true, composed:true});

                ele.dispatchEvent(e);

                ele.focus()
                setTimeout(()=>{
                    ele.dispatchEvent(f);
                },10)
                // 选择表情后关闭面板
                panelVisible =!panelVisible;
                hidePanel();
            })
            panel.append(emojiEle)
        })
        parent.append(panel)

    }
    // 隐藏面板
    function hidePanel(){
        document.querySelector("#emojiBox").remove()

    }

     async function init(){
        let IconContainer = await mscststs.wait(IconContainerQuery);
         // 重设 Data-v 版本
        dataVersion = [...IconContainer.attributes].find(item=>item.name.startsWith("data-v")).name;
         console.log({class:"icon-item icon-font live-skin-main-text emoji-icon", title:"颜文字",[dataVersion]:""})
        // 在 IconConatiner 添加颜文字 Icon
        const emojiIcon = createElement("span",
                                            `☻`,
                                            {class:"icon-item icon-font live-skin-main-text emoji-icon", title:"颜文字",[dataVersion]:"", tabindex:-1}
                                          );
        IconContainer.append(emojiIcon);
        emojiIcon.addEventListener("click",(e)=>{
            panelVisible =!panelVisible;
            if(panelVisible){
                showPanel();
            }else{
                hidePanel();
            }
            e.stopPropagation()
        })
        document.addEventListener("click",()=>{
            if(panelVisible){
                panelVisible =!panelVisible;
                hidePanel();
            }
        })

     };
    // Start
    insertStyle();
    init();
})();