# 😀 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/](https://ratfactor.com/faceclick/) ## Installation Include it on your page: ## 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](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. 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 *UPDATE:* In September 2025, "demodulatingswan" sent me a jq version of the customizer! See `data/README-JQ`. 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. I'd love to hear about it if you end up using this in your project.