// ==UserScript==
// @name         b站直播自定义颜文字输入插件
// @namespace    https://github.com/NieR4ever
// @version      1.1
// @description  b站直播自带的颜文字无了･ﾟﾟ･(>д<)･ﾟﾟ･｡
// @author       爱虎虎的小饼干
// @match        https://live.bilibili.com/*
// @icon         http://i2.hdslb.com/bfs/face/e95015d06a56f732fd5d6a33250412f434b3c0f5.jpg@125w_125h.webp
// @run-at       document-idle
// @require      https://cdn.jsdelivr.net/npm/jquery@1.11.1/dist/jquery.min.js
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';
    //颜文字列表
    const kaomojiList = [
        "(⌒▽⌒)", "（￣▽￣）", "(=・ω・=)",
        "(｀・ω・´)", "(〜￣△￣)〜", "(･∀･)",
        "(°∀°)ﾉ", "(￣3￣)", "╮(￣▽￣)╭",
        "_(:3」∠)_", "(^・ω・^ )", "(●￣(ｴ)￣●)",
        "ε=ε=(ノ≧∇≦)ノ", "⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄", "←◡←"

    ];

    //绘制面板框架
    const kaomojiPanel = $(`<div id="kaomojiPanel" data-v-b505b1e4 data-v-39dcacee
    class="border-box dialog-ctnr common-popup-wrap top-left a-scale-out v-leave-to"
    style="transform-origin: 63px buttom; width: 280px; margin: 0px 0px 0px -140px; left:50%; display:none"
    >
        <div data-v-b505b1e4 class="arrow p-absolute" style="left:95px;"></div>
        <div id="kaomoji" style="height:200px;overflow-y:auto"></div>
    </div>`);

    //绘制颜文字按钮组件
    const kaomojiBtnComponent = $(`<span data-v-39dcacee title="颜文字面板" class="icon-item icon-font icon-pic-biaoqing2-dynamic live-skin-main-text kaomoji"></span>`);

    //添加图标到页面
    (function insertKaomojiIcon() {
        var panel = $(".icon-left-part");
        if (panel.length > 0) {
            panel.append(kaomojiBtnComponent);
        } else {
            requestAnimationFrame(function () {
                insertKaomojiIcon();
            });
        }
    })();
    //添加面板到页面
    (function insertKaomojiPanel() {
        var panel = $("#control-panel-ctnr-box");
        if (panel.length > 0) {
            panel.append(kaomojiPanel);
        } else {
            requestAnimationFrame(function () {
                insertKaomojiPanel();
            });
        }
    })();
    //加载颜文字列表
    (function insertKaomojiSpan() {
        var panel = $("#kaomoji");
        if (panel.length > 0) {
            for (var i = 0; i < kaomojiList.length; i++) {
                var kaomojiSpan = $("<span></span>").attr("class", "list-content-candidate dp-i-block").attr("data-v-14d43f2e", "").text(kaomojiList[i]);
                kaomojiSpan.click(inputToText);
                panel.append(kaomojiSpan);
            }
        } else {
            requestAnimationFrame(function () {
                insertKaomojiSpan();
            });
        }
    })();

    //给组件添加按钮点击事件
    (function setKaomojiBtn() {
        var panel = $("#kaomojiPanel");
        var btn = $(".kaomoji");
        var timer = 0;
        var setTimer = function () {
            timer = setTimeout(hidePanel, 100);
        };
        var clearTimer = function () {
            clearTimeout(timer);
            openPanel();
        };
        var openPanel = function () {
            panel.attr("class", "border-box dialog-ctnr common-popup-wrap top-left a-scale-in-ease v-leave-to");
            panel.css("display", "");
        }
        var hidePanel = function () {
            panel.attr("class", "border-box dialog-ctnr common-popup-wrap top-left a-scale-out v-leave-to");
            panel.css("display", "none");
        }
        if (btn.length > 0) {
            btn.mouseenter(clearTimer);
            btn.mouseleave(setTimer);
            panel.mouseenter(clearTimer);
            panel.mouseleave(setTimer);
        } else {
            requestAnimationFrame(function () {
                setKaomojiBtn();
            });
        }
    })();

    //给颜文字添加点击事件
    function inputToText() {
        var text = $(this).text();
        var textarea = $("textarea.chat-input");
        var con = textarea.val();
        textarea.val(con + text);
        textarea[0].dispatchEvent(new Event('input', { "bubbles": true, "cancelable": true }));
    }
})();