Free Download Dynamic Emoji Picker For Bootstrap 4 – jQuery EmojiPopper

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Emoji Picker For Bootstrap 4 – jQuery EmojiPopper, hope it will help you in programming stack.

emoji picker bootstrap popper - Free Download Dynamic Emoji Picker For Bootstrap 4 - jQuery EmojiPopper
File Size: 1.06 MB
Views Total: 3305
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

EmojiPopper is a dynamic emoji picker component that enables the user to quickly insert native emoji characters into a text field.

To aid performance, the plugin automatically fetches and stores the emoji characters in the local using the Web Storage API. Supports the local storage and session storage.

Depends on Bootstrap 4 popover component and Popper.js library.

How to use it:

1. Load the required jQuery library and Bootstrap 4 framework in the document.

view source
1 <link rel="stylesheet" href="bootstrap.min.css" />
2 <script src="jquery.min.js"></script>
3 <script src="popper.min.js"></script>
4 <script src="bootstrap.min.js"></script>

2. Load the EmojiPopper plugin’s files.

view source
1 <link rel="stylesheet" href="emojiPopper.min.css">
2 <script src="emojiPopper.js"></script>

3. Create a trigger button to toggle the emoji picker popover. The data-target attribute is used to specify the target text field into which the emoji characters will be inserted.

view source
1 <input type="text" id="example">
2 <!-- Textarea Is Supported As Well -->
3 <textarea id="example"></textarea>
view source
1 <button type="button" id="button-input" data-toggle="emojiPopper" data-target="#example">
2   Launch The Emoji Picker
3 </button>

4. Define your emoji data in the JSON. The plugin also provides a PHP script EmojiController.php that dynamically fetches emoji characters from www.unicode.org and sends the emoji data to the client in either JSON or JSONP format.

  • “groupName”: used to group emoji characters
  • “hexCodes”: the hex code
  • “formatted”: the formatted hex character values
  • “description”: emoji description
view source
01 // data.json
02 [
03   {
04     "groupName":"Smileys & Emotion",
05     "hexCodes":"1F600",
06     "formatted":"&#x1F600;",
07     "description":"grinning face"
08   },
09   {
10     "groupName":"Smileys & Emotion",
11     "hexCodes":"1F603",
12     "formatted":"&#x1F603;",
13     "description":"grinning face with big eyes"
14   },
15  
16   // more emoji data here
17 ]

5. Initialize the emoji picker and define the path to the emoji data.

view source
1 $(function () {
2    var emojiPopper = $('[data-toggle="emojiPopper"]').emojiPopper({
3        url: "data.json"
4   });
5 });

6. Change the default trigger event. Default: ‘click’.

view source
1 <button type="button"
2         id="button-input"
3         data-toggle="emojiPopper"
4         data-target="#example"
5         data-trigger="focus">
6         Launch The Emoji Picker
7 </button>

7. Set the placement of the emoji picker. Default: ‘right’. Note that the plugin has the ability to auto adjust the position of the emoji picker depending on the screen space.

view source
1 <button type="button"
2         id="button-input"
3         data-toggle="emojiPopper"
4         data-target="#example"
5         data-placement="top">
6         Launch The Emoji Picker
7 </button>

8. Config & customize the emoji picker with the following options.

view source
01 // options & defaults
02 var emojiPopper = $('[data-toggle="emojiPopper"]').emojiPopper({
03      
04     // aria-label title
05     title: "Pick an emoji...",
06  
07     // or "sessionStorge"
08     storageType: "localStorage",
09  
10     // auto close the emoji picker after an emoji is selected
11     autoClose: true,
12  
13     // auto close the emoji picker on click outside
14     dismiss: true,
15  
16     // enable/disable the open/close animations
17     animation: true,
18  
19     // append the emoji picker to a specific container
20     container: null,
21  
22     // time to wait before show/hide the emoji picker
23     delay: { "show": 0, "hide": 0 },
24  
25     // custom rendering template
26     template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
27  
28     // offset in pixels
29     offset: 0,
30  
31     // fallback placement
32     fallbackPlacement: 'flip',
33  
34     // 'viewport', 'window', 'scrollParent'
35     boundary: 'scrollParent'
36      
37 });

This awesome jQuery plugin is developed by DigiLive. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: