This commit is contained in:
杜恒 2021-02-20 10:27:47 +08:00
parent 840b1989b2
commit fb1d635e4f
9 changed files with 91 additions and 140 deletions

1
assets/js/joe.extend.js Normal file
View File

@ -0,0 +1 @@
(function(e){e.fn.extend({insertContent:function(t,n){var a=e(this)[0];if(document.selection){this.focus();var s=document.selection.createRange();s.text=t,this.focus(),s.moveStart("character",-i);var c=s.text.length;if(2==arguments.length){var i=a.value.length;s.moveEnd("character",c+n),n<=0?s.moveStart("character",c-2*n-t.length):s.moveStart("character",c-n-t.length),s.select()}}else if(a.selectionStart||"0"==a.selectionStart){var o=a.selectionStart,r=a.selectionEnd,l=a.scrollTop;a.value=a.value.substring(0,o)+t+a.value.substring(r,a.value.length),this.focus(),a.selectionStart=o+t.length,a.selectionEnd=o+t.length,a.scrollTop=l,2==arguments.length&&(a.setSelectionRange(o-n,a.selectionEnd+n),this.focus())}else this.value+=t,this.focus()},selectionRange:function(e,t){var n="",a=this[0];if(void 0===e)n=/input|textarea/i.test(a.tagName)&&/firefox/i.test(navigator.userAgent)?a.value.substring(a.selectionStart,a.selectionEnd):document.selection?document.selection.createRange().text:document.getSelection().toString();else{if(!/input|textarea/.test(a.tagName.toLowerCase()))return!1;if(void 0===t&&(t=e),a.setSelectionRange)a.setSelectionRange(e,t),this.focus();else{var s=a.createTextRange();s.move("character",e),s.moveEnd("character",t-e),s.select()}}return void 0===e?n:this}})})(jQuery);

View File

@ -457,7 +457,48 @@ document.addEventListener('DOMContentLoaded', () => {
/* 初始化表情功能 */
{
if ($('.joe_owo__contain').length > 0 && $('.joe_owo__target').length > 0) {
new JoeOwO();
$.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>
`;
}
$(".joe_owo__contain").html(`
<div class="seat">OωO</div>
<div class="box">
${scrollStr}
<div class="bar">${barStr}</div>
</div>
`)
$(document).on('click', function () {
$('.joe_owo__contain .box').stop().slideUp('fast');
});
$('.joe_owo__contain .seat').on('click', function (e) {
e.stopPropagation();
$(this).siblings('.box').stop().slideToggle('fast')
});
$('.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');
$('.joe_owo__target').insertContent(text);
});
/* 默认激活第一个 */
$('.joe_owo__contain .box .bar .item').first().click();
}
});
}
}
});

View File

@ -1 +0,0 @@
function _instanceof(t,n){return null!=n&&"undefined"!=typeof Symbol&&n[Symbol.hasInstance]?!!n[Symbol.hasInstance](t):t instanceof n}function _classCallCheck(t,n){if(!_instanceof(t,n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,n){for(var e=0;e<n.length;e++){var i=n[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function _createClass(t,n,e){return n&&_defineProperties(t.prototype,n),e&&_defineProperties(t,e),t}var JoeOwO=function(){"use strict";function t(n){var e=this;_classCallCheck(this,t);var i={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(i,n),$.ajax({url:this.options.api,type:"get",dataType:"json",success:function(t){return e.initHtml(t)}})}return _createClass(t,[{key:"initHtml",value:function(t){var n="",e="";for(var i in t)n+='<div class="item" data-index="'.concat(t[i].index,'">').concat(i,"</div>"),e+='\n <ul class="scroll" data-index="'.concat(t[i].index,'">\n ').concat(t[i].container.map(function(t){return'<li class="item" data-text="'.concat(t.data,'">').concat(t.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(e,'\n <div class="bar">').concat(n,"</div>\n </div>\n ")),this.initEvent()}},{key:"initEvent",value:function(){var t=this.options.contain;$(document).on("click",function(){var n=t+" .box";$(n).stop().slideUp("fast")});var n=t+" .seat";$(n).on("click",function(t){t.stopPropagation(),$(this).siblings(".box").stop().slideToggle("fast")});var e=t+" .box .bar .item";$(e).on("click",function(n){n.stopPropagation(),$(this).addClass("active").siblings().removeClass("active");var e=t+' .box .scroll[data-index="'+$(this).attr("data-index")+'"]';$(e).show().siblings(".scroll").hide()});var i=t+" .scroll .item",o=$(this.options.target)[0];$(i).on("click",function(){var t=$(this).attr("data-text"),n=o.selectionEnd,e=o.value;o.value=e.slice(0,n)+t+e.slice(n),o.focus()}),$(e).first().click()}}]),t}();"undefined"!=typeof module&&void 0!==module.exports?module.exports=JoeOwO:window.JoeOwO=JoeOwO;

View File

@ -11,7 +11,6 @@ class Editor
{
echo "<link rel='stylesheet' href='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.css' . "'>";
echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.extend.js' . "'></script>";
echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.owo.js' . "'></script>";
echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.js' . "'></script>";
}
}

View File

@ -66,7 +66,7 @@
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/sketchpad/joe.sketchpad.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/qmsg/qmsg.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/js/joe.owo.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.extend.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.global.js'); ?>"></script>
<!-- 异步加载的JS -->
<script async src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/smooth/joe.smooth.js"></script>

View File

@ -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}

View File

@ -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();
}
});
});

View File

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

View File

@ -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;
}