From d7dbf16284ebdc9302d77a829dd9148b7aee763a Mon Sep 17 00:00:00 2001 From: InvisibleFuture Date: Mon, 29 Aug 2022 15:51:05 +0800 Subject: [PATCH] end --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ emoji.js | 39 ++++++++++++++++++++++++--------------- index.html | 2 +- main.js | 22 ++++++++-------------- style.css | 15 +++++++++++++++ 5 files changed, 96 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index a1258a9..a08e8d7 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,50 @@ # emoji Emoji 表情组件 + + +### DEMO + +[DEMO](https://emoji.satori.love) + + +### Install + +```bash +npm install @InvisibleFuture/emoji --save +``` + +```javascript +import Emoji from '@InvisibleFuture/emoji' + +const emoji = new Emoji({ + input: document.querySelector('#input') , // 绑定的输入框元素(非必选) + button: document.querySelector('#button'), // 绑定的开关按钮(非必选) + callback: (data) => console.log('cilck:', data), // 选中 emoji 表情的回调函数(非必选) +}) + +// 打开 emoji 表情选择窗口 +emoji.show() + + +// 关闭 emoji 表情选择窗口 +emoji.hide() + +``` + + +### Dev + +```bash +# clone +git clone git@github.com:InvisibleFuture/emoji.git +cd emoji + +# install +npm install +npm run dev + +# build +npm run build +npm preview + +``` \ No newline at end of file diff --git a/emoji.js b/emoji.js index 17c7f1a..45fea7c 100644 --- a/emoji.js +++ b/emoji.js @@ -1,5 +1,5 @@ export default class Emoji { - constructor({ submit, callback }) { + constructor({ input, button, callback }) { let emoji = '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾' emoji += ' 👋 🤚 🖐 ✋ 🖖 👌 🤌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦵 🦿 🦶 👣 👂 🦻 👃 🫀 🫁 🧠 🦷 🦴 👀 👁 👅 👄 💋 🩸' emoji += ' 👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 🧑‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👨‍🦰 👱‍♀️ 👱 👱‍♂️ 👩‍🦳 🧑‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 👨‍🦲 🧔 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👮‍♀️ 👮 👮‍♂️ 👷‍♀️ 👷 👷‍♂️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵️ 🕵️‍♂️ 👩‍⚕️ 🧑‍⚕️ 👨‍⚕️ 👩‍🌾 🧑‍🌾 👨‍🌾 👩‍🍳 🧑‍🍳 👨‍🍳 👩‍🎓 🧑‍🎓 👨‍🎓 👩‍🎤 🧑‍🎤 👨‍🎤 👩‍🏫 🧑‍🏫 👨‍🏫 👩‍🏭 🧑‍🏭 👨‍🏭 👩‍💻 🧑‍💻 👨‍💻 👩‍💼 🧑‍💼 👨‍💼 👩‍🔧 🧑‍🔧 👨‍🔧 👩‍🔬 🧑‍🔬 👨‍🔬 👩‍🎨 🧑‍🎨 👨‍🎨 👩‍🚒 🧑‍🚒 👨‍🚒 👩‍✈️ 🧑‍✈️ 👨‍✈️ 👩‍🚀 🧑‍🚀 👨‍🚀 👩‍⚖️ 🧑‍⚖️ 👨‍⚖️ 👰‍♀️ 👰 👰‍♂️ 🤵‍♀️ 🤵 🤵‍♂️ 👸 🤴 🥷 🦸‍♀️ 🦸 🦸‍♂️ 🦹‍♀️ 🦹 🦹‍♂️ 🤶 🧑‍🎄 🎅 🧙‍♀️ 🧙 🧙‍♂️ 🧝‍♀️ 🧝 🧝‍♂️ 🧛‍♀️ 🧛 🧛‍♂️ 🧟‍♀️ 🧟 🧟‍♂️ 🧞‍♀️ 🧞 🧞‍♂️ 🧜‍♀️ 🧜 🧜‍♂️ 🧚‍♀️ 🧚 🧚‍♂️ 👼 🤰 🤱 👩‍🍼 🧑‍🍼 👨‍🍼 🙇‍♀️ 🙇 🙇‍♂️ 💁‍♀️ 💁 💁‍♂️ 🙅‍♀️ 🙅 🙅‍♂️ 🙆‍♀️ 🙆 🙆‍♂️ 🙋‍♀️ 🙋 🙋‍♂️ 🧏‍♀️ 🧏 🧏‍♂️ 🤦‍♀️ 🤦 🤦‍♂️ 🤷‍♀️ 🤷 🤷‍♂️ 🙎‍♀️ 🙎 🙎‍♂️ 🙍‍♀️ 🙍 🙍‍♂️ 💇‍♀️ 💇 💇‍♂️ 💆‍♀️ 💆 💆‍♂️ 🧖‍♀️ 🧖 🧖‍♂️ 💅 🤳 💃 🕺 👯‍♀️ 👯 👯‍♂️ 🕴 👩‍🦽 🧑‍🦽 👨‍🦽 👩‍🦼 🧑‍🦼 👨‍🦼 🚶‍♀️ 🚶 🚶‍♂️ 👩‍🦯 🧑‍🦯 👨‍🦯 🧎‍♀️ 🧎 🧎‍♂️ 🏃‍♀️ 🏃 🏃‍♂️ 🧍‍♀️ 🧍 🧍‍♂️ 👭 🧑‍🤝‍🧑 👬 👫 👩‍❤️‍👩 💑 👨‍❤️‍👨 👩‍❤️‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 👩‍❤️‍💋‍👨 👪 👨‍👩‍👦 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👦 👨‍👦‍👦 👨‍👧 👨‍👧‍👦 👨‍👧‍👧 👩‍👦 👩‍👦‍👦 👩‍👧 👩‍👧‍👦 👩‍👧‍👧 🗣 👤 👥 🫂' @@ -15,7 +15,12 @@ export default class Emoji { this.list = emoji.split(/\s+/) this.callback = callback this.element = null - this.submit = submit + this.button = button + this.input = input + + console.log(this.button) + // 绑定按钮事件 + if (button) this.button.onclick = () => this.show() // 窗口被创建时的回调函数 // 窗口被关闭时的回调函数 @@ -23,6 +28,8 @@ export default class Emoji { // 只在使用组件时才创建组件 // 挂载开关按钮 // 挂载输入框(挂载输入框可以精确到光标位置) + // 动画时移除动画以外的交互规则以提高性能 + // 加载时渐显过渡 离开时渐隐过渡 } create_window() { @@ -46,19 +53,26 @@ export default class Emoji { // 表情列表 this.ul = document.createElement("ul") this.ul.classList.add('kaomojilist') - + // 表情单项 this.list.forEach(item => { let li = document.createElement("li") li.innerText = item li.onclick = () => { - //let tc = document.getElementById("message") - //let tclen = tc.value.length; tc.focus() - //if (typeof document.selection != "undefined") { - // document.selection.createRange().text = item - //} else { - // tc.value = tc.value.substr(0, tc.selectionStart) + item + tc.value.substring(tc.selectionStart, tclen); - //} + // 向输入框中添加表情(精确的位置插入) + if (this.input) { + this.input.focus() + if (document.selection) { + document.selection.createRange().text = item + } else if (typeof this.input.selectionStart != "undefined") { + let start = this.input.selectionStart + let end = this.input.selectionEnd + this.input.value = this.input.value.substring(0, start) + item + this.input.value.substring(end) + this.input.selectionStart = start + item.length + this.input.selectionEnd = end + item.length + } + } + // 向回调函数返回表情 this.callback && this.callback(item) this.hide() } @@ -98,9 +112,6 @@ export default class Emoji { ` )) document.head.appendChild(style) - - //var submit = document.querySelector(className) - //submit.parentNode.insertBefore(new button(), submit.nextSibling) } return this.element @@ -128,5 +139,3 @@ export default class Emoji { } } -// 动画时移除动画以外的交互规则以提高性能 -// 加载时渐显过渡 离开时渐隐过渡 diff --git a/index.html b/index.html index 2ad7b1a..694f3d0 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Emoji
diff --git a/main.js b/main.js index 72599a8..9caa108 100644 --- a/main.js +++ b/main.js @@ -1,34 +1,28 @@ import './style.css' -import javascriptLogo from './javascript.svg' import Emoji from './emoji.js' document.querySelector('#app').innerHTML = `
- - - - - - -

Hello Vite!

+

- Click on the Vite logo to learn more + Click the button to test inserting emoji

` -const element = document.querySelector('#counter') const emoji = new Emoji({ + input: document.querySelector('#textaret'), + button: document.querySelector('#counter'), callback: (data) => { console.log(data) } }) -element.addEventListener('click', () => { - emoji.show() -}) +//document.querySelector('#counter').addEventListener('click', () => { +// emoji.show() +//}) -emoji.show() \ No newline at end of file +//emoji.show() diff --git a/style.css b/style.css index 1232080..7d6976f 100644 --- a/style.css +++ b/style.css @@ -95,3 +95,18 @@ button:focus-visible { background-color: #f9f9f9; } } + +#textaret { + display: block; + height: 2.5em; + border: none; + outline: none; + resize: none; + font-size: 3rem; + font-family: inherit; + color: inherit; + background-color: #f9f9f9; + padding: 1em; + border-radius: 8px; + transition: all 0.25s; +}