...
Once you've added the trigger, you will need to create a new instance of LIVECHATSDK.LIVECHAT.emojiPicker EmojiButton object class.
| Code Block | ||
|---|---|---|
| ||
LIVECHATSDK.SDK.getEmojiPicker().then ( function(emojiClass) { window.emoji_picker = new LIVECHATSDKemojiClass.LIVECHAT.emojiPickerEmojiButton( { "position": "auto", "showPreview": false, "recentsCount": 6, "autoHide": false, "showVariants": false, "autoFocusSearch": true, "emojiSize": "1.2em", "emojisPerRow": 6, "emojiVersion": "11.0", "categories": ["smileys", "people", "animals", "food", "activities", "travel", "objects", "symbols"], "zIndex": 10000, "showAnimation": true } ); } ); |
After constructing a picker, it can be shown by calling showPicker or togglePicker methods. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element according the “position” parameter.
You can also use a static positioning by specifying x/y coordinates in the constructor options parameters.
| Code Block | ||
|---|---|---|
| ||
jQuery("#btnEmoji").off().on("click", function() {
if ( window.emoji_picker.pickerVisible == true) {
window.emoji_picker.hidePicker();
} else {
window.emoji_picker.showPicker( jQuery("#btnEmoji").get() );
}
}); |
...
Relative Positioning
The picker accepts a “position” an option specifying where the picker should be positioned, relative to the reference element passed to showPicker or togglePicker. This property can be any of the following values:
auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-endSee the Javascript Popper library documentation for a list of valid relative position values.
Fixed Positioning
A fixed position can also be given for the position option. In this case, position is an object with top, bottom, left, and/or right properties.
...
Name | Type (default value) | Description |
|---|---|---|
autoHide | Boolean (true) | Whether or not the picker should be automatically hidden when an emoji is selected. |
categories | String Array (all categories) | An array of the emoji categories to include in the picker. Valid values are: |
emojiSize | String (“1.8em”) | The CSS size to use for the emoji icons. |
emojiVersion | String (“12.1”) | The Unicode version of the Emoji specification to use. Valid values are: |
initialCategory | String (“smileys”) | The ID of the category to show initially when the picker is shown. |
recentsCount | Number (50) | The number of recent emojis to save. |
rootElement | HTML DOM Element | The root DOM node to attach the picker element to. |
rows | Number (6) | The number of visible rows in the picker. |
showCategoryButtons | Boolean (true) | Whether or not to show the category buttons. |
showSearch | Boolean (true) | Whether or not to show the search field. |
showRecents | Boolean (true) | Whether or not to show (and save) recently selected emojis. |
showVariants | Boolean (true) | Whether or not to support emoji skin tone variants. |
zIndex | Number | If specified, sets the Z-index for the emoji picker element. |
APIs
Method | Params | Description |
|---|---|---|
destroyPicker | - | Destroys the picker and removes it from the DOM. You will no longer be able to show the picker after it is destroyed. |
hidePicker | - | Hides the picker. |
isPickerVisible | - | Returns true if the picker is currently visible, false if not. |
off | String event, function callback | Removes the given listener for the given event. |
on | String event, function callback | Adds a listener for the given event. |
showPicker | HTML DOM Reference Element | Shows the picker, positioning it relative to the given reference element. |
togglePicker | HTML DOM Reference Element | If it is hidden it shows the picker, otherwise hides it if it is visible. |