133 lines
17 KiB
JavaScript
133 lines
17 KiB
JavaScript
export default class Emoji {
|
||
constructor({ input, callback, onSubmit, onShow, onHide }) {
|
||
this.event = { onShow, onHide, onSubmit }
|
||
let emoji = '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾'
|
||
emoji += ' 👋 🤚 🖐 ✋ 🖖 👌 🤌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦵 🦿 🦶 👣 👂 🦻 👃 🫀 🫁 🧠 🦷 🦴 👀 👁 👅 👄 💋 🩸'
|
||
emoji += ' 👶 👧 🧒 👦 👩 🧑 👨 👩🦱 🧑🦱 👨🦱 👩🦰 🧑🦰 👨🦰 👱♀️ 👱 👱♂️ 👩🦳 🧑🦳 👨🦳 👩🦲 🧑🦲 👨🦲 🧔 👵 🧓 👴 👲 👳♀️ 👳 👳♂️ 🧕 👮♀️ 👮 👮♂️ 👷♀️ 👷 👷♂️ 💂♀️ 💂 💂♂️ 🕵️♀️ 🕵️ 🕵️♂️ 👩⚕️ 🧑⚕️ 👨⚕️ 👩🌾 🧑🌾 👨🌾 👩🍳 🧑🍳 👨🍳 👩🎓 🧑🎓 👨🎓 👩🎤 🧑🎤 👨🎤 👩🏫 🧑🏫 👨🏫 👩🏭 🧑🏭 👨🏭 👩💻 🧑💻 👨💻 👩💼 🧑💼 👨💼 👩🔧 🧑🔧 👨🔧 👩🔬 🧑🔬 👨🔬 👩🎨 🧑🎨 👨🎨 👩🚒 🧑🚒 👨🚒 👩✈️ 🧑✈️ 👨✈️ 👩🚀 🧑🚀 👨🚀 👩⚖️ 🧑⚖️ 👨⚖️ 👰♀️ 👰 👰♂️ 🤵♀️ 🤵 🤵♂️ 👸 🤴 🥷 🦸♀️ 🦸 🦸♂️ 🦹♀️ 🦹 🦹♂️ 🤶 🧑🎄 🎅 🧙♀️ 🧙 🧙♂️ 🧝♀️ 🧝 🧝♂️ 🧛♀️ 🧛 🧛♂️ 🧟♀️ 🧟 🧟♂️ 🧞♀️ 🧞 🧞♂️ 🧜♀️ 🧜 🧜♂️ 🧚♀️ 🧚 🧚♂️ 👼 🤰 🤱 👩🍼 🧑🍼 👨🍼 🙇♀️ 🙇 🙇♂️ 💁♀️ 💁 💁♂️ 🙅♀️ 🙅 🙅♂️ 🙆♀️ 🙆 🙆♂️ 🙋♀️ 🙋 🙋♂️ 🧏♀️ 🧏 🧏♂️ 🤦♀️ 🤦 🤦♂️ 🤷♀️ 🤷 🤷♂️ 🙎♀️ 🙎 🙎♂️ 🙍♀️ 🙍 🙍♂️ 💇♀️ 💇 💇♂️ 💆♀️ 💆 💆♂️ 🧖♀️ 🧖 🧖♂️ 💅 🤳 💃 🕺 👯♀️ 👯 👯♂️ 🕴 👩🦽 🧑🦽 👨🦽 👩🦼 🧑🦼 👨🦼 🚶♀️ 🚶 🚶♂️ 👩🦯 🧑🦯 👨🦯 🧎♀️ 🧎 🧎♂️ 🏃♀️ 🏃 🏃♂️ 🧍♀️ 🧍 🧍♂️ 👭 🧑🤝🧑 👬 👫 👩❤️👩 💑 👨❤️👨 👩❤️👨 👩❤️💋👩 💏 👨❤️💋👨 👩❤️💋👨 👪 👨👩👦 👨👩👧 👨👩👧👦 👨👩👦👦 👨👩👧👧 👨👨👦 👨👨👧 👨👨👧👦 👨👨👦👦 👨👨👧👧 👩👩👦 👩👩👧 👩👩👧👦 👩👩👦👦 👩👩👧👧 👨👦 👨👦👦 👨👧 👨👧👦 👨👧👧 👩👦 👩👦👦 👩👧 👩👧👦 👩👧👧 🗣 👤 👥 🫂'
|
||
emoji += ' 🧳 🌂 ☂️ 🧵 🪡 🪢 🧶 👓 🕶 🥽 🥼 🦺 👔 👕 👖 🧣 🧤 🧥 🧦 👗 👘 🥻 🩴 🩱 🩲 🩳 👙 👚 👛 👜 👝 🎒 👞 👟 🥾 🥿 👠 👡 🩰 👢 👑 👒 🎩 🎓 🧢 ⛑ 🪖 💄 💍 💼'
|
||
emoji += ' 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐻❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🪱 🐛 🦋 🐌 🐞 🐜 🪰 🪲 🪳 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🦣 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🦬 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕🦺 🐈 🐈⬛ 🪶 🐓 🦃 🦤 🦚 🦜 🦢 🦩 🕊 🐇 🦝 🦨 🦡 🦫 🦦 🦥 🐁 🐀 🐿 🦔 🐾 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🪵 🌱 🌿 ☘️ 🍀 🎍 🪴 🎋 🍃 🍂 🍁 🍄 🐚 🪨 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌜 🌚 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌎 🌍 🌏 🪐 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ 🌤 ⛅️ 🌥 ☁️ 🌦 🌧 ⛈ 🌩 🌨 ❄️ ☃️ ⛄️ 🌬 💨 💧 💦 ☔️ ☂️ 🌊 🌫'
|
||
emoji += ' 🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🫑 🌽 🥕 🫒 🧄 🧅 🥔 🍠 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🫓 🥪 🥙 🧆 🌮 🌯 🫔 🥗 🥘 🫕 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🍥 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🍼 🫖 ☕️ 🍵 🧃 🥤 🧋 🍶 🍺 🍻 🥂 🍷 🥃 🍸 🍹 🧉 🍾 🧊 🥄 🍴 🍽 🥣 🥡 🥢 🧂'
|
||
emoji += ' ⚽️ 🏀 🏈 ⚾️ 🥎 🎾 🏐 🏉 🥏 🎱 🪀 🏓 🏸 🏒 🏑 🥍 🏏 🪃 🥅 ⛳️ 🪁 🏹 🎣 🤿 🥊 🥋 🎽 🛹 🛼 🛷 ⛸ 🥌 🎿 ⛷ 🏂 🪂 🏋️♀️ 🏋️ 🏋️♂️ 🤼♀️ 🤼 🤼♂️ 🤸♀️ 🤸 🤸♂️ ⛹️♀️ ⛹️ ⛹️♂️ 🤺 🤾♀️ 🤾 🤾♂️ 🏌️♀️ 🏌️ 🏌️♂️ 🏇 🧘♀️ 🧘 🧘♂️ 🏄♀️ 🏄 🏄♂️ 🏊♀️ 🏊 🏊♂️ 🤽♀️ 🤽 🤽♂️ 🚣♀️ 🚣 🚣♂️ 🧗♀️ 🧗 🧗♂️ 🚵♀️ 🚵 🚵♂️ 🚴♀️ 🚴 🚴♂️ 🏆 🥇 🥈 🥉 🏅 🎖 🏵 🎗 🎫 🎟 🎪 🤹 🤹♂️ 🤹♀️ 🎭 🩰 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🪘 🎷 🎺 🪗 🎸 🪕 🎻 🎲 ♟ 🎯 🎳 🎮 🎰 🧩'
|
||
emoji += ' 🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🛻 🚚 🚛 🚜 🦯 🦽 🦼 🛴 🚲 🛵 🏍 🛺 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚞 🚝 🚄 🚅 🚈 🚂 🚆 🚇 🚊 🚉 ✈️ 🛫 🛬 🛩 💺 🛰 🚀 🛸 🚁 🛶 ⛵️ 🚤 🛥 🛳 ⛴ 🚢 ⚓️ 🪝 ⛽️ 🚧 🚦 🚥 🚏 🗺 🗿 🗽 🗼 🏰 🏯 🏟 🎡 🎢 🎠 ⛲️ ⛱ 🏖 🏝 🏜 🌋 ⛰ 🏔 🗻 🏕 ⛺️ 🛖 🏠 🏡 🏘 🏚 🏗 🏭 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪️ 🕌 🕍 🛕 🕋 ⛩ 🛤 🛣 🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁'
|
||
emoji += ' ⌚️ 📱 📲 💻 ⌨️ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎️ 📟 📠 📺 📻 🎙 🎚 🎛 🧭 ⏱ ⏲ ⏰ 🕰 ⌛️ ⏳ 📡 🔋 🔌 💡 🔦 🕯 🪔 🧯 🛢 💸 💵 💴 💶 💷 🪙 💰 💳 💎 ⚖️ 🪜 🧰 🪛 🔧 🔨 ⚒ 🛠 ⛏ 🪚 🔩 ⚙️ 🪤 🧱 ⛓ 🧲 🔫 💣 🧨 🪓 🔪 🗡 ⚔️ 🛡 🚬 ⚰️ 🪦 ⚱️ 🏺 🔮 📿 🧿 💈 ⚗️ 🔭 🔬 🕳 🩹 🩺 💊 💉 🩸 🧬 🦠 🧫 🧪 🌡 🧹 🪠 🧺 🧻 🚽 🚰 🚿 🛁 🛀 🧼 🪥 🪒 🧽 🪣 🧴 🛎 🔑 🗝 🚪 🪑 🛋 🛏 🛌 🧸 🪆 🖼 🪞 🪟 🛍 🛒 🎁 🎈 🎏 🎀 🪄 🪅 🎊 🎉 🎎 🏮 🎐 🧧 ✉️ 📩 📨 📧 💌 📥 📤 📦 🏷 🪧 📪 📫 📬 📭 📮 📯 📜 📃 📄 📑 🧾 📊 📈 📉 🗒 🗓 📆 📅 🗑 📇 🗃 🗳 🗄 📋 📁 📂 🗂 🗞 📰 📓 📔 📒 📕 📗 📘 📙 📚 📖 🔖 🧷 🔗 📎 🖇 📐 📏 🧮 📌 📍 ✂️ 🖊 🖋 ✒️ 🖌 🖍 📝 ✏️ 🔍 🔎 🔏 🔐 🔒 🔓'
|
||
emoji += ' ❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔 ❣️ 💕 💞 💓 💗 💖 💘 💝 💟 ☮️ ✝️ ☪️ 🕉 ☸️ ✡️ 🔯 🕎 ☯️ ☦️ 🛐 ⛎ ♈️ ♉️ ♊️ ♋️ ♌️ ♍️ ♎️ ♏️ ♐️ ♑️ ♒️ ♓️ 🆔 ⚛️ 🉑 ☢️ ☣️ 📴 📳 🈶 🈚️ 🈸 🈺 🈷️ ✴️ 🆚 💮 🉐 ㊙️ ㊗️ 🈴 🈵 🈹 🈲 🅰️ 🅱️ 🆎 🆑 🅾️ 🆘 ❌ ⭕️ 🛑 ⛔️ 📛 🚫 💯 💢 ♨️ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗️ ❕ ❓ ❔ ‼️ ⁉️ 🔅 🔆 〽️ ⚠️ 🚸 🔱 ⚜️ 🔰 ♻️ ✅ 🈯️ 💹 ❇️ ✳️ ❎ 🌐 💠 Ⓜ️ 🌀 💤 🏧 🚾 ♿️ 🅿️ 🛗 🈳 🈂️ 🛂 🛃 🛄 🛅 🚹 🚺 🚼 ⚧ 🚻 🚮 🎦 📶 🈁 🔣 ℹ️ 🔤 🔡 🔠 🆖 🆗 🆙 🆒 🆕 🆓 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔢 #️⃣ *️⃣ ⏏️ ▶️ ⏸ ⏯ ⏹ ⏺ ⏭ ⏮ ⏩ ⏪ ⏫ ⏬ ◀️ 🔼 🔽 ➡️ ⬅️ ⬆️ ⬇️ ↗️ ↘️ ↙️ ↖️ ↕️ ↔️ ↪️ ↩️ ⤴️ ⤵️ 🔀 🔁 🔂 🔄 🔃 🎵 🎶 ➕ ➖ ➗ ✖️ ♾ 💲 💱 ™️ ©️ ®️ 〰️ ➰ ➿ 🔚 🔙 🔛 🔝 🔜 ✔️ ☑️ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 ⚫️ ⚪️ 🟤 🔺 🔻 🔸 🔹 🔶 🔷 🔳 🔲 ▪️ ▫️ ◾️ ◽️ ◼️ ◻️ 🟥 🟧 🟨 🟩 🟦 🟪 ⬛️ ⬜️ 🟫 🔈 🔇 🔉 🔊 🔔 🔕 📣 📢 👁🗨 💬 💭 🗯 ♠️ ♣️ ♥️ ♦️ 🃏 🎴 🀄️ 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧'
|
||
emoji += ' 🏳️ 🏴 🏁 🚩 🏳️🌈 🏳️⚧️ 🏴☠️ 🇦🇫 🇦🇽 🇦🇱 🇩🇿 🇦🇸 🇦🇩 🇦🇴 🇦🇮 🇦🇶 🇦🇬 🇦🇷 🇦🇲 🇦🇼 🇦🇺 🇦🇹 🇦🇿 🇧🇸 🇧🇭 🇧🇩 🇧🇧 🇧🇾 🇧🇪 🇧🇿 🇧🇯 🇧🇲 🇧🇹 🇧🇴 🇧🇦 🇧🇼 🇧🇷 🇮🇴 🇻🇬 🇧🇳 🇧🇬 🇧🇫 🇧🇮 🇰🇭 🇨🇲 🇨🇦 🇮🇨 🇨🇻 🇧🇶 🇰🇾 🇨🇫 🇹🇩 🇨🇱 🇨🇳 🇨🇽 🇨🇨 🇨🇴 🇰🇲 🇨🇬 🇨🇩 🇨🇰 🇨🇷 🇨🇮 🇭🇷 🇨🇺 🇨🇼 🇨🇾 🇨🇿 🇩🇰 🇩🇯 🇩🇲 🇩🇴 🇪🇨 🇪🇬 🇸🇻 🇬🇶 🇪🇷 🇪🇪 🇪🇹 🇪🇺 🇫🇰 🇫🇴 🇫🇯 🇫🇮 🇫🇷 🇬🇫 🇵🇫 🇹🇫 🇬🇦 🇬🇲 🇬🇪 🇩🇪 🇬🇭 🇬🇮 🇬🇷 🇬🇱 🇬🇩 🇬🇵 🇬🇺 🇬🇹 🇬🇬 🇬🇳 🇬🇼 🇬🇾 🇭🇹 🇭🇳 🇭🇰 🇭🇺 🇮🇸 🇮🇳 🇮🇩 🇮🇷 🇮🇶 🇮🇪 🇮🇲 🇮🇱 🇮🇹 🇯🇲 🇯🇵 🎌 🇯🇪 🇯🇴 🇰🇿 🇰🇪 🇰🇮 🇽🇰 🇰🇼 🇰🇬 🇱🇦 🇱🇻 🇱🇧 🇱🇸 🇱🇷 🇱🇾 🇱🇮 🇱🇹 🇱🇺 🇲🇴 🇲🇰 🇲🇬 🇲🇼 🇲🇾 🇲🇻 🇲🇱 🇲🇹 🇲🇭 🇲🇶 🇲🇷 🇲🇺 🇾🇹 🇲🇽 🇫🇲 🇲🇩 🇲🇨 🇲🇳 🇲🇪 🇲🇸 🇲🇦 🇲🇿 🇲🇲 🇳🇦 🇳🇷 🇳🇵 🇳🇱 🇳🇨 🇳🇿 🇳🇮 🇳🇪 🇳🇬 🇳🇺 🇳🇫 🇰🇵 🇲🇵 🇳🇴 🇴🇲 🇵🇰 🇵🇼 🇵🇸 🇵🇦 🇵🇬 🇵🇾 🇵🇪 🇵🇭 🇵🇳 🇵🇱 🇵🇹 🇵🇷 🇶🇦 🇷🇪 🇷🇴 🇷🇺 🇷🇼 🇼🇸 🇸🇲 🇸🇦 🇸🇳 🇷🇸 🇸🇨 🇸🇱 🇸🇬 🇸🇽 🇸🇰 🇸🇮 🇬🇸 🇸🇧 🇸🇴 🇿🇦 🇰🇷 🇸🇸 🇪🇸 🇱🇰 🇧🇱 🇸🇭 🇰🇳 🇱🇨 🇵🇲 🇻🇨 🇸🇩 🇸🇷 🇸🇿 🇸🇪 🇨🇭 🇸🇾 🇹🇯 🇹🇿 🇹🇭 🇹🇱 🇹🇬 🇹🇰 🇹🇴 🇹🇹 🇹🇳 🇹🇷 🇹🇲 🇹🇨 🇹🇻 🇻🇮 🇺🇬 🇺🇦 🇦🇪 🇬🇧 🏴 🏴 🏴 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇺 🇻🇦 🇻🇪 🇻🇳 🇼🇫 🇪🇭 🇾🇪 🇿🇲 🇿🇼'
|
||
|
||
this.list = emoji.split(/\s+/)
|
||
this.callback = callback
|
||
this.element = null
|
||
this.input = input
|
||
}
|
||
|
||
create_window() {
|
||
// 主窗口
|
||
if (this.element) return this.element
|
||
this.element = document.createElement('div')
|
||
this.element.style = "z-index:3;background:rgba(0,0,0,0); position:fixed; top:0; bottom:0; left:0; right:0; display:none; align-items:flex-end; transition: all .75s cubic-bezier(.645, .045, 0, 1);"
|
||
this.element.tabIndex = 0
|
||
this.element.onclick = () => { this.hide() }
|
||
this.element.onkeydown = (e) => {
|
||
if (e.key === "Escape") this.hide()
|
||
}
|
||
|
||
// 表情窗口
|
||
this.div = document.createElement("div")
|
||
this.div.style = "color:#555; position: relative; left: 0; bottom:-90%; display:flex; flex-direction:column; padding:32px 15px 20px; text-align:center; background:#ffffff; height:90%; width:100%; max-width:640px; margin:0 auto; border-radius:20px 20px 0 0; transition: all .75s cubic-bezier(.645, .045, 0, 1);"
|
||
this.div.innerHTML = "<h3 style='font-size:20px;'>(。・`ω´・) Emoji</h3>"
|
||
this.div.onclick = (e) => { e.stopPropagation() }
|
||
this.element.appendChild(this.div)
|
||
|
||
// 表情列表
|
||
this.ul = document.createElement("ul")
|
||
this.ul.classList.add('emojilist')
|
||
|
||
// 表情单项
|
||
this.list.forEach(item => {
|
||
let li = document.createElement("li")
|
||
li.innerText = item
|
||
li.onclick = () => {
|
||
// 向输入框中添加表情(精确的位置插入)
|
||
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()
|
||
}
|
||
this.ul.appendChild(li)
|
||
})
|
||
|
||
this.div.appendChild(this.ul)
|
||
document.body.appendChild(this.element)
|
||
|
||
// 创建CSS样式(滚动条)
|
||
if (!document.querySelector('#emoji-style')) {
|
||
var style = document.createElement("style")
|
||
style.type = "text/css"
|
||
style.id = "emoji-style"
|
||
style.appendChild(document.createTextNode(`
|
||
ul.emojilist::-webkit-scrollbar { width : 10px; height: 1px; }
|
||
ul.emojilist::-webkit-scrollbar-thumb { border-radius:10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); }
|
||
ul.emojilist::-webkit-scrollbar-track { box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); background:#ededed; border-radius:10px; }
|
||
ul.emojilist::-webkit-scrollbar-thumb:hover { background-color: #ccc; }
|
||
ul.emojilist { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; overflow-y:scroll; }
|
||
ul.emojilist > li {
|
||
display:flex;
|
||
justify-content:center;
|
||
items-align:center;
|
||
font-size: 32px;
|
||
height: 48px;
|
||
width: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
border-radius: 48px;
|
||
transition: all .25s;
|
||
cursor:pointer;
|
||
}
|
||
ul.emojilist.ok > li:hover {
|
||
background-color: rgba(0,0,0,.05);
|
||
font-size: 36px;
|
||
}
|
||
`
|
||
))
|
||
document.head.appendChild(style)
|
||
}
|
||
|
||
return this.element
|
||
}
|
||
|
||
// 显示组件(方法)
|
||
async show() {
|
||
this.create_window()
|
||
this.element.style.display = "flex"
|
||
this.div.offsetWidth
|
||
this.element.style.background = "rgba(0,0,0,.6)"
|
||
this.element.focus()
|
||
this.div.style.bottom = "0px"
|
||
await new Promise(resolve => setTimeout(resolve, 800))
|
||
this.ul.calssList.add('ok')
|
||
this.event.onShow()
|
||
}
|
||
|
||
// 隐藏组件(方法) (是否将聚焦返回给 input 的原本位置?)
|
||
async hide() {
|
||
this.ul.classList.remove('ok')
|
||
this.element.style.background = "rgba(0,0,0,0)"
|
||
this.div.style.bottom = "-90%"
|
||
await new Promise(resolve => setTimeout(resolve, 450))
|
||
this.element.parentNode.removeChild(this.element)
|
||
this.element = null
|
||
this.event.onHide()
|
||
}
|
||
}
|
||
|