更新

typecho/editor/joe.editor.css

@@ -1 +1 @@
-table.typecho-list-table textarea[name='fields[thumb]'],table.typecho-list-table textarea[name='fields[abstract]'],table.typecho-list-table textarea[name='fields[description]'],table.typecho-list-table textarea[name='fields[video]']{width:100%;height:80px}table.typecho-list-table input[name='fields[keywords]']{width:100%}#wmd-button-row{height:auto}#wmd-button-row .wmd-button .icon{width:20px;height:20px;vertical-align:middle;fill:#9b9b9b}.joe_owo__contain{position:relative}.joe_owo__contain *{box-sizing:border-box}.joe_owo__contain .seat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.joe_owo__contain .box{position:absolute;left:0;width:300px;background:#fff;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:4px;overflow:hidden;visibility:hidden;-webkit-transform:scale(0.5);transform:scale(0.5);opacity:0;transition:visibility, 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility, 0.35s, opacity 0.35s, transform 0.35s;transition:visibility, 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_owo__contain .box.show{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_owo__contain .box .scroll{display:none;max-height:200px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;padding:5px}.joe_owo__contain .box .scroll::-webkit-scrollbar{width:8px;height:8px}.joe_owo__contain .box .scroll::-webkit-scrollbar-thumb{border-radius:4px;background:#c0c4cc}.joe_owo__contain .box .scroll::-webkit-scrollbar-track{background:transparent}.joe_owo__contain .box .scroll:nth-child(3) .item{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_owo__contain .box .scroll .item{width:20%;display:inline-block;padding:5px;cursor:pointer;border-radius:4px;transition:background 0.25s;margin:0}.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}.joe_owo__contain .box .scroll .item:hover{background:#f2f6fc}.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid #f2f6fc}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s}.joe_owo__contain .box .bar .item.active{background:#f2f6fc}
+table.typecho-list-table textarea[name='fields[thumb]'],table.typecho-list-table textarea[name='fields[abstract]'],table.typecho-list-table textarea[name='fields[description]'],table.typecho-list-table textarea[name='fields[video]']{width:100%;height:80px}table.typecho-list-table input[name='fields[keywords]']{width:100%}#wmd-button-row{height:auto}#wmd-button-row .wmd-button .icon{width:20px;height:20px;vertical-align:middle;fill:#9b9b9b}.joe_owo__contain{position:relative}.joe_owo__contain *{box-sizing:border-box}.joe_owo__contain .seat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.joe_owo__contain .box{position:absolute;top:30px;left:0;width:300px;background:#fff;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:4px;overflow:hidden;visibility:hidden;-webkit-transform:scale(0.5);transform:scale(0.5);opacity:0;transition:visibility, 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility, 0.35s, opacity 0.35s, transform 0.35s;transition:visibility, 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_owo__contain .box.show{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_owo__contain .box .scroll{display:none;max-height:200px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;padding:5px}.joe_owo__contain .box .scroll::-webkit-scrollbar{width:8px;height:8px}.joe_owo__contain .box .scroll::-webkit-scrollbar-thumb{border-radius:4px;background:#c0c4cc}.joe_owo__contain .box .scroll::-webkit-scrollbar-track{background:transparent}.joe_owo__contain .box .scroll:nth-child(3) .item{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_owo__contain .box .scroll .item{width:20%;display:inline-block;padding:5px;cursor:pointer;border-radius:4px;transition:background 0.25s;margin:0}.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}.joe_owo__contain .box .scroll .item:hover{background:#f2f6fc}.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid #f2f6fc}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s}.joe_owo__contain .box .bar .item.active{background:#f2f6fc}

typecho/editor/joe.editor.js

@@ -164,13 +164,50 @@ $(function () {
         item.on('mousedown', () => $('#text').insertContent(getInsertTextById(_.id)));
         $('#wmd-button-row').append(item);
     });
-
-    $('#wmd-button-row').append(`
-        <li class="wmd-button joe_owo__contain" title="插入表情"></li>
-    `);
-
-    new JoeOwO({
-        target: '#text',
-        seat: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 160c194.4 0 352 157.6 352 352s-157.6 352-352 352S160 706.4 160 512 317.6 160 512 160z m0 64a288 288 0 1 0 0 576 288 288 0 0 0 0-576z m122.08 326.624l61.024 19.264a191.488 191.488 0 0 1-28.736 56.288A191.744 191.744 0 0 1 512 704a191.744 191.744 0 0 1-179.648-124.096l-3.456-10.016 61.024-19.264c4.256 13.44 10.72 26.112 19.136 37.44A127.744 127.744 0 0 0 512 640a127.744 127.744 0 0 0 119.264-81.408l2.816-8zM400 352a48 48 0 1 1 0 96 48 48 0 0 1 0-96z m224 0a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" p-id="2401" fill="#9b9b9b"></path></svg>'
+    $.ajax({
+        url: 'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/json/joe.owo.json',
+        success(res) {
+            let barStr = '';
+            let scrollStr = '';
+            for (let key in res) {
+                barStr += `<div class="item" data-index="${res[key].index}">${key}</div>`;
+                scrollStr += `
+                    <ul class="scroll" data-index="${res[key].index}">
+                        ${res[key].container.map(_ => `<li class="item" data-text="${_.data}">${_.icon}</li>`).join('')} 
+                    </ul>
+                `;
+            }
+            $('#wmd-button-row').append(`
+                <li class="wmd-button joe_owo__contain" title="插入表情">
+                    <div class="seat">
+                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 160c194.4 0 352 157.6 352 352s-157.6 352-352 352S160 706.4 160 512 317.6 160 512 160z m0 64a288 288 0 1 0 0 576 288 288 0 0 0 0-576z m122.08 326.624l61.024 19.264a191.488 191.488 0 0 1-28.736 56.288A191.744 191.744 0 0 1 512 704a191.744 191.744 0 0 1-179.648-124.096l-3.456-10.016 61.024-19.264c4.256 13.44 10.72 26.112 19.136 37.44A127.744 127.744 0 0 0 512 640a127.744 127.744 0 0 0 119.264-81.408l2.816-8zM400 352a48 48 0 1 1 0 96 48 48 0 0 1 0-96z m224 0a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" p-id="2401" fill="#9b9b9b"></path></svg>
+                    </div>
+                    <div class="box">
+                        ${scrollStr}
+                        <div class="bar">${barStr}</div>
+                    </div>
+                </li>
+            `);
+            $(document).on('click', function () {
+                $('.joe_owo__contain .box').removeClass('show');
+            });
+            $('.joe_owo__contain .seat').on('click', function (e) {
+                e.stopPropagation();
+                $(this).siblings('.box').toggleClass('show');
+            });
+            $('.joe_owo__contain .box .bar .item').on('click', function (e) {
+                e.stopPropagation();
+                $(this).addClass('active').siblings().removeClass('active');
+                const scrollIndx = '.joe_owo__contain .box .scroll[data-index="' + $(this).attr('data-index') + '"]';
+                $(scrollIndx).show().siblings('.scroll').hide();
+            });
+            /* 点击表情，向文本框插入内容 */
+            $('.joe_owo__contain .scroll .item').on('click', function () {
+                const text = $(this).attr('data-text');
+                $('#text').insertContent(text);
+            });
+            /* 默认激活第一个 */
+            $('.joe_owo__contain .box .bar .item').first().click();
+        }
     });
 });

typecho/editor/joe.editor.scss

@@ -34,6 +34,7 @@ table.typecho-list-table {
         }
         .box {
             position: absolute;
+            top: 30px;
             left: 0;
             width: 300px;
             background: #fff;

typecho/editor/joe.owo.js

@@ -1,127 +0,0 @@
-function _instanceof(left, right) {
-    if (right != null && typeof Symbol !== 'undefined' && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
-
-function _classCallCheck(instance, Constructor) {
-    if (!_instanceof(instance, Constructor)) {
-        throw new TypeError('Cannot call a class as a function');
-    }
-}
-
-function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ('value' in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
-
-var JoeOwO = /*#__PURE__*/ (function () {
-    'use strict';
-
-    function JoeOwO(options) {
-        var _this = this;
-
-        _classCallCheck(this, JoeOwO);
-
-        var defaultOption = {
-            contain: '.joe_owo__contain',
-            target: '.joe_owo__target',
-            seat: 'OωO',
-            api: 'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/json/joe.owo.json'
-        };
-        this.options = Object.assign(defaultOption, options);
-        $.ajax({
-            url: this.options.api,
-            type: 'get',
-            dataType: 'json',
-            success: function success(res) {
-                return _this.initHtml(res);
-            }
-        });
-    }
-    /* 初始化 */
-
-    _createClass(JoeOwO, [
-        {
-            key: 'initHtml',
-            value: function initHtml(res) {
-                var barStr = '';
-                var scrollStr = '';
-
-                for (var key in res) {
-                    barStr += '<div class="item" data-index="'.concat(res[key].index, '">').concat(key, '</div>');
-                    scrollStr += '\n                <ul class="scroll" data-index="'.concat(res[key].index, '">\n                    ').concat(
-                        res[key].container
-                            .map(function (_) {
-                                return '<li class="item" data-text="'.concat(_.data, '">').concat(_.icon, '</li>');
-                            })
-                            .join(''),
-                        ' \n                </ul>\n            '
-                    );
-                }
-
-                $(this.options.contain).html('\n            <div class="seat">'.concat(this.options.seat, '</div>\n            <div class="box">\n                ').concat(scrollStr, '\n                <div class="bar">').concat(barStr, '</div>\n            </div>\n        '));
-                this.initEvent();
-            }
-        },
-        {
-            key: 'initEvent',
-            value: function initEvent() {
-                /* 容器 */
-                var contain = this.options.contain;
-                var height = $(contain).height();
-                /* 点击页面关闭 */
-
-                $(document).on('click', function () {
-                    $(contain + ' .box').removeClass('show');
-                });
-                /* 点击占位符，显示表情弹窗 */
-
-                var seat = contain + ' .seat';
-                $(seat).on('click', function (e) {
-                    e.stopPropagation();
-                    $(this).siblings('.box').css('top', height).toggleClass('show');
-                });
-                /* 点击tab栏，切换表情类型 */
-
-                var barItem = contain + ' .box .bar .item';
-                $(barItem).on('click', function (e) {
-                    e.stopPropagation();
-                    $(this).addClass('active').siblings().removeClass('active');
-                    var scrollIndx = contain + ' .box .scroll[data-index="' + $(this).attr('data-index') + '"]';
-                    $(scrollIndx).show().siblings('.scroll').hide();
-                });
-                /* 点击表情，向文本框插入内容 */
-
-                var items = contain + ' .scroll .item';
-                var textarea = $(this.options.target);
-                $(items).on('click', function () {
-                    textarea.insertContent($(this).attr('data-text'));
-                });
-                /* 默认激活第一个 */
-                $(barItem).first().click();
-            }
-        }
-    ]);
-
-    return JoeOwO;
-})();
-
-if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
-    module.exports = JoeOwO;
-} else {
-    window.JoeOwO = JoeOwO;
-}