emoji-picker.js

(function() {

  var emojis = ["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","☺️","🙂","🤗","😇","🤓","🤔","😐","😑","😶","🙄","😏","😣","😥","😮","🤐","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","🙃","🤑","😲","😷","🤒","🤕","☹️","🙁","😖","😞","😟","😤","😢","😭","😦","😧","😨","😩","😬","😰","😱","😳","😵","😡","😠","😈","👿","👹","👺","💀","☠️","👻","👽","👾","🤖","💩","😺","😸","😹","😻","😼","😽","🙀","😿","😾","🙈","🙉","🙊","👦","👦🏻","👦🏼","👦🏽","👦🏾","👦🏿","👧","👧🏻","👧🏼","👧🏽","👧🏾","👧🏿","👨","👨🏻","👨🏼","👨🏽","👨🏾","👨🏿","👩","👩🏻","👩🏼","👩🏽","👩🏾","👩🏿","👴","👴🏻","👴🏼","👴🏽","👴🏾","👴🏿","👵","👵🏻","👵🏼","👵🏽","👵🏾","👵🏿","👶","👶🏻","👶🏼","👶🏽","👶🏾","👶🏿","👱","👱🏻","👱🏼","👱🏽","👱🏾","👱🏿","👮","👮🏻","👮🏼","👮🏽","👮🏾","👮🏿","👲","👲🏻","👲🏼","👲🏽","👲🏾","👲🏿","👳","👳🏻","👳🏼","👳🏽","👳🏾","👳🏿","👷","👷🏻","👷🏼","👷🏽","👷🏾","👷🏿","⛑️","👸","👸🏻","👸🏼","👸🏽","👸🏾","👸🏿","💂","💂🏻","💂🏼","💂🏽","💂🏾","💂🏿","🕵️","🕵️🏻","🕵️🏼","🕵️🏽","🕵️🏾","🕵️🏿","🎅","🎅🏻","🎅🏼","🎅🏽","🎅🏾","🎅🏿","👰","👰🏻","👰🏼","👰🏽","👰🏾","👰🏿","👼","👼🏻","👼🏼","👼🏽","👼🏾","👼🏿","💆","💆🏻","💆🏼","💆🏽","💆🏾","💆🏿","💇","💇🏻","💇🏼","💇🏽","💇🏾","💇🏿","🙍","🙍🏻","🙍🏼","🙍🏽","🙍🏾","🙍🏿","🙎","🙎🏻","🙎🏼","🙎🏽","🙎🏾","🙎🏿","🙅","🙅🏻","🙅🏼","🙅🏽","🙅🏾","🙅🏿","🙆","🙆🏻","🙆🏼","🙆🏽","🙆🏾","🙆🏿","💁","💁🏻","💁🏼","💁🏽","💁🏾","💁🏿","🙋","🙋🏻","🙋🏼","🙋🏽","🙋🏾","🙋🏿","🙇","🙇🏻","🙇🏼","🙇🏽","🙇🏾","🙇🏿","🙌","🙌🏻","🙌🏼","🙌🏽","🙌🏾","🙌🏿","🙏","🙏🏻","🙏🏼","🙏🏽","🙏🏾","🙏🏿","🗣️","👤","👥","🚶","🚶🏻","🚶🏼","🚶🏽","🚶🏾","🚶🏿","🏃","🏃🏻","🏃🏼","🏃🏽","🏃🏾","🏃🏿","👯","💃","💃🏻","💃🏼","💃🏽","💃🏾","💃🏿","🕴️","👫","👬","👭","💏","👩‍❤️‍💋‍👨","👨‍❤️‍💋‍👨","👩‍❤️‍💋‍👩","💑","👩‍❤️‍👨","👨‍❤️‍👨","👩‍❤️‍👩","👪","👨‍👩‍👦","👨‍👩‍👧","👨‍👩‍👧‍👦","👨‍👩‍👦‍👦","👨‍👩‍👧‍👧","👨‍👨‍👦","👨‍👨‍👧","👨‍👨‍👧‍👦","👨‍👨‍👦‍👦","👨‍👨‍👧‍👧","👩‍👩‍👦","👩‍👩‍👧","👩‍👩‍👧‍👦","👩‍👩‍👦‍👦","👩‍👩‍👧‍👧","🏻","🏼","🏽","🏾","🏿","💪","💪🏻","💪🏼","💪🏽","💪🏾","💪🏿","👈","👈🏻","👈🏼","👈🏽","👈🏾","👈🏿","👉","👉🏻","👉🏼","👉🏽","👉🏾","👉🏿","☝️","☝️🏻","☝️🏼","☝️🏽","☝️🏾","☝️🏿","👆","👆🏻","👆🏼","👆🏽","👆🏾","👆🏿","🖕","🖕🏻","🖕🏼","🖕🏽","🖕🏾","🖕🏿","👇","👇🏻","👇🏼","👇🏽","👇🏾","👇🏿","✌️","✌️🏻","✌️🏼","✌️🏽","✌️🏾","✌️🏿","🖖","🖖🏻","🖖🏼","🖖🏽","🖖🏾","🖖🏿","🤘","🤘🏻","🤘🏼","🤘🏽","🤘🏾","🤘🏿","🖐️","🖐️🏻","🖐️🏼","🖐️🏽","🖐️🏾","🖐️🏿","✋","✋🏻","✋🏼","✋🏽","✋🏾","✋🏿","👌","👌🏻","👌🏼","👌🏽","👌🏾","👌🏿","👍","👍🏻","👍🏼","👍🏽","👍🏾","👍🏿","👎","👎🏻","👎🏼","👎🏽","👎🏾","👎🏿","✊","✊🏻","✊🏼","✊🏽","✊🏾","✊🏿","👊","👊🏻","👊🏼","👊🏽","👊🏾","👊🏿","👋","👋🏻","👋🏼","👋🏽","👋🏾","👋🏿","👏","👏🏻","👏🏼","👏🏽","👏🏾","👏🏿","👐","👐🏻","👐🏼","👐🏽","👐🏾","👐🏿","✍️","✍️🏻","✍️🏼","✍️🏽","✍️🏾","✍️🏿","💅","💅🏻","💅🏼","💅🏽","💅🏾","💅🏿","👂","👂🏻","👂🏼","👂🏽","👂🏾","👂🏿","👃","👃🏻","👃🏼","👃🏽","👃🏾","👃🏿","👣","👀","👁️","👁️‍🗨","👅","👄","💋","💘","❤️","💓","💔","💕","💖","💗","💙","💚","💛","💜","💝","💞","💟","❣️","💌","💤","💢","💣","💥","💦","💨","💫","💬","🗨️","🗯️","💭","🕳️","👓","🕶️","👔","👕","👖","👗","👘","👙","👚","👛","👜","👝","🛍️","🎒","👞","👟","👠","👡","👢","👑","👒","🎩","🎓","📿","💄","💍","💎","🐵","🐒","🐶","🐕","🐩","🐺","🐱","🐈","🦁","🐯","🐅","🐆","🐴","🐎","🦄","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🐘","🐭","🐁","🐀","🐹","🐰","🐇","🐿️","🐻","🐨","🐼","🐾","🦃","🐔","🐓","🐣","🐤","🐥","🐦","🐧","🕊️","🐸","🐊","🐢","🐍","🐲","🐉","🐳","🐋","🐬","🐟","🐠","🐡","🐙","🐚","🦀","🐌","🐛","🐜","🐝","🐞","🕷️","🕸️","🦂","💐","🌸","💮","🏵️","🌹","🌺","🌻","🌼","🌷","🌱","🌲","🌳","🌴","🌵","🌾","🌿","☘️","🍀","🍁","🍂","🍃","🍇","🍈","🍉","🍊","🍋","🍌","🍍","🍎","🍏","🍐","🍑","🍒","🍓","🍅","🍆","🌽","🌶️","🍄","🌰","🍞","🧀","🍖","🍗","🍔","🍟","🍕","🌭","🌮","🌯","🍳","🍲","🍿","🍱","🍘","🍙","🍚","🍛","🍜","🍝","🍠","🍢","🍣","🍤","🍥","🍡","🍦","🍧","🍨","🍩","🍪","🎂","🍰","🍫","🍬","🍭","🍮","🍯","🍼","☕️","🍵","🍶","🍾","🍷","🍸","🍹","🍺","🍻","🍽️","🍴","🔪","🏺","🌍","🌎","🌏","🌐","🗺️","🗾","🏔️","⛰️","🌋","🗻","🏕️","🏖️","🏜️","🏝️","🏞️","🏟️","🏛️","🏗️","🏘️","🏙️","🏚️","🏠","🏡","🏢","🏣","🏤","🏥","🏦","🏨","🏩","🏪","🏫","🏬","🏭","🏯","🏰","💒","🗼","🗽","⛪️","🕌","🕍","⛩️","🕋","⛲️","⛺️","🌁","🌃","🌄","🌅","🌆","🌇","🌉","♨️","🌌","🎠","🎡","🎢","💈","🎪","🎭","🖼️","🎨","🎰","🚂","🚃","🚄","🚅","🚆","🚇","🚈","🚉","🚊","🚝","🚞","🚋","🚌","🚍","🚎","🚏","🚐","🚑","🚒","🚓","🚔","🚕","🚖","🚗","🚘","🚙","🚚","🚛","🚜","🚲","⛽️","🛣️","🛤️","🚨","🚥","🚦","🚧","⚓️","⛵️","🚣","🚣🏻","🚣🏼","🚣🏽","🚣🏾","🚣🏿","🚤","🛳️","⛴️","🛥️","🚢","✈️","🛩️","🛫","🛬","💺","🚁","🚟","🚠","🚡","🚀","🛰️","🛎️","🚪","🛌","🛏️","🛋️","🚽","🚿","🛀","🛀🏻","🛀🏼","🛀🏽","🛀🏾","🛀🏿","🛁","⌛️","⏳","⌚️","⏰","⏱️","⏲️","🕰️","🕛","🕧","🕐","🕜","🕑","🕝","🕒","🕞","🕓","🕟","🕔","🕠","🕕","🕡","🕖","🕢","🕗","🕣","🕘","🕤","🕙","🕥","🕚","🕦","🌑","🌒","🌓","🌔","🌕","🌖","🌗","🌘","🌙","🌚","🌛","🌜","🌡️","☀️","🌝","🌞","⭐️","🌟","🌠","☁️","⛅️","⛈️","🌤️","🌥️","🌦️","🌧️","🌨️","🌩️","🌪️","🌫️","🌬️","🌀","🌈","🌂","☂️","☔️","⛱️","⚡️","❄️","☃️","⛄️","☄️","🔥","💧","🌊","🎃","🎄","🎆","🎇","✨","🎈","🎉","🎊","🎋","🎍","🎎","🎏","🎐","🎑","🎀","🎁","🎗️","🎟️","🎫","🎖️","🏆","🏅","⚽️","⚾️","🏀","🏐","🏈","🏉","🎾","🎱","🎳","🏏","🏑","🏒","🏓","🏸","⛳️","🏌️","⛸️","🎣","🎽","🎿","⛷️","🏂","🏄","🏄🏻","🏄🏼","🏄🏽","🏄🏾","🏄🏿","🏇","🏊","🏊🏻","🏊🏼","🏊🏽","🏊🏾","🏊🏿","⛹️","⛹️🏻","⛹️🏼","⛹️🏽","⛹️🏾","⛹️🏿","🏋️","🏋️🏻","🏋️🏼","🏋️🏽","🏋️🏾","🏋️🏿","🚴","🚴🏻","🚴🏼","🚴🏽","🚴🏾","🚴🏿","🚵","🚵🏻","🚵🏼","🚵🏽","🚵🏾","🚵🏿","🏎️","🏍️","🎯","🎮","🕹️","🎲","♠️","♥️","♦️","♣️","🃏","🀄️","🎴","🔇","🔈","🔉","🔊","📢","📣","📯","🔔","🔕","🎼","🎵","🎶","🎙️","🎚️","🎛️","🎤","🎧","📻","🎷","🎸","🎹","🎺","🎻","📱","📲","☎️","📞","📟","📠","🔋","🔌","💻","🖥️","🖨️","⌨️","🖱️","🖲️","💽","💾","💿","📀","🎥","🎞️","📽️","🎬","📺","📷","📸","📹","📼","🔍","🔎","🔬","🔭","📡","🕯️","💡","🔦","🏮","📔","📕","📖","📗","📘","📙","📚","📓","📒","📃","📜","📄","📰","🗞️","📑","🔖","🏷️","💰","💴","💵","💶","💷","💸","💳","💹","💱","💲","✉️","📧","📨","📩","📤","📥","📦","📫","📪","📬","📭","📮","🗳️","✏️","✒️","🖋️","🖊️","🖌️","🖍️","📝","💼","📁","📂","🗂️","📅","📆","🗒️","🗓️","📇","📈","📉","📊","📋","📌","📍","📎","🖇️","📏","📐","✂️","🗃️","🗄️","🗑️","🔒","🔓","🔏","🔐","🔑","🗝️","🔨","⛏️","⚒️","🛠️","🗡️","⚔️","🔫","🏹","🛡️","🔧","🔩","⚙️","🗜️","⚗️","⚖️","🔗","⛓️","💉","💊","🏁","🏳️","🏴","🚩","🎌","🚬","⚰️","⚱️","🗿","🛢️","🔮","🏧","🚮","🚰","♿️","🚹","🚺","🚻","🚼","🚾","🛂","🛃","🛄","🛅","⚠️","🚸","⛔️","🚫","🚳","🚭","🚯","🚱","🚷","☢️","☣️","⬆️","↗️","➡️","↘️","⬇️","↙️","⬅️","↖️","↕️","↔️","↩️","↪️","⤴️","⤵️","🔃","🔄","🔙","🔚","🔛","🔜","🔝","🛐","⚛️","🕉️","✡️","☸️","☯️","✝️","☦️","☪️","☮️","🕎","🔯","♻️","📛","⚜️","🔰","🔱","⭕️","✅","☑️","✔️","✖️","❌","❎","➕","➖","➗","➰","➿","〽️","✳️","✴️","❇️","‼️","⁉️","❓","❔","❕","❗️","〰️","©️","®️","™️","♈️","♉️","♊️","♋️","♌️","♍️","♎️","♏️","♐️","♑️","♒️","♓️","⛎","🔀","🔁","🔂","▶️","⏩","⏭️","⏯️","◀️","⏪","⏮️","🔼","⏫","🔽","⏬","⏸️","⏹️","⏺️","⏏️","🎦","🔅","🔆","📶","📵","📳","📴","#️⃣","*️⃣","0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣","🔟","💯","🔞","🔠","🔡","🔢","🔣","🔤","🅰️","🆎","🅱️","🆑","🆒","🆓","ℹ️","🆔","Ⓜ️","🆕","🆖","🅾️","🆗","🅿️","🆘","🆙","🆚","🈁","🈂️","🈷️","🈶","🈯️","🉐","🈹","🈚️","🈲","🉑","🈸","🈴","🈳","㊗️","㊙️","🈺","🈵","▪️","▫️","◻️","◼️","◽️","◾️","⬛️","⬜️","🔶","🔷","🔸","🔹","🔺","🔻","💠","🔘","🔲","🔳","⚪️","⚫️","🔴","🔵","🇦🇨","🇦🇩","🇦🇪","🇦🇫","🇦🇬","🇦🇮","🇦🇱","🇦🇲","🇦🇴","🇦🇶","🇦🇷","🇦🇸","🇦🇹","🇦🇺","🇦🇼","🇦🇽","🇦🇿","🇧🇦","🇧🇧","🇧🇩","🇧🇪","🇧🇫","🇧🇬","🇧🇭","🇧🇮","🇧🇯","🇧🇱","🇧🇲","🇧🇳","🇧🇴","🇧🇶","🇧🇷","🇧🇸","🇧🇹","🇧🇻","🇧🇼","🇧🇾","🇧🇿","🇨🇦","🇨🇨","🇨🇩","🇨🇫","🇨🇬","🇨🇭","🇨🇮","🇨🇰","🇨🇱","🇨🇲","🇨🇳","🇨🇴","🇨🇵","🇨🇷","🇨🇺","🇨🇻","🇨🇼","🇨🇽","🇨🇾","🇨🇿","🇩🇪","🇩🇬","🇩🇯","🇩🇰","🇩🇲","🇩🇴","🇩🇿","🇪🇦","🇪🇨","🇪🇪","🇪🇬","🇪🇭","🇪🇷","🇪🇸","🇪🇹","🇪🇺","🇫🇮","🇫🇯","🇫🇰","🇫🇲","🇫🇴","🇫🇷","🇬🇦","🇬🇧","🇬🇩","🇬🇪","🇬🇫","🇬🇬","🇬🇭","🇬🇮","🇬🇱","🇬🇲","🇬🇳","🇬🇵","🇬🇶","🇬🇷","🇬🇸","🇬🇹","🇬🇺","🇬🇼","🇬🇾","🇭🇰","🇭🇲","🇭🇳","🇭🇷","🇭🇹","🇭🇺","🇮🇨","🇮🇩","🇮🇪","🇮🇱","🇮🇲","🇮🇳","🇮🇴","🇮🇶","🇮🇷","🇮🇸","🇮🇹","🇯🇪","🇯🇲","🇯🇴","🇯🇵","🇰🇪","🇰🇬","🇰🇭","🇰🇮","🇰🇲","🇰🇳","🇰🇵","🇰🇷","🇰🇼","🇰🇾","🇰🇿","🇱🇦","🇱🇧","🇱🇨","🇱🇮","🇱🇰","🇱🇷","🇱🇸","🇱🇹","🇱🇺","🇱🇻","🇱🇾","🇲🇦","🇲🇨","🇲🇩","🇲🇪","🇲🇫","🇲🇬","🇲🇭","🇲🇰","🇲🇱","🇲🇲","🇲🇳","🇲🇴","🇲🇵","🇲🇶","🇲🇷","🇲🇸","🇲🇹","🇲🇺","🇲🇻","🇲🇼","🇲🇽","🇲🇾","🇲🇿","🇳🇦","🇳🇨","🇳🇪","🇳🇫","🇳🇬","🇳🇮","🇳🇱","🇳🇴","🇳🇵","🇳🇷","🇳🇺","🇳🇿","🇴🇲","🇵🇦","🇵🇪","🇵🇫","🇵🇬","🇵🇭","🇵🇰","🇵🇱","🇵🇲","🇵🇳","🇵🇷","🇵🇸","🇵🇹","🇵🇼","🇵🇾","🇶🇦","🇷🇪","🇷🇴","🇷🇸","🇷🇺","🇷🇼","🇸🇦","🇸🇧","🇸🇨","🇸🇩","🇸🇪","🇸🇬","🇸🇭","🇸🇮","🇸🇯","🇸🇰","🇸🇱","🇸🇲","🇸🇳","🇸🇴","🇸🇷","🇸🇸","🇸🇹","🇸🇻","🇸🇽","🇸🇾","🇸🇿","🇹🇦","🇹🇨","🇹🇩","🇹🇫","🇹🇬","🇹🇭","🇹🇯","🇹🇰","🇹🇱","🇹🇲","🇹🇳","🇹🇴","🇹🇷","🇹🇹","🇹🇻","🇹🇼","🇹🇿","🇺🇦","🇺🇬","🇺🇲","🇺🇸","🇺🇾","🇺🇿","🇻🇦","🇻🇨","🇻🇪","🇻🇬","🇻🇮","🇻🇳","🇻🇺","🇼🇫","🇼🇸","🇽🇰","🇾🇪","🇾🇹","🇿🇦","🇿🇲","🇿🇼"];
  var input = document.activeElement;
  var isContentEditable = (typeof input.value === 'undefined');
  var oldPicker = document.getElementById('emoji-picker');
  if (oldPicker) {
    return oldPicker.remove(); }
  var picker = document.createElement('div');
  picker.id = 'emoji-picker';
  var style = picker.style;
  style.position = 'fixed';
  style.top = '6px';
  style.right = '6px';
  style.width = '120px';
  style.height = 'auto';
  style.maxHeight = '45vh';
  style.cursor = 'pointer';
  style.backgroundColor = 'white';
  style.border = '1px solid #ccc';
  style.borderRadius = '4px';
  style.overflowY = 'scroll';
  style.overflowX = 'hidden';
  style.zIndex = 1000;
  style.zoom = 2;
  style.padding = '4px 2px';
  var emoji;
  for (var i = 0; i < emojis.length; i++) { emoji = document.createElement('span');
    emoji.classList.add('emoji');
    emoji.textContent = emojis[i];
    emoji.style.display = 'inline-block';
    emoji.style.margin = '2px';
    emoji.style.lineHeight = 1;
    picker.appendChild(emoji); }
  picker.addEventListener('click', function(e) { picker.remove();
    if (e.target.classList.contains('emoji')) {
      var em = e.target.textContent;
      var val, sel;
      if (isContentEditable) { copyTextToClipboard(em); } else { val = input.value;
        sel = Number(input.selectionStart);
        input.value = val.slice(0, sel) + em + val.slice(sel, val.length); } }
    input.focus();
    input.selectionStart = input.selectionEnd = sel + em.length; });
  document.body.appendChild(picker);

  function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = 0;
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); }
    document.body.removeChild(textArea);
  }

})();