V2EX Emoticon

让V2EX 支持微博表情
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         V2EX Emoticon
// @version      0.1
// @description  让V2EX 支持微博表情
// @author       LawSiki
// @namespace    https://github.com/CrazyMelody/v2ex_emoticon
// @match        https://www.v2ex.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=v2ex.com

// ==/UserScript==

(function() {
    'use strict';
    var emoticonMapStr = '{"2021":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a8/2021_newyear_org.png","春游家族":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/2021_YoungFamily_org.png","生而为赢":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/f7/2021_BorntoWin_org.png","调休":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/2d/2021_tiaoxiu_org.png","放假":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6b/2021_fangjia_org.png","迷雾剧场":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/cb/2021_lighton_org.png","玉兔":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/7b/2021_yutu_org.png","航天员":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/53/2021_yuhangyuan_org.png","开学季":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/72/2021_kaixueji_org.png","赢牛奶":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/9c/2021_yingniunai_org.png","抱一抱":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/2020_hug_org.png","小红花":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/fe/2020_redflower_org.png","微笑":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png","可爱":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png","太开心":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/2018new_taikaixin_org.png","鼓掌":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/2018new_guzhang_org.png","嘻嘻":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/33/2018new_xixi_org.png","哈哈":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/2018new_haha_org.png","笑cry":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/2018new_xiaoku_thumb.png","挤眼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/43/2018new_jiyan_org.png","馋嘴":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/fa/2018new_chanzui_org.png","黑线":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a3/2018new_heixian_org.png","汗":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/28/2018new_han_org.png","挖鼻":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/9a/2018new_wabi_thumb.png","哼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/7c/2018new_heng_org.png","怒":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/f6/2018new_nu_org.png","委屈":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a5/2018new_weiqu_org.png","可怜":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/96/2018new_kelian_org.png","失望":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/aa/2018new_shiwang_org.png","悲伤":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/ee/2018new_beishang_org.png","泪":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/2018new_leimu_org.png","允悲":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/83/2018new_kuxiao_org.png","害羞":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/c1/2018new_haixiu_org.png","污":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/10/2018new_wu_org.png","爱你":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/f6/2018new_aini_org.png","亲亲":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/2018new_qinqin_org.png","色":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/2018new_huaxin_org.png","憧憬":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/c9/2018new_chongjing_org.png","舔屏":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/3e/2018new_tianping_org.png","坏笑":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/4d/2018new_huaixiao_org.png","阴险":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/9e/2018new_yinxian_org.png","笑而不语":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/2d/2018new_xiaoerbuyu_org.png","偷笑":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/2018new_touxiao_org.png","酷":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/c4/2018new_ku_org.png","并不简单":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/aa/2018new_bingbujiandan_org.png","思考":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/30/2018new_sikao_org.png","疑问":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/b8/2018new_ningwen_org.png","费解":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/2a/2018new_wenhao_org.png","晕":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/07/2018new_yun_org.png","衰":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a2/2018new_shuai_org.png","骷髅":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a1/2018new_kulou_org.png","嘘":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/b0/2018new_xu_org.png","闭嘴":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/62/2018new_bizui_org.png","傻眼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/dd/2018new_shayan_org.png","吃惊":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/49/2018new_chijing_org.png","吐":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/08/2018new_tu_org.png","感冒":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/2018new_kouzhao_org.png","生病":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/3b/2018new_shengbing_org.png","拜拜":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/fd/2018new_baibai_org.png","鄙视":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/da/2018new_bishi_org.png","白眼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/ef/2018new_landelini_org.png","左哼哼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/43/2018new_zuohengheng_org.png","右哼哼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/c1/2018new_youhengheng_org.png","抓狂":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/17/2018new_zhuakuang_org.png","怒骂":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/87/2018new_zhouma_org.png","打脸":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/cb/2018new_dalian_org.png","顶":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/ae/2018new_ding_org.png","互粉":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/86/2018new_hufen02_org.png","钱":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a2/2018new_qian_org.png","哈欠":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/55/2018new_dahaqian_org.png","困":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/2018new_kun_org.png","睡":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/e2/2018new_shuijiao_thumb.png","求饶":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/aa/moren_qiurao02_org.png","吃瓜":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/01/2018new_chigua_org.png","打call":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/39/moren_dacall02_org.png","awsl":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/moren_awsl02_org.png","苦涩":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/7e/2021_bitter_org.png","裂开":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/1b/202011_liekai_org.png","牛年大吉":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/2021_niuniandaji_org.png","牛大发":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/4b/2021_niudafa_org.png","牛哞哞":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/30/2021_cattle_org.png","doge":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/a1/2018new_doge02_org.png","二哈":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/22/2018new_erha_org.png","喵喵":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/7b/2018new_miaomiao_org.png","酸":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/b3/hot_wosuanle_org.png","中国赞":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/2018new_zhongguozan_org.png","抱抱":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/42/2018new_baobao_org.png","摊手":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/62/2018new_tanshou_org.png","跪了":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/75/2018new_gui_org.png","鲜花":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/d4/2018new_xianhua_org.png","红灯笼":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/e8/2021_lantern_org.png","烟花":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/96/2021_fireworks_org.png","雪花":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/13/yunying2020_snowflakes_org.png","迎福运":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/db/2021_fuzizheng_org.png","福到了":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/5f/2021_fudaole_org.png","丘比特":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/45/2021_qiubite_org.png","单身狗":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/20/2021_alongdog_org.png","小丑":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6f/2021_xiaochou_org.png","杰瑞":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/da/2021_jerry_org.png","汤姆":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/31/2021_tom_org.png","奶瓶":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/8c/2021_naiping_org.png","暖一下":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/bb/2021_nuanyixia_org.png","牛轰轰拥抱":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/74/2021_niuhongbao_org.png","牛牛哒":"https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/97/2021_niuniuda_org.png"}';
    var css = ' #emoticon_wrapper {    background-color: white;    border: 1px solid rgb(233 233 233);    border-radius: 5px;    min-height: 6.25rem;    height: 300px;    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);    position: absolute;    }        .emoticon_facebox {    height: 266px;    width: 410px;    margin: 12px 2px 12px 12px;    padding: 0 10px 0 0;    overflow-x: hidden;    overflow-y: auto;    text-align: left;    }    .woo-box-item-inlineBlock {    display: inline-block;    }        .hover_effect :hover {    background-color: rgb(247 98 42 / 60%);    border-radius: 100%;    }        .u-col-12 [class*="box-item"],    .u-col-12 [data-type="w-box-item"] {    width: 8.333%;    }    .emoticon_tab .wbpro-iconbed {    width: 38px;    height: 38px;    }        .wbpro-iconbed {    position: relative;    width: 34px;    height: 34px;    cursor: pointer;    line-height: 0;    }    .woo-box-justifyCenter {    -webkit-box-pack: center;    -ms-flex-pack: center;    justify-content: center;    }    .woo-box-alignCenter {    align-items: center;    -webkit-box-align: center;    -ms-flex-align: center;    }    .woo-box-flex {    display: -webkit-box;    display: -ms-flexbox;    display: flex;    }        .emoticon_img {    width: 24px;    height: 24px;    }    img.emoticon_img_text {    width: 20px;    height: 20px;    padding: 0px 2px;}';
    document.$emoticonObj = {}
    // 将数据挂载到document上,方便后面获取
    document.$emoticonObj.map = JSON.parse(emoticonMapStr);

    // 插入CSS
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    document.body.appendChild(style);

     // 创建单个表情元素
     function createEmoticon(alt,src,is_content){
        var inline_block = document.createElement('div');
        var img_div = document.createElement('div');
        if(is_content){
            inline_block.setAttribute('class','woo-box-item-inlineBlock');
        }else{
            inline_block.setAttribute('class','woo-box-item-inlineBlock hover_effect');
        }
        img_div.setAttribute('class','wbpro-iconbed woo-box-flex woo-box-alignCenter woo-box-justifyCenter');
        img_div.setAttribute('alt',alt);
        img_div.addEventListener('click',function(event){
            reply_content.value = reply_content.value + "["+this.getAttribute('alt')+"]"
        });
        var img = document.createElement('img');
        img.setAttribute('class','emoticon_img');
        img.setAttribute('alt',alt);
        img.setAttribute('src',src);

        img_div.appendChild(img);
        inline_block.appendChild(img_div);
        return inline_block;

    }

    // 生成回复框的表情区域
    var upload_btn = document.querySelector('#reply-box > div.cell.flex-one-row > div.fr > a');
    if(upload_btn!=null){
        var wrapper = document.createElement('div');
        wrapper.id = 'emoticon_wrapper';
    
        var emoticon_facebox = document.createElement('div');
        emoticon_facebox.setAttribute('class','emoticon_facebox');
    
        wrapper.appendChild(emoticon_facebox);
        wrapper.style.display="none";
    
        var emoticon_a = document.createElement('a');
        emoticon_a.href='javascript:void(0);'
        emoticon_a.appendChild(document.createTextNode("表情"));
        emoticon_a.addEventListener('click',function(event){
            if(wrapper.style.display==''){
                wrapper.style.display = 'none';
            }else{
                wrapper.style.display = '';
            }
        })
        upload_btn.parentNode.insertBefore(emoticon_a,upload_btn);
        upload_btn.parentNode.appendChild(wrapper);

        for(let key in document.$emoticonObj.map){
            emoticon_facebox.appendChild(createEmoticon(key,document.$emoticonObj.map[key]));
        }
    }


    document.$emoticonObj.render = function(){
        var contents = document.querySelectorAll('.reply_content,.markdown_body')
        contents.forEach(content=>{
            let html = content.innerHTML;
            var it = html.matchAll(/\[(.+?)\]/g);
            let match;
            while (!(match=it.next()).done) {
                let text = match.value[0]
                let alt = match.value[1];
                console.log(text);
                let src = document.$emoticonObj.map[alt.replace(' ','')];
                if(src==null) continue;

                let tempEle = document.createElement('div');
                let img = document.createElement('img');
                img.setAttribute('class','emoticon_img_text');
                img.setAttribute('alt',alt);
                img.setAttribute('title',alt);
                img.setAttribute('src',src);
                tempEle.appendChild(img);
                content.innerHTML = content.innerHTML.replace(text,tempEle.innerHTML);
                tempEle = null;
            }
        })
    }
    document.$emoticonObj.render();


    // 发布页面,点击预览后,预览区域内重新渲染表情
    const main = document.getElementById('Main');
    if(main){
        main.addEventListener('DOMNodeInserted', function(e){
            if(e.relatedNode.id=='topic_preview'){
                document.$emoticonObj.render();
            }
        }, false);
    }

})();