85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
|
class JoeOwO {
|
|||
|
|
constructor(options) {
|
|||
|
|
const defaultOption = {
|
|||
|
|
contain: '.joe_owo__contain',
|
|||
|
|
target: '.joe_owo__target',
|
|||
|
|
seat: 'OωO',
|
|||
|
|
api: '/usr/themes/Joe/assets/json/joe.owo.json'
|
|||
|
|
};
|
|||
|
|
this.options = Object.assign(defaultOption, options);
|
|||
|
|
$.ajax({
|
|||
|
|
url: this.options.api,
|
|||
|
|
type: 'get',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: res => this.initHtml(res)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/* 初始化 */
|
|||
|
|
initHtml(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>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
$(this.options.contain).html(`
|
|||
|
|
<div class="seat">${this.options.seat}</div>
|
|||
|
|
<div class="box">
|
|||
|
|
${scrollStr}
|
|||
|
|
<div class="bar">${barStr}</div>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
|
|||
|
|
this.initEvent();
|
|||
|
|
}
|
|||
|
|
initEvent() {
|
|||
|
|
/* 容器 */
|
|||
|
|
const contain = this.options.contain;
|
|||
|
|
const height = $(contain).height();
|
|||
|
|
|
|||
|
|
/* 点击页面关闭 */
|
|||
|
|
$(document).on('click', function () {
|
|||
|
|
$(contain + ' .box').removeClass('show');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* 点击占位符，显示表情弹窗 */
|
|||
|
|
const seat = contain + ' .seat';
|
|||
|
|
$(seat).on('click', function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
$(this).siblings('.box').css('top', height).toggleClass('show');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* 点击tab栏，切换表情类型 */
|
|||
|
|
const barItem = contain + ' .box .bar .item';
|
|||
|
|
$(barItem).on('click', function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|||
|
|
const scrollIndx = contain + ' .box .scroll[data-index="' + $(this).attr('data-index') + '"]';
|
|||
|
|
$(scrollIndx).show().siblings('.scroll').hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* 点击表情，向文本框插入内容 */
|
|||
|
|
const items = contain + ' .scroll .item';
|
|||
|
|
const textarea = $(this.options.target)[0];
|
|||
|
|
$(items).on('click', function () {
|
|||
|
|
const text = $(this).attr('data-text');
|
|||
|
|
const cursorPos = textarea.selectionEnd;
|
|||
|
|
const areaValue = textarea.value;
|
|||
|
|
textarea.value = areaValue.slice(0, cursorPos) + text + areaValue.slice(cursorPos);
|
|||
|
|
textarea.focus();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* 默认激活第一个 */
|
|||
|
|
$(barItem).first().click();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
|||
|
|
module.exports = JoeOwO;
|
|||
|
|
} else {
|
|||
|
|
window.JoeOwO = JoeOwO;
|
|||
|
|
}
|