😀 Faceclick

A lightweight Emoji picker popup library with keyword search.

Goals:

Use the “tags” from the Unicode spec for keyword searching.
Show Emoji sectioned by “groups” for browsing.
Make the file size as small as possible while doing the above.
Library is one vanilla JavaScript file and one tiny CSS file.

For more about Faceclick, see the project website:

https://ratfactor.com/faceclick/

Installation

Include it on your page:

<script src="faceclick.js"></script>

Basic usage

This is the simplest way to use Faceclick:

FC.attach("btn1", "text1");

The first parameter is the ID of the HTML element you want to click on to open the popup. The popup will open next to the element on the screen.

The second parameter is the ID of the HTML text input element into which the picked Emoji will be inserted. The insertion will happen at your text entry cursor position.

See test.html for working examples.

Advanced usage

Faceclick exposes all of its methods under the FC namespace. They are intented to be used together or composed into your own custom behavior.

The following settings can be invoked (globally, sorry) after FC has been loaded:

FC.group_clears_search - True by default, the search box is cleared when you pick a group tab.
FC.search_clears_group - True by default, typing a search clears the group tab selection.
FC.close_on_clickaway - True by default, popups will close when the user clicks anywhere outside of the popup.

This one won’t work if you’re using a custom callback that doesn’t make use of FC.insert():

FC.close_on_pick - True by default, popups will close when you pick an Emoji and return input focus to the target text element.

Either parameter of attach() can be a reference to a DOM element rather than an ID string:

var my_btn = document.getElementById('button9000');
var my_txt = document.createElement('textarea');
FC.attach(my_btn, my_txt);

To perform a custom callback when an Emoji has been picked, use the attach_cb() helper method. Note that with this method, you have to pass a DOM element:

var my_btn = document.getElementById("clicky");

FC.attach_cb(my_btn, function(emoji){
    FC.close();
    // ... do something with emoji here ...
});

The above example also demonstrates the close() utility method to close the popup when an Emoji has been picked, which is optional.

Now is a good time to mention the insert() utility method. It inserts text into a DOM text input element at the text cursor position. Feel free to use it any way you want:

FC.insert = function(element, insert_txt);

A lower-level function for attaching a popup to a DOM element is attach_popup(). It opens the popup next to the element and then calls your callback function when an Emoji is picked:

function my_callback(){ ... }

my_button.addEventListener("click", function(){
    FC.attach_popup(el_click, my_callback);
});

The lowest level method to open the Faceclick popup is popup(). It takes x and y screen coordinates to display and then calls your callback function with the picked Emoji:

FC.popup(x, y, my_callback);

An example of Faceclick being used with attach_popup() in a real project can be found here:

https://ratfactor.com/repos/famsite/html/fam.js.html#L50

Make a custom Emoji set

The data/ directory contains a full copy of data.json from Emojibase. See the README in that directory for notes about file sizes and the Ruby scripts you’ll find there.

But, basically, change customizer.rb to fit your preferences and then run the go.sh shell script to generate a visual contact sheet HTML file (for previewing your set while customizing) and a final data set for use with the picker. Replace the data set in faceclick.js with the generated data set (copy and paste!).

$ cd data
$ vim customizer.rb
$ firefox mysheet.html
$ ./go.sh
$ cat mydata.js >> ../faceclick.js

For more of the high-level ideas behind this, I recommend the project website linked at the top of this document.

License and what you can do with it

I’m releasing this under the GNU GPLv3 license. Please see the LICENSE text file in this repo.

In short, you can download, modify, and distribute this program.