ePicker v1.2 — 🍋‍ Lite Emoji Picker

A simple and lightweight emoji picker that supports over 1400 emojis, now with improved performance and more features!

---

What's New in v1.2:

• Sprite Support (PNG/WebP): You can now use either a PNG or WebP sprite, saving up to 16% in file size.
• Multiple Picker Instances: Create multiple ePicker() instances or use a single one anywhere in the document.
• Improved Code: The JavaScript and HTML have been optimized, reducing code size by up to 30% and making the codebase cleaner.
• Enhanced Emoji Picker Toggle: Use myPicker.pick("demo") to toggle the picker visibility and insert emojis into the target element.

---

DEMO

View on CodePen

https://codepen.io/alirq/pen/VYweYOx

---

How to Use

1. Include the JavaScript File
   Add the ep.min.js file at the bottom of your page before the closing </body> tag:

   <script src="ep.min.js"></script>

2. Include the Picker HTML
   Add the following HTML where you want the picker to appear:

   <div id="picker_name"></div>

3. Targeting a Textarea/Input/Contenteditable Element
   To initialize the picker, pass the targeted element to the plugin:

   const picker_name = new epicker({wrap:"#picker_name", target:"#goes_here"});

---

Example Usage

Here’s an example to demonstrate how to set up and use ePicker:

<div id="demo" class="chat-bubble" contenteditable="true"></div>

<button id="pick">Click Me</button>

<!-- ep__picker -->
<div id="picker_name"></div>
<!-- ep__picker -->

<script src="../js/ep.min.js"></script>

<script>
  const btn = document.getElementById("pick");

  const myPicker = new ePicker({
    wrap: "#picker_name",               // ID or HTMLElement (e.g., document.getElementById('test'))
    target: "#demo",                 	// Where emojis will be inserted; accepts an ID or HTMLElement
    inlineCss: false,                 	// Automatically embeds a minified inline CSS (no need for <link rel="stylesheet" href="style.css">)
    swap: true,                      	// If true and target is not an input/textarea, emojis replace the entire element content
    single: false,                   	// If true, only one single ePicker will be appedned to document, then .pick(target) will take effect and the target above will be ignored
    logs: true,                      	// Default is true. Set to false to disable console logs
    focus: true,                     	// set true to focus on target
    placeholder: "Search...",        	// set true to focus on target
    sprite: "../imgs/e_sprite.webp", 	// or ../imgs/e_sprite.png
    baned: [1,2,3,6],                 	// Hide and prevent specific emojis from being used in the picker. Refer to [emojis-list.html] for the corresponding index.
    render: true                 	    // If true, emojis will be displayed as CSS sprite images. This applies only to elements with contenteditable="true".
  });

  btn.onclick = function () {
    myPicker.pick("demo");
  };
  
</script>

---

Let me know if you need further adjustments for the README!