end

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
+
+```

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() {
@@ -52,13 +59,20 @@ export default class Emoji {
       let li = document.createElement("li")
       li.innerText = item
       li.onclick = () => {
-        //let tc = document.getElementById("message")
+        // 向输入框中添加表情(精确的位置插入)
-        //let tclen = tc.value.length; tc.focus()
+        if (this.input) {
-        //if (typeof document.selection != "undefined") {
+          this.input.focus()
-        //  document.selection.createRange().text = item
+          if (document.selection) {
-        //} else {
+            document.selection.createRange().text = item
-        //  tc.value = tc.value.substr(0, tc.selectionStart) + item + tc.value.substring(tc.selectionStart, tclen);
+          } 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 {
   }
 }
 
-// 动画时移除动画以外的交互规则以提高性能
-// 加载时渐显过渡 离开时渐隐过渡

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Emoji</title>
   </head>
   <body>
     <div id="app"></div>

main.js

@@ -1,34 +1,28 @@
 import './style.css'
-import javascriptLogo from './javascript.svg'
 import Emoji from './emoji.js'
 
 document.querySelector('#app').innerHTML = `
   <div>
-    <a href="https://vitejs.dev" target="_blank">
+    <textarea id="textaret">🥳hello world! </textarea>
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-    </a>
-    <h1>Hello Vite!</h1>
     <div class="card">
       <button id="counter" type="button">click here</button>
     </div>
     <p class="read-the-docs">
-      Click on the Vite logo to learn more
+      Click the button to test inserting emoji
     </p>
   </div>
 `
 
-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', () => {
+//document.querySelector('#counter').addEventListener('click', () => {
-  emoji.show()
+//  emoji.show()
-})
+//})
 
-emoji.show()
+//emoji.show()

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