friendica/view/js/vanillaEmojiPicker
ImgBotApp e98b3a307b [ImgBot] Optimize images
*Total -- 1,838.08kb -> 1,439.34kb (21.69%)

/images/screenshots/friendica-2023-12-frio-desktop.png -- 1,011.26kb -> 706.65kb (30.12%)
/images/screenshots/friendica-2023-10-frio-mobile-options-dark-blue.png -- 184.63kb -> 149.93kb (18.8%)
/images/screenshots/friendica-2023-10-frio-mobile-options-light-blue.png -- 166.19kb -> 138.00kb (16.96%)
/images/screenshots/friendica-2023-10-frio-mobile-timeline-dark-blue.png -- 400.47kb -> 370.62kb (7.45%)
/images/bluesky.jpg -- 7.75kb -> 7.55kb (2.58%)
/view/js/vanillaEmojiPicker/screenshot.png -- 67.77kb -> 66.58kb (1.76%)

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>
2024-04-27 10:59:46 -04:00
..
LICENSE
README.md
index.html
indextest.html
screenshot.png [ImgBot] Optimize images 2024-04-27 10:59:46 -04:00
vanillaEmojiPicker.js
vanillaEmojiPicker.min.js

README.md

FG Emoji Picker - Emoji picker created with vanilla javascript

This is the simplest to use emoji picker built with vanilla javascript.

Benefits:

  • It is only one .js file without css or other files
  • There is no jQuery or other libraries
  • Simplicity of usage
  • Multiple textareas and triggers
  • Draggable emoji picker container

Initialize

Initialze plugin with new EmojiPicker({});

Options

  • Trigger - must be an array of objects. Inside object there are two properties. First is selector, and second - insertInto method to define where emoji going to be inserted. If there are multiple 'textarea's - you can provide array of selectors as well. Watch example below.
  • Close button - closeButton method can be true of false depending on whether you want close button on emoji picker or not.
  • specialButtons - takes color code to change special (move and close) button colors.
new EmojiPicker({
    trigger: [
        {
            selector: '.first-btn',
            insertInto: ['.one', '.two'] // If there is only one '.selector', than it can be used without array
        },
        {
            selector: '.second-btn',
            insertInto: '.two'
        }
    ],
    closeButton: true,
    specialButtons: 'green' // #008000, rgba(0, 128, 0);
});