From 54e76c56de22267d2bb9216104731fb136e9141c Mon Sep 17 00:00:00 2001 From: Rice Shower <138862916+riceshowerX@users.noreply.github.com> Date: Fri, 29 Nov 2024 11:50:11 +0800 Subject: [PATCH] Update OwO.min.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DOM操作：原生的 document.querySelector 和 document.querySelectorAll 被 jQuery 的选择器替代，使用 $() 来获取和操作 DOM 元素。 事件绑定：原生 addEventListener 被 jQuery 的 .on() 方法替代，简化了事件绑定。 元素的操作：比如 classList.add、classList.remove 变成了 jQuery 的 .addClass() 和 .removeClass()，style 也使用了 .css() 方法进行简化。 获取数据属性：原生的 getAttribute() 变成了 .data() 方法。 --- js/OwO.min.js | 147 ++++++++++++++++++++------------------------------ 1 file changed, 59 insertions(+), 88 deletions(-) diff --git a/js/OwO.min.js b/js/OwO.min.js index 2befcb2..bd53a0e 100644 --- a/js/OwO.min.js +++ b/js/OwO.min.js @@ -1,77 +1,66 @@ (() => { - // 表情面板的类 class OwO { constructor(option) { - // 默认配置项 const defaultOption = { - logo: 'OwO表情', // Logo文字 - container: document.getElementsByClassName('OwO')[0], // 面板容器 - target: document.getElementsByTagName('textarea')[0], // 输入框目标 - position: 'down', // 面板位置 - width: '100%', // 宽度 - maxHeight: '250px', // 最大高度 - api: '/usr/themes/PureSuck/js/OwO.json' // 表情数据的 API 地址 + logo: 'OwO表情', + container: $('.OwO')[0], // 使用jQuery选择器 + target: $('textarea')[0], // 使用jQuery选择器 + position: 'down', + width: '100%', + maxHeight: '250px', + api: '/usr/themes/PureSuck/js/OwO.json' }; - // 合并用户传入的配置和默认配置 Object.assign(defaultOption, option); this.container = defaultOption.container; this.target = defaultOption.target; - // 如果设置了面板位置为 'up'，则为容器添加相应的样式 if (defaultOption.position === 'up') { - this.container.classList.add('OwO-up'); + $(this.container).addClass('OwO-up'); } - // 发起请求，获取表情数据 this.fetchEmojiData(defaultOption.api).then(data => { this.odata = data; - this.init(defaultOption); // 初始化表情面板 + this.init(defaultOption); }).catch(error => { console.error('加载表情数据失败：', error); }); } - // 获取表情数据 async fetchEmojiData(api) { const cachedData = localStorage.getItem('owoEmojiData'); - if (cachedData) { - return JSON.parse(cachedData); // 如果有缓存，直接返回缓存数据 - } + if (cachedData) return JSON.parse(cachedData); + try { const response = await fetch(api); if (!response.ok) throw new Error(`HTTP 错误！状态：${response.status}`); const data = await response.json(); - localStorage.setItem('owoEmojiData', JSON.stringify(data)); // 缓存数据 + localStorage.setItem('owoEmojiData', JSON.stringify(data)); return data; } catch (err) { throw new Error(err); } } - // 初始化面板 init(option) { this.area = option.target; - this.packages = Object.keys(this.odata); // 获取表情包的所有类型 + this.packages = Object.keys(this.odata); - // 拼接面板的HTML let html = `
`; - // 遍历表情包类型，生成相应的HTML this.packages.forEach(pkg => { const packageData = this.odata[pkg]; - const maxHeight = `${parseInt(option.maxHeight) - 53}px`; // 动态计算最大高度 - const packageWidth = packageData.width || ''; // 获取表情包的宽度 + const maxHeight = `${parseInt(option.maxHeight) - 53}px`; + const packageWidth = packageData.width || ''; - html += ` -
`; - // 将生成的 HTML 插入到容器中 - this.container.innerHTML = html; - - // 绑定Logo点击事件，用于展开/收起表情面板 - this.logo = this.container.querySelector('.OwO-logo'); - this.logo.addEventListener('click', () => this.toggle()); - - // 绑定表情点击事件，将表情插入到输入框 - const body = this.container.querySelector('.OwO-body'); - body.addEventListener('click', (e) => { - const target = e.target.closest('.OwO-item'); - if (target) { - const cursorPos = this.area.selectionEnd; // 获取光标位置 - const textToInsert = target.getAttribute('data-input'); // 获取表情数据 - this.area.value = this.area.value.slice(0, cursorPos) + textToInsert + this.area.value.slice(cursorPos); // 插入表情 - this.area.focus(); - this.toggle(); // 收起面板 - } + $(this.container).html(html); + + this.logo = $(this.container).find('.OwO-logo'); + this.logo.on('click', () => this.toggle()); + + $(this.container).find('.OwO-body').on('click', '.OwO-item', (e) => { + const target = $(e.target); + const cursorPos = this.area.selectionEnd; + const textToInsert = target.data('input'); + this.area.value = this.area.value.slice(0, cursorPos) + textToInsert + this.area.value.slice(cursorPos); + this.area.focus(); + this.toggle(); }); - // 绑定表情包切换事件 - this.packagesEle = this.container.querySelector('.OwO-packages'); - this.packagesEle.addEventListener('click', (e) => { - const target = e.target.closest('li'); - if (target) { - const index = Array.from(this.packagesEle.children).indexOf(target); - this.tab(index); // 切换到对应的表情包 - } + this.packagesEle = $(this.container).find('.OwO-packages'); + this.packagesEle.on('click', 'li', (e) => { + const index = $(e.target).closest('li').index(); + this.tab(index); }); - this.tab(0); // 默认显示第一个表情包 + this.tab(0); } - // 切换表情面板的显示状态 toggle() { - this.container.classList.toggle('OwO-open'); + $(this.container).toggleClass('OwO-open'); } - // 切换当前显示的表情包 tab(index) { - const itemsShow = this.container.querySelector('.OwO-items-show'); - if (itemsShow) itemsShow.classList.remove('OwO-items-show'); // 移除已显示的表情包 - this.container.querySelectorAll('.OwO-items')[index].classList.add('OwO-items-show'); // 显示对应的表情包 - - const packageActive = this.container.querySelector('.OwO-package-active'); - if (packageActive) packageActive.classList.remove('OwO-package-active'); // 移除已激活的表情包选项 - this.packagesEle.children[index].classList.add('OwO-package-active'); // 激活当前选中的表情包选项 - - const activeLink = this.packagesEle.children[index]; - const indicator = this.container.querySelector('.OwO-indicator'); - indicator.style.width = `${activeLink.offsetWidth}px`; // 设置指示器宽度 - indicator.style.left = `${activeLink.offsetLeft}px`; // 设置指示器位置 + $(this.container).find('.OwO-items-show').removeClass('OwO-items-show'); + $(this.container).find('.OwO-items').eq(index).addClass('OwO-items-show'); + + $(this.container).find('.OwO-package-active').removeClass('OwO-package-active'); + this.packagesEle.children().eq(index).addClass('OwO-package-active'); + + const activeLink = this.packagesEle.children().eq(index); + const indicator = $(this.container).find('.OwO-indicator'); + indicator.css({ + width: `${activeLink.outerWidth()}px`, + left: `${activeLink.position().left}px` + }); } } - // 将 OwO 类暴露到全局或模块中 if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { module.exports = OwO; } else { @@ -160,28 +134,25 @@ } })(); -// 初始化评论区的表情面板 function initializeCommentsOwO() { - const container = document.getElementsByClassName('OwO')[0]; // 获取容器 - const target = document.getElementsByClassName('OwO-textarea')[0]; // 获取输入框 + const container = $('.OwO')[0]; + const target = $('.OwO-textarea')[0]; if (container && target) { const OwO_demo = new OwO({ - logo: 'OωO表情', // Logo - container, // 容器 - target, // 输入框 - api: '/usr/themes/PureSuck/js/OwO.json', // 表情数据API - position: 'up', // 面板位置 - width: '100%', // 宽度 - maxHeight: '260px' // 最大高度 + logo: 'OωO表情', + container, + target, + api: '/usr/themes/PureSuck/js/OwO.json', + position: 'up', + width: '100%', + maxHeight: '260px' }); - // 绑定按钮点击事件，打开/关闭表情面板 - const owoButton = document.getElementById('owo-button'); - if (owoButton) { - owoButton.addEventListener('click', () => OwO_demo.toggle()); + const owoButton = $('#owo-button'); + if (owoButton.length) { + owoButton.on('click', () => OwO_demo.toggle()); } } } -// 调用初始化函数 initializeCommentsOwO();