给Bitcron添加Emoji表情

Bitcron默认没有表情，日常评论互动性可能就会稍差一些。一个表情有时候可以将文字表达的更简洁到位。关于表情这一功能，@林木木( target=_blank)大神已经专门写过两篇关于添加表情的文章，我直接借鉴了过来。不过为了减少请求，让网站加载的更快速，本次使用的是Emoji表情，而非图片表情的形式。具体的代码也稍有所区别，效果可评论测试。

准备表情

在模板根目录建立一个emoji.jade文件，文件设置好需要循环输出的表情，原本想通过建立数组，用each语法遍历输出，结果提示“need more than 1 value to unpack”。

- var emoji={"抛媚眼":"😉","大笑":"😀","微笑":"🙂","可爱":"😊"……}
each name,date in emoji
   a.insert_emoji(href="javascript:;",data-emoji=name,title=date)=name

后来改成了混合宏（mixins），传递了两个参数，一个是表情(name)，一个是表情提示(date)。表情具体为哪些，可以自行确定。

mixin emoji(date,name)
   a.insert_emoji(href="javascript:;",data-emoji=name,title=date)=name
.comment-emoji(style="display:none")
   +emoji("抛媚眼","😉")  
   +emoji("大笑","😀")
   ……

调用输出

建议在post.jade文件的+post.comments_as_html( )下面调用emoji.jade

+post.comments_as_html()
include emoji.jade
+h.load("/template/emoji.js")

实时插入

通过js调整下表情元素的位置，只有访客点击评论框输入评论时才会显示，并实现表情的实时点击插入。因为模板加载了tooltip功能，因此选定表情时会自动提示该表情的含义。建议将emoji.js代码加载到模板评论位置，以避免非评论页面后台提示错误。

(function($) {
    $.fn.extend({
        insertAtCaret: function(myValue) {
            var $t = $(this)[0];
            if (document.selection) {
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            } else if ($t.selectionStart || $t.selectionStart == '0') {
                var startPos = $t.selectionStart;
                var endPos = $t.selectionEnd;
                var scrollTop = $t.scrollTop;
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                this.focus();
                $t.selectionStart = startPos + myValue.length;
                $t.selectionEnd = startPos + myValue.length;
                $t.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })
})(jQuery);
$(document).ready(function() {
    var nf=$("#new_comment_form").children().eq(0);
    $(".comment-emoji").insertBefore(nf);
    $('#new_comment_form textarea').click(function() {
        $('.comment-emoji').fadeIn("slow");
    });
});
$(document).on('click', '.insert_emoji',function(event) {
    event.preventDefault();
    var emoji = $(this).data('emoji');
    $('.textarea_box').insertAtCaret(' ' + emoji + ' ');
}); `

调整美化

为了可以更清晰的识别表情，需要利用CSS进行一番调整，通过CSS3transform:scale()属性进行2D缩放，这样能够让选定的表情单独放大确认。

.comment-emoji a {padding: 4px;font-size: 16px;border: none;display: inline-block;-webkit-transition-duration: .3s;transition-duration: .3s;}
.comment-emoji a:hover{-webkit-transform: scale(1.5);-moz-transform: scale(1.5);transform: scale(1.5);}

附件下载

点击下载相关源码:⇩emoji.rar( target=_blank)，解压后按路径丢到模板对应位置，并按照上述第二步进行调用和第四步CSS调整。