├── .gitignore ├── wdt-emoji-bundle.gif ├── sheets ├── sheet_apple_64_indexed_128.png ├── sheet_google_64_indexed_128.png ├── sheet_twitter_64_indexed_128.png ├── sheet_emojione_64_indexed_128.png ├── sheet_facebook_64_indexed_128.png └── sheet_messenger_64_indexed_128.png ├── bower.json ├── composer.json ├── gulpfile.js ├── LICENSE.txt ├── package.json ├── README.md ├── wdt-emoji-bundle.css ├── demo └── index.html └── emoji.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | # vim files 2 | *.swp 3 | *.swo 4 | -------------------------------------------------------------------------------- /wdt-emoji-bundle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/wdt-emoji-bundle.gif -------------------------------------------------------------------------------- /sheets/sheet_apple_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_apple_64_indexed_128.png -------------------------------------------------------------------------------- /sheets/sheet_google_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_google_64_indexed_128.png -------------------------------------------------------------------------------- /sheets/sheet_twitter_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_twitter_64_indexed_128.png -------------------------------------------------------------------------------- /sheets/sheet_emojione_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_emojione_64_indexed_128.png -------------------------------------------------------------------------------- /sheets/sheet_facebook_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_facebook_64_indexed_128.png -------------------------------------------------------------------------------- /sheets/sheet_messenger_64_indexed_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/needim/wdt-emoji-bundle/HEAD/sheets/sheet_messenger_64_indexed_128.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wdt-emoji-bundle", 3 | "main": "wdt-emoji-bundle.js", 4 | "ignore": [], 5 | "authors": [ 6 | "Nedim Arabacı" 7 | ], 8 | "description": "Slack like emoji selector with apple, twitter, google, emojion, facebook, messenger and custom emoji support.", 9 | "dependencies": { 10 | "js-emoji": "^3.1.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "needim/wdt-emoji-bundle", 3 | "description": "Slack like emoji selector with apple, twitter, google, emojione, facebook, messenger and custom emoji support.", 4 | "type": "library", 5 | "license": "MIT", 6 | "homepage": "http://ned.im/wdt-emoji-bundle", 7 | "keywords": [ 8 | "emoji", 9 | "twemoji", 10 | "apple", 11 | "google", 12 | "emojione", 13 | "facebook", 14 | "messenger", 15 | "emoticon", 16 | "slack", 17 | "javascript", 18 | "wdt" 19 | ], 20 | "authors": [ 21 | { 22 | "name": "Nedim Arabacı", 23 | "homepage": "https://ned.im", 24 | "role": "Developer" 25 | } 26 | ], 27 | "minimum-stability": "dev" 28 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | bump = require('gulp-bump'), 3 | rename = require('gulp-rename'), 4 | uglify = require('gulp-uglify'), 5 | download = require('gulp-download-stream'), 6 | shell = require('gulp-shell'); 7 | 8 | gulp.task('bump', function () { 9 | return gulp.src(['wdt-emoji-bundle.js', 'package.json']) 10 | .pipe(bump({type: 'patch'})) 11 | .pipe(gulp.dest('./')); 12 | }); 13 | 14 | gulp.task('create:json', ['get:emojidata'], function () { 15 | shell.task('php ./build/build.php'); 16 | }); 17 | 18 | gulp.task('get:emojidata', function () { 19 | return download("https://raw.githubusercontent.com/iamcal/emoji-data/master/emoji_pretty.json", { 20 | headers: {'User-Agent': 'wdt-emoji-bundle'} 21 | }).pipe(gulp.dest('./build/')); 22 | }); 23 | 24 | gulp.task('uglify', function () { 25 | return gulp.src(['wdt-emoji-bundle.js', 'emoji.js']) 26 | .pipe(uglify({preserveComments: 'license'})) 27 | .pipe(rename({suffix: ".min"})) 28 | .pipe(gulp.dest('./')); 29 | }); 30 | 31 | gulp.task('build', ['bump', 'uglify']); -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Nedim Arabacı 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wdt-emoji-bundle", 3 | "version": "0.2.1", 4 | "title": "wdt-emoji-bundle - Emoji picker", 5 | "description": "Slack like emoji selector with apple, twitter, google, emojione, facebook, messenger and custom emoji support.", 6 | "homepage": "http://ned.im/wdt-emoji-bundle", 7 | "keywords": [ 8 | "emoji", 9 | "emoticon", 10 | "slack", 11 | "javascript", 12 | "wdt" 13 | ], 14 | "author": { 15 | "name": "Nedim Arabacı", 16 | "url": "http://github.com/needim/" 17 | }, 18 | "license": "MIT", 19 | "scripts": { 20 | "build": "gulp build" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git://github.com/needim/wdt-emoji-bundle.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/needim/wdt-emoji-bundle/issues" 28 | }, 29 | "main": "wdt-emoji-bundle.js", 30 | "dependencies": {}, 31 | "devDependencies": { 32 | "gulp": "^3.9.1", 33 | "gulp-bump": "^1.0.0", 34 | "gulp-download-stream": "0.0.13", 35 | "gulp-rename": "^1.2.2", 36 | "gulp-shell": "^0.6.3", 37 | "gulp-uglify": "^1.5.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wdt-emoji-bundle 2 | 3 | Slack like emoji selector with apple/ios, twitter/twemoji, google, emojione, facebook, messenger and custom emoji support. I :heart: opensource. 4 | 5 | Thanks to Cal Henderson @iamcal. 6 | 7 | # Demo 8 | 9 | ![wdt-emoji-bundle gif](https://raw.githubusercontent.com/needim/wdt-emoji-bundle/master/wdt-emoji-bundle.gif "wdt-emoji-bundle gif") 10 | 11 | # Installation 12 | 13 | Use one of the following: 14 | * npm `npm i wdt-emoji-bundle` 15 | * bower `bower i wdt-emoji-bundle` 16 | * pull in the source directly, load `wdt-emoji-bundle.min.js`, `wdt-emoji-bundle.css` and the `sheets/` directory 17 | 18 | ## Initialize 19 | 20 | ```javascript 21 | wdtEmojiBundle.init('.your-inputs-selector'); 22 | ``` 23 | 24 | ### Advanced configuration 25 | 26 | Tell the widget where to get the sheets from 27 | 28 | ```javascript 29 | wdtEmojiBundle.defaults.emojiSheets.apple = './sheet_apple.png'; // default /sheets/sheet_apple_64.png 30 | wdtEmojiBundle.defaults.emojiSheets.google = './sheet_google.png'; // default /sheets/sheet_google_64.png 31 | wdtEmojiBundle.defaults.emojiSheets.twitter = './sheet_twitter.png'; // default /sheets/sheet_twitter_64.png 32 | wdtEmojiBundle.defaults.emojiSheets.emojione = './sheet_emojione.png'; // default /sheets/sheet_emojione_64.png 33 | wdtEmojiBundle.defaults.emojiSheets.facebook = './sheet_facebook.png'; // default /sheets/sheet_facebook_64.png 34 | wdtEmojiBundle.defaults.emojiSheets.messenger = './sheet_messenger.png'; // default /sheets/sheet_messenger_64.png 35 | ``` 36 | 37 | === 38 | 39 | Set emoji set default sheet (this has to be done before the init) 40 | 41 | ```javascript 42 | wdtEmojiBundle.defaults.emojiType = 'apple'; 43 | ``` 44 | 45 | otherwise use 46 | 47 | ```javascript 48 | wdtEmojiBundle.changeType(emojiType); 49 | ``` 50 | 51 | === 52 | 53 | Hover color classes for picker's emoji's 54 | 55 | ```javascript 56 | wdtEmojiBundle.defaults.pickerColors = [ 57 | 'green', 'pink', 'yellow', 'blue', 'gray' 58 | ]; 59 | ``` 60 | === 61 | 62 | Picker tab section's orders, higher is first. Bundle render the sections according to this values. 63 | 64 | ``` 65 | wdtEmojiBundle.defaults.sectionOrders = { 66 | 'Recent' : 10, 67 | 'Custom' : 9, 68 | 'People' : 8, 69 | 'Nature' : 7, 70 | 'Foods' : 6, 71 | 'Activity': 5, 72 | 'Places' : 4, 73 | 'Objects' : 3, 74 | 'Symbols' : 2, 75 | 'Flags' : 1 76 | }; 77 | ``` 78 | 79 | ### API 80 | 81 | Render function takes any html string and convert to emojies based on the current bundle emoji type. (apple, google, twitter, emojione) 82 | 83 | ```javascript 84 | var output = wdtEmojiBundle.render('Lorem ipsum :) :speak_no_evil:'); 85 | ``` 86 | 87 | === 88 | 89 | Event listeners: 'select', 'afterSelect', 'afterPickerOpen' 90 | 91 | ```javascript 92 | wdtEmojiBundle.on('afterSelect', function (event) { 93 | console.log('element', event.el); 94 | console.log('emoji', event.emoji); 95 | }) 96 | ``` 97 | 98 | === 99 | 100 | Auto open the emoji picker when the user types the colon key `:` in the input: 101 | 102 | * Add class '.wdt-emoji-open-on-colon' to the input field that is going to have the emoji picker 103 | 104 | # TODO: 105 | 106 | - Better documentation :) 107 | - Responsive Improvements. 108 | - Better popup positioning. 109 | - Open on colon support for contenteditables. 110 | - Frequently used emoji list with localstorage and/or API. 111 | - Provide more events; open, close, pickeropen, pickerclose etc. 112 | - Custom emoji support. 113 | - Skin color support for apple icons. 114 | - Better contenteditable support, WYSIWYG? 115 | - Check browser compatibilities. 116 | 117 | --- 118 | 119 | 120 | -------------------------------------------------------------------------------- /wdt-emoji-bundle.css: -------------------------------------------------------------------------------- 1 | .wdt-emoji-popup, 2 | .wdt-emoji-popup * { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* hide unavailable fonts @todo - check fallbacks */ 9 | body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'], 10 | body[data-wdt-emoji-bundle='emojione'] .wdt-emoji[data-has-img-emojione='false'], 11 | body[data-wdt-emoji-bundle='google'] .wdt-emoji[data-has-img-google='false'], 12 | body[data-wdt-emoji-bundle='apple'] .wdt-emoji[data-has-img-apple='false'] { 13 | display: none; 14 | } 15 | 16 | /* picker styles */ 17 | .wdt-emoji-picker { 18 | position: absolute; 19 | right: 5px; 20 | bottom: 5px; 21 | 22 | width: 20px; 23 | height: 20px; 24 | } 25 | 26 | .wdt-emoji-picker:hover { 27 | cursor: pointer; 28 | } 29 | 30 | .wdt-emoji-picker-parent { 31 | position: relative; 32 | } 33 | 34 | .wdt-emoji-picker span.emoji-outer.emoji-sizer { 35 | width: 18px; 36 | height: 18px; 37 | 38 | pointer-events: none; 39 | } 40 | 41 | /* bundle popup styles */ 42 | .wdt-emoji-popup { 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | 47 | visibility: hidden; 48 | 49 | width: 357px; 50 | max-width: 100%; 51 | height: 357px; 52 | max-height: 100%; 53 | 54 | transition: opacity 50ms ease, bottom 1s ease-out; 55 | 56 | opacity: 0; 57 | border: 1px solid #dedede; 58 | -webkit-border-radius: 3px; 59 | -moz-border-radius: 3px; 60 | border-radius: 3px; 61 | background-color: #fff; 62 | } 63 | 64 | .wdt-emoji-popup.open { 65 | visibility: visible; 66 | 67 | opacity: 1; 68 | } 69 | 70 | #wdt-emoji-menu-header { 71 | padding: 4px 0 0 7px; 72 | 73 | border-bottom: 1px solid rgba(0, 0, 0, .15); 74 | background: #f7f7f7; 75 | } 76 | 77 | .wdt-emoji-tab { 78 | display: inline-block; 79 | 80 | width: 28px; 81 | margin-right: 2.5px; 82 | padding: 4px; 83 | 84 | transition: border-color 150ms ease-out; 85 | text-align: center; 86 | 87 | color: #9e9ea6; 88 | border-bottom: 3px solid transparent; 89 | } 90 | 91 | .wdt-emoji-tab:hover { 92 | cursor: pointer; 93 | text-decoration: none; 94 | } 95 | 96 | .wdt-emoji-tab.active { 97 | padding-top: 3px; 98 | 99 | color: #9e9ea6; 100 | border-bottom: 3px solid #e7543d; 101 | } 102 | 103 | #wdt-emoji-search, 104 | #wdt-emoji-search:focus { 105 | font-size: 15px; 106 | line-height: 20px; 107 | 108 | width: 95%; 109 | max-width: 100%; 110 | height: 28px; 111 | margin: .5rem 9px .6rem; 112 | padding: 15px 2rem; 113 | 114 | transition: border-color 150ms ease-out; 115 | 116 | color: #444; 117 | border: 1px solid #c5c5c5; 118 | border-radius: 3px; 119 | outline: none; 120 | } 121 | 122 | #wdt-emoji-search:focus { 123 | border-color: #a0a0a0; 124 | } 125 | 126 | .wdt-emoji-popup h3 { 127 | font-size: 15px; 128 | font-weight: 700; 129 | line-height: 15px; 130 | 131 | position: relative; 132 | 133 | margin: 0; 134 | padding: 8px; 135 | 136 | color: #555; 137 | background: rgba(255, 255, 255, .95); 138 | } 139 | 140 | .wdt-emoji-popup h3.sticky { 141 | position: absolute; 142 | z-index: 4; 143 | 144 | width: 330px; 145 | } 146 | 147 | .wdt-emoji-scroll-wrapper { 148 | overflow-x: hidden; 149 | overflow-y: scroll; 150 | -webkit-overflow-scrolling: touch; 151 | overflow-anchor: none; 152 | height: 257px; 153 | padding-bottom: 30px; 154 | } 155 | 156 | .wdt-emoji-sections { 157 | padding: 0 5px; 158 | } 159 | 160 | .wdt-emoji { 161 | line-height: 1rem; 162 | 163 | position: relative; 164 | 165 | display: inline-block; 166 | 167 | margin-right: 2.5px !important; 168 | margin-bottom: 1px; 169 | padding: 6px; 170 | 171 | -webkit-transition: background 500ms ease-out; 172 | -moz-transition: background 500ms ease-out; 173 | -ms-transition: background 500ms ease-out; 174 | -o-transition: background 500ms ease-out; 175 | transition: background 500ms ease-out; 176 | text-align: center; 177 | 178 | -webkit-border-radius: 6px; 179 | -moz-border-radius: 6px; 180 | border-radius: 6px; 181 | } 182 | 183 | .wdt-emoji.not-matched { 184 | display: none; 185 | } 186 | 187 | .wdt-emoji:hover { 188 | cursor: pointer; 189 | } 190 | 191 | .wdt-emoji.gray:hover { 192 | background-color: rgba(175, 175, 175, .32); 193 | } 194 | 195 | .wdt-emoji.green:hover { 196 | background-color: #b7e887; 197 | } 198 | 199 | .wdt-emoji.pink:hover { 200 | background-color: #f3c1fd; 201 | } 202 | 203 | .wdt-emoji.yellow:hover { 204 | background-color: #f9ef67; 205 | } 206 | 207 | .wdt-emoji.blue:hover { 208 | background-color: #b5e0fe; 209 | } 210 | 211 | .wdt-emoji-tab .emoji-outer { 212 | width: 18px; 213 | height: 18px; 214 | } 215 | 216 | span.emoji { 217 | display: -moz-inline-box; 218 | display: inline-block; 219 | 220 | width: 1em; 221 | height: 1em; 222 | 223 | vertical-align: baseline; 224 | text-indent: -9999px; 225 | 226 | background-repeat: no-repeat; 227 | background-position: 50%, 50%; 228 | background-size: 1em; 229 | background-size: contain; 230 | 231 | -moz-box-orient: vertical; 232 | *vertical-align: auto; 233 | *zoom: 1; 234 | *display: inline; 235 | } 236 | 237 | span.emoji-sizer { 238 | font-size: 1em; 239 | line-height: .81em; 240 | } 241 | 242 | span.emoji-outer { 243 | display: -moz-inline-box; 244 | display: inline-block; 245 | 246 | width: 22px; 247 | height: 22px; 248 | margin-top: -2px; 249 | 250 | vertical-align: middle; 251 | 252 | *display: inline; 253 | } 254 | 255 | span.emoji-inner { 256 | display: -moz-inline-box; 257 | display: inline-block; 258 | 259 | width: 100%; 260 | height: 100%; 261 | 262 | vertical-align: baseline; 263 | text-indent: -9999px; 264 | 265 | *vertical-align: auto; 266 | *zoom: 1; 267 | } 268 | 269 | img.emoji { 270 | width: 1em; 271 | height: 1em; 272 | } 273 | 274 | #wdt-emoji-footer { 275 | position: absolute; 276 | bottom: 0; 277 | left: 0; 278 | 279 | width: 100%; 280 | padding-bottom: .4rem; 281 | 282 | border-top: 1px solid rgba(0, 0, 0, .15); 283 | background: #f7f7f7; 284 | } 285 | 286 | #wdt-emoji-no-result { 287 | font-size: 10px; 288 | font-weight: 400; 289 | 290 | clear: both; 291 | 292 | padding: 20px; 293 | 294 | text-align: center; 295 | 296 | color: #bababa; 297 | } 298 | 299 | #wdt-emoji-preview { 300 | padding: .3rem 0 0 .7rem; 301 | 302 | -webkit-transition: opacity .1s ease-in .1s; 303 | -moz-transition: opacity .1s ease-in .1s; 304 | transition: opacity .1s ease-in .1s; 305 | 306 | opacity: 0; 307 | } 308 | 309 | #wdt-emoji-preview-img { 310 | font-size: 2rem; 311 | line-height: 2rem; 312 | 313 | float: left; 314 | 315 | width: 46px; 316 | height: 54px; 317 | padding: .6rem .5rem 0 .1rem; 318 | 319 | vertical-align: middle; 320 | } 321 | 322 | #wdt-emoji-preview-bundle { 323 | font-size: 17px; 324 | font-weight: bold; 325 | 326 | position: absolute; 327 | bottom: 19px; 328 | left: 14px; 329 | 330 | -webkit-transition: opacity .1s ease-in .1s; 331 | -moz-transition: opacity .1s ease-in .1s; 332 | transition: opacity .1s ease-in .1s; 333 | 334 | opacity: 1; 335 | color: #989ba0; 336 | } 337 | 338 | #wdt-emoji-search-result-title, 339 | #wdt-emoji-no-result { 340 | display: none; 341 | } 342 | 343 | #wdt-emoji-search-result-title.wdt-show, 344 | #wdt-emoji-no-result.wdt-show { 345 | display: block; 346 | 347 | margin: 0 5px; 348 | } 349 | 350 | .wdt-inline { 351 | display: inline; 352 | } 353 | 354 | .wdt-search-on { 355 | display: none; 356 | } 357 | 358 | .wdt-emoji-popup.preview-mode #wdt-emoji-preview-bundle { 359 | opacity: 0; 360 | } 361 | 362 | .wdt-emoji-popup.preview-mode #wdt-emoji-preview { 363 | opacity: 1; 364 | } 365 | 366 | #wdt-emoji-preview-img span.emoji-outer.emoji-sizer { 367 | position: relative; 368 | top: 3px; 369 | left: 4px; 370 | 371 | width: 40px; 372 | height: 40px; 373 | } 374 | 375 | #wdt-emoji-preview-text { 376 | font-size: 13px; 377 | 378 | position: relative; 379 | top: 9px; 380 | left: 10px !important; 381 | 382 | color: #777; 383 | } 384 | 385 | #wdt-emoji-preview-name { 386 | font-weight: bold; 387 | 388 | position: relative; 389 | left: 3px; 390 | 391 | color: #444; 392 | } 393 | 394 | .wdt-emoji-popup-mobile-closer { 395 | font-size: 25px !important; 396 | font-weight: bold; 397 | line-height: 35px; 398 | 399 | position: absolute; 400 | top: -35px; 401 | left: 50%; 402 | 403 | visibility: hidden; 404 | 405 | width: 40px; 406 | height: 35px; 407 | 408 | transform: translateX(-50%); 409 | text-align: center; 410 | 411 | opacity: 0; 412 | color: #444; 413 | border: 1px solid rgba(0, 0, 0, .1); 414 | border-bottom-color: #e7543d; 415 | border-radius: 50% 50% 0 0; 416 | background-color: rgba(255, 255, 255, .8); 417 | } 418 | 419 | /* iPhone 2G-4S-5-5S in portrait */ 420 | @media only screen 421 | and (min-device-width: 320px) 422 | and (max-device-width: 480px) 423 | and (orientation: portrait) { 424 | .wdt-emoji-picker { 425 | display: none; 426 | } 427 | 428 | .wdt-emoji-tab { 429 | width: 24px; 430 | } 431 | 432 | .wdt-emoji { 433 | margin-right: 0 !important; 434 | } 435 | 436 | #wdt-emoji-footer { 437 | display: none; 438 | } 439 | 440 | .wdt-emoji-scroll-wrapper { 441 | height: 170px; 442 | } 443 | 444 | .wdt-emoji-popup { 445 | height: 206px; 446 | 447 | -webkit-border-radius: 0; 448 | -moz-border-radius: 0; 449 | border-radius: 0; 450 | } 451 | 452 | #wdt-emoji-search { 453 | display: none; 454 | } 455 | 456 | .wdt-emoji-popup-mobile-closer { 457 | visibility: visible; 458 | 459 | opacity: 1; 460 | } 461 | 462 | .wdt-emoji-popup h3.sticky { 463 | width: 300px; 464 | } 465 | } 466 | 467 | /* iPhone 6 in portrait */ 468 | @media only screen 469 | and (min-device-width: 375px) 470 | and (max-device-width: 667px) 471 | and (orientation: portrait) { 472 | .wdt-emoji { 473 | margin-right: -1px !important; 474 | } 475 | 476 | .wdt-emoji-tab { 477 | width: 30px; 478 | } 479 | 480 | .wdt-emoji-popup h3.sticky { 481 | width: 359px; 482 | } 483 | } 484 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | wdt-emoji-bundle Demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |
86 |
87 | 88 |

wdt-emoji-bundle

:lollipop:

89 | 90 |

Slack like emoji picker with
apple, twitter, google, emojione, facebook, messenger
support.

91 | 92 | 95 | 96 |
97 | 98 |
99 | Apple 100 | Google 101 | Twitter 102 | Emojione 103 | Facebook 104 | Messenger 105 |
106 |
107 | 108 |
109 |
110 | 111 | 112 |
113 |
114 | 115 |
116 |
117 |
118 |
119 | 120 | 121 |
122 |
123 | 124 |
125 |
126 |
127 |
128 | 129 |
;) Hey! check :heart_eyes: this. :dog: :cat: :hamster:
130 |
131 |
132 | 133 |
134 |
135 |
136 |
137 | 138 | 139 |
140 | 141 |
142 |
143 | 144 |
145 |
    146 |
  • Better documentation. :neutral_face:
    • 147 |
  • Responsive Improvements. :wink:
    • 148 |
  • Better popup positioning :+1:
    • 149 |
  • Open on colon support for contenteditables :candy:
    • 150 |
  • Frequently used emoji list with localstorage and/or API. :robot_face:
    • 151 |
  • Provide more events; open, close, pickeropen, pickerclose etc. :tada:
    • 152 |
  • Custom emoji support. :wine_glass:
    • 153 |
  • Skin color support for apple/ios. :lion_face:
    • 154 |
  • Better contenteditable support, WYSIWYG? :nerd_face:
    • 155 |
  • Check browser compatibilities. :joystick:
    • 156 |
157 |
158 |
159 |
160 |
161 |

I :heart: opensource.

162 |
163 |
164 | 165 |
166 |
167 |
168 | 169 |
170 | × 171 |
172 |
173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 |
184 |
185 |
186 | 187 |

Search Results

188 |
189 |
No emoji found
190 |
191 |
192 | 205 |
206 |
207 | 208 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /emoji.min.js: -------------------------------------------------------------------------------- 1 | "use strict";(function(){var f=this,e=f.EmojiConvertor,a=function(){var f=this;return f.img_set="apple",f.img_sets={apple:{path:"/emoji-data/img-apple-64/",sheet:"/emoji-data/sheet_apple_64.png",mask:1},google:{path:"/emoji-data/img-google-64/",sheet:"/emoji-data/sheet_google_64.png",mask:2},twitter:{path:"/emoji-data/img-twitter-64/",sheet:"/emoji-data/sheet_twitter_64.png",mask:4},emojione:{path:"/emoji-data/img-emojione-64/",sheet:"/emoji-data/sheet_emojione_64.png",mask:8},facebook:{path:"/emoji-data/img-facebook-64/",sheet:"/emoji-data/sheet_facebook_64.png",mask:16},messenger:{path:"/emoji-data/img-messenger-64/",sheet:"/emoji-data/sheet_messenger_64.png",mask:32}},f.use_css_imgs=!1,f.colons_mode=!1,f.text_mode=!1,f.include_title=!1,f.include_text=!1,f.allow_native=!0,f.use_sheet=!1,f.avoid_ms_emoji=!0,f.allow_caps=!1,f.img_suffix="",f.inits={},f.map={},f.init_env(),f};a.prototype.noConflict=function(){return f.EmojiConvertor=e,a},a.prototype.replace_emoticons=function(f){var e=this,a=e.replace_emoticons_with_colons(f);return e.replace_colons(a)},a.prototype.replace_emoticons_with_colons=function(f){var e=this;e.init_emoticons();var a=0,o=[],t=f.replace(e.rx_emoticons,function(t,i,n,l){var r=a;a=l+t.length;var c=-1!==n.indexOf("("),_=-1!==n.indexOf(")");if((c||_)&&-1==o.indexOf(n)&&o.push(n),_&&!c){var s=f.substring(r,l);if(-1!==s.indexOf("(")&&-1===s.indexOf(")"))return t}if("\n8)"===t){var d=f.substring(0,l);if(/\n?(6\)|7\))/.test(d))return t}var g=e.data[e.map.emoticons[n]][3][0];return g?i+":"+g+":":t});if(o.length){var i=o.map(e.escape_rx),n=new RegExp("(\\(.+)("+i.join("|")+")(.+\\))","g");t=t.replace(n,function(f,a,o,t){var i=e.data[e.map.emoticons[o]][3][0];return i?a+":"+i+":"+t:f})}return t},a.prototype.replace_colons=function(f){var e=this;return e.init_colons(),f.replace(e.rx_colons,function(f){var a=f.substr(1,f.length-2);if(e.allow_caps&&(a=a.toLowerCase()),a.indexOf("::skin-tone-")>-1){var o=a.substr(-1,1),t="skin-tone-"+o,i=e.map.colons[t];a=a.substr(0,a.length-13);var n=e.map.colons[a];return n?e.replacement(n,a,":",{idx:i,actual:t,wrapper:":"}):":"+a+":"+e.replacement(i,t,":")}var n=e.map.colons[a];return n?e.replacement(n,a,":"):f})},a.prototype.replace_unified=function(f){var e=this;return e.init_unified(),f.replace(e.rx_unified,function(f,a,o){var t=e.map.unified[a];if(!t)return f;var i=null;return"🏻"==o&&(i="1f3fb"),"🏼"==o&&(i="1f3fc"),"🏽"==o&&(i="1f3fd"),"🏾"==o&&(i="1f3fe"),"🏿"==o&&(i="1f3ff"),i?e.replacement(t,null,null,{idx:i,actual:o,wrapper:""}):e.replacement(t)})},a.prototype.addAliases=function(f){var e=this;e.init_colons();for(var a in f)e.map.colons[a]=f[a]},a.prototype.removeAliases=function(f){for(var e=this,a=0;a'+d+""+n}return t.use_css_imgs?''+d+""+n:''+d+""+n}return'"+n},a.prototype.init_emoticons=function(){var f=this;if(!f.inits.emoticons){f.init_colons(),f.inits.emoticons=1;var e=[];f.map.emoticons={};for(var a in f.emoticons_data){var o=a.replace(/\&/g,"&").replace(/\/g,">");f.map.colons[f.emoticons_data[a]]&&(f.map.emoticons[o]=f.map.colons[f.emoticons_data[a]],e.push(f.escape_rx(o)))}f.rx_emoticons=new RegExp("(^|\\s)("+e.join("|")+")(?=$|[\\s|\\?\\.,!])","g")}},a.prototype.init_colons=function(){var f=this;if(!f.inits.colons){f.inits.colons=1,f.rx_colons=new RegExp(":[a-zA-Z0-9-_+]+:(:skin-tone-[2-6]:)?","g"),f.map.colons={};for(var e in f.data)for(var a=0;a":"laughing",":->":"laughing",";)":"wink",";-)":"wink","8)":"sunglasses",":|":"neutral_face",":-|":"neutral_face",":\\":"confused",":-\\":"confused",":/":"confused",":-/":"confused",":p":"stuck_out_tongue",":-p":"stuck_out_tongue",":P":"stuck_out_tongue",":-P":"stuck_out_tongue",":b":"stuck_out_tongue",":-b":"stuck_out_tongue",";p":"stuck_out_tongue_winking_eye",";-p":"stuck_out_tongue_winking_eye",";b":"stuck_out_tongue_winking_eye",";-b":"stuck_out_tongue_winking_eye",";P":"stuck_out_tongue_winking_eye",";-P":"stuck_out_tongue_winking_eye","):":"disappointed",":(":"disappointed",":-(":"disappointed",">:(":"angry",">:-(":"angry",":'(":"cry","D:":"anguished",":o":"open_mouth",":-o":"open_mouth",":O":"open_mouth",":-O":"open_mouth",":)":"slightly_smiling_face","(:":"slightly_smiling_face",":-)":"slightly_smiling_face"},a.prototype.variations_data={"261d-1f3fb":[1,11,15],"261d-1f3fc":[1,12,15],"261d-1f3fd":[1,13,15],"261d-1f3fe":[1,14,15],"261d-1f3ff":[1,15,15],"26f9-1f3fb":[2,39,15],"26f9-1f3fc":[2,40,15],"26f9-1f3fd":[3,0,15],"26f9-1f3fe":[3,1,15],"26f9-1f3ff":[3,2,15],"270a-1f3fb":[3,10,15],"270a-1f3fc":[3,11,15],"270a-1f3fd":[3,12,15],"270a-1f3fe":[3,13,15],"270a-1f3ff":[3,14,15],"270b-1f3fb":[3,16,15],"270b-1f3fc":[3,17,15],"270b-1f3fd":[3,18,15],"270b-1f3fe":[3,19,15],"270b-1f3ff":[3,20,15],"270c-1f3fb":[3,22,15],"270c-1f3fc":[3,23,15],"270c-1f3fd":[3,24,15],"270c-1f3fe":[3,25,15],"270c-1f3ff":[3,26,15],"270d-1f3fb":[3,28,15],"270d-1f3fc":[3,29,15],"270d-1f3fd":[3,30,15],"270d-1f3fe":[3,31,15],"270d-1f3ff":[3,32,15],"1f385-1f3fb":[8,30,15],"1f385-1f3fc":[8,31,15],"1f385-1f3fd":[8,32,15],"1f385-1f3fe":[8,33,15],"1f385-1f3ff":[8,34,15],"1f3c3-1f3fb":[10,10,15],"1f3c3-1f3fc":[10,11,15],"1f3c3-1f3fd":[10,12,15],"1f3c3-1f3fe":[10,13,15],"1f3c3-1f3ff":[10,14,15],"1f3c4-1f3fb":[10,16,15],"1f3c4-1f3fc":[10,17,15],"1f3c4-1f3fd":[10,18,15],"1f3c4-1f3fe":[10,19,15],"1f3c4-1f3ff":[10,20,15],"1f3ca-1f3fb":[10,27,15],"1f3ca-1f3fc":[10,28,15],"1f3ca-1f3fd":[10,29,15],"1f3ca-1f3fe":[10,30,15],"1f3ca-1f3ff":[10,31,15],"1f3cb-1f3fb":[10,33,15],"1f3cb-1f3fc":[10,34,15],"1f3cb-1f3fd":[10,35,15],"1f3cb-1f3fe":[10,36,15],"1f3cb-1f3ff":[10,37,15],"1f442-1f3fb":[13,31,15],"1f442-1f3fc":[13,32,15],"1f442-1f3fd":[13,33,15],"1f442-1f3fe":[13,34,15],"1f442-1f3ff":[13,35,15],"1f443-1f3fb":[13,37,15],"1f443-1f3fc":[13,38,15],"1f443-1f3fd":[13,39,15],"1f443-1f3fe":[13,40,15],"1f443-1f3ff":[14,0,15],"1f446-1f3fb":[14,4,15],"1f446-1f3fc":[14,5,15],"1f446-1f3fd":[14,6,15],"1f446-1f3fe":[14,7,15],"1f446-1f3ff":[14,8,15],"1f447-1f3fb":[14,10,15],"1f447-1f3fc":[14,11,15],"1f447-1f3fd":[14,12,15],"1f447-1f3fe":[14,13,15],"1f447-1f3ff":[14,14,15],"1f448-1f3fb":[14,16,15],"1f448-1f3fc":[14,17,15],"1f448-1f3fd":[14,18,15],"1f448-1f3fe":[14,19,15],"1f448-1f3ff":[14,20,15],"1f449-1f3fb":[14,22,15],"1f449-1f3fc":[14,23,15],"1f449-1f3fd":[14,24,15],"1f449-1f3fe":[14,25,15],"1f449-1f3ff":[14,26,15],"1f44a-1f3fb":[14,28,15],"1f44a-1f3fc":[14,29,15],"1f44a-1f3fd":[14,30,15],"1f44a-1f3fe":[14,31,15],"1f44a-1f3ff":[14,32,15],"1f44b-1f3fb":[14,34,15],"1f44b-1f3fc":[14,35,15],"1f44b-1f3fd":[14,36,15],"1f44b-1f3fe":[14,37,15],"1f44b-1f3ff":[14,38,15],"1f44c-1f3fb":[14,40,15],"1f44c-1f3fc":[15,0,15],"1f44c-1f3fd":[15,1,15],"1f44c-1f3fe":[15,2,15],"1f44c-1f3ff":[15,3,15],"1f44d-1f3fb":[15,5,15],"1f44d-1f3fc":[15,6,15],"1f44d-1f3fd":[15,7,15],"1f44d-1f3fe":[15,8,15],"1f44d-1f3ff":[15,9,15],"1f44e-1f3fb":[15,11,15],"1f44e-1f3fc":[15,12,15],"1f44e-1f3fd":[15,13,15],"1f44e-1f3fe":[15,14,15],"1f44e-1f3ff":[15,15,15],"1f44f-1f3fb":[15,17,15],"1f44f-1f3fc":[15,18,15],"1f44f-1f3fd":[15,19,15],"1f44f-1f3fe":[15,20,15],"1f44f-1f3ff":[15,21,15],"1f450-1f3fb":[15,23,15],"1f450-1f3fc":[15,24,15],"1f450-1f3fd":[15,25,15],"1f450-1f3fe":[15,26,15],"1f450-1f3ff":[15,27,15],"1f466-1f3fb":[16,9,15],"1f466-1f3fc":[16,10,15],"1f466-1f3fd":[16,11,15],"1f466-1f3fe":[16,12,15],"1f466-1f3ff":[16,13,15],"1f467-1f3fb":[16,15,15],"1f467-1f3fc":[16,16,15],"1f467-1f3fd":[16,17,15],"1f467-1f3fe":[16,18,15],"1f467-1f3ff":[16,19,15],"1f468-1f3fb":[16,21,15],"1f468-1f3fc":[16,22,15],"1f468-1f3fd":[16,23,15],"1f468-1f3fe":[16,24,15],"1f468-1f3ff":[16,25,15],"1f469-1f3fb":[16,27,15],"1f469-1f3fc":[16,28,15],"1f469-1f3fd":[16,29,15],"1f469-1f3fe":[16,30,15],"1f469-1f3ff":[16,31,15],"1f46e-1f3fb":[16,37,15],"1f46e-1f3fc":[16,38,15],"1f46e-1f3fd":[16,39,15],"1f46e-1f3fe":[16,40,15],"1f46e-1f3ff":[17,0,15],"1f470-1f3fb":[17,3,15],"1f470-1f3fc":[17,4,15],"1f470-1f3fd":[17,5,15],"1f470-1f3fe":[17,6,15],"1f470-1f3ff":[17,7,15],"1f471-1f3fb":[17,9,15],"1f471-1f3fc":[17,10,15],"1f471-1f3fd":[17,11,15],"1f471-1f3fe":[17,12,15],"1f471-1f3ff":[17,13,15],"1f472-1f3fb":[17,15,15],"1f472-1f3fc":[17,16,15],"1f472-1f3fd":[17,17,15],"1f472-1f3fe":[17,18,15],"1f472-1f3ff":[17,19,15],"1f473-1f3fb":[17,21,15],"1f473-1f3fc":[17,22,15],"1f473-1f3fd":[17,23,15],"1f473-1f3fe":[17,24,15],"1f473-1f3ff":[17,25,15],"1f474-1f3fb":[17,27,15],"1f474-1f3fc":[17,28,15],"1f474-1f3fd":[17,29,15],"1f474-1f3fe":[17,30,15],"1f474-1f3ff":[17,31,15],"1f475-1f3fb":[17,33,15],"1f475-1f3fc":[17,34,15],"1f475-1f3fd":[17,35,15],"1f475-1f3fe":[17,36,15],"1f475-1f3ff":[17,37,15],"1f476-1f3fb":[17,39,15],"1f476-1f3fc":[17,40,15],"1f476-1f3fd":[18,0,15],"1f476-1f3fe":[18,1,15],"1f476-1f3ff":[18,2,15],"1f477-1f3fb":[18,4,15],"1f477-1f3fc":[18,5,15],"1f477-1f3fd":[18,6,15],"1f477-1f3fe":[18,7,15],"1f477-1f3ff":[18,8,15],"1f478-1f3fb":[18,10,15],"1f478-1f3fc":[18,11,15],"1f478-1f3fd":[18,12,15],"1f478-1f3fe":[18,13,15],"1f478-1f3ff":[18,14,15],"1f47c-1f3fb":[18,19,15],"1f47c-1f3fc":[18,20,15],"1f47c-1f3fd":[18,21,15],"1f47c-1f3fe":[18,22,15],"1f47c-1f3ff":[18,23,15],"1f481-1f3fb":[18,29,15],"1f481-1f3fc":[18,30,15],"1f481-1f3fd":[18,31,15],"1f481-1f3fe":[18,32,15],"1f481-1f3ff":[18,33,15],"1f482-1f3fb":[18,35,15],"1f482-1f3fc":[18,36,15],"1f482-1f3fd":[18,37,15],"1f482-1f3fe":[18,38,15],"1f482-1f3ff":[18,39,15],"1f483-1f3fb":[19,0,15],"1f483-1f3fc":[19,1,15],"1f483-1f3fd":[19,2,15],"1f483-1f3fe":[19,3,15],"1f483-1f3ff":[19,4,15],"1f485-1f3fb":[19,7,15],"1f485-1f3fc":[19,8,15],"1f485-1f3fd":[19,9,15],"1f485-1f3fe":[19,10,15],"1f485-1f3ff":[19,11,15],"1f486-1f3fb":[19,13,15],"1f486-1f3fc":[19,14,15],"1f486-1f3fd":[19,15,15],"1f486-1f3fe":[19,16,15],"1f486-1f3ff":[19,17,15],"1f487-1f3fb":[19,19,15],"1f487-1f3fc":[19,20,15],"1f487-1f3fd":[19,21,15],"1f487-1f3fe":[19,22,15],"1f487-1f3ff":[19,23,15],"1f4aa-1f3fb":[20,18,15],"1f4aa-1f3fc":[20,19,15],"1f4aa-1f3fd":[20,20,15],"1f4aa-1f3fe":[20,21,15],"1f4aa-1f3ff":[20,22,15],"1f575-1f3fb":[24,40,11],"1f575-1f3fc":[25,0,11],"1f575-1f3fd":[25,1,11],"1f575-1f3fe":[25,2,11],"1f575-1f3ff":[25,3,11],"1f590-1f3fb":[25,14,15],"1f590-1f3fc":[25,15,15],"1f590-1f3fd":[25,16,15],"1f590-1f3fe":[25,17,15],"1f590-1f3ff":[25,18,15],"1f595-1f3fb":[25,20,15],"1f595-1f3fc":[25,21,15],"1f595-1f3fd":[25,22,15],"1f595-1f3fe":[25,23,15],"1f595-1f3ff":[25,24,15],"1f596-1f3fb":[25,26,15],"1f596-1f3fc":[25,27,15],"1f596-1f3fd":[25,28,15],"1f596-1f3fe":[25,29,15],"1f596-1f3ff":[25,30,15],"1f645-1f3fb":[28,3,15],"1f645-1f3fc":[28,4,15],"1f645-1f3fd":[28,5,15],"1f645-1f3fe":[28,6,15],"1f645-1f3ff":[28,7,15],"1f646-1f3fb":[28,9,15],"1f646-1f3fc":[28,10,15],"1f646-1f3fd":[28,11,15],"1f646-1f3fe":[28,12,15],"1f646-1f3ff":[28,13,15],"1f647-1f3fb":[28,15,15],"1f647-1f3fc":[28,16,15],"1f647-1f3fd":[28,17,15],"1f647-1f3fe":[28,18,15],"1f647-1f3ff":[28,19,15],"1f64b-1f3fb":[28,24,15],"1f64b-1f3fc":[28,25,15],"1f64b-1f3fd":[28,26,15],"1f64b-1f3fe":[28,27,15],"1f64b-1f3ff":[28,28,15],"1f64c-1f3fb":[28,30,15],"1f64c-1f3fc":[28,31,15],"1f64c-1f3fd":[28,32,15],"1f64c-1f3fe":[28,33,15],"1f64c-1f3ff":[28,34,15],"1f64d-1f3fb":[28,36,15],"1f64d-1f3fc":[28,37,15],"1f64d-1f3fd":[28,38,15],"1f64d-1f3fe":[28,39,15],"1f64d-1f3ff":[28,40,15],"1f64e-1f3fb":[29,1,15],"1f64e-1f3fc":[29,2,15],"1f64e-1f3fd":[29,3,15],"1f64e-1f3fe":[29,4,15],"1f64e-1f3ff":[29,5,15],"1f64f-1f3fb":[29,7,15],"1f64f-1f3fc":[29,8,15],"1f64f-1f3fd":[29,9,15],"1f64f-1f3fe":[29,10,15],"1f64f-1f3ff":[29,11,15],"1f6a3-1f3fb":[30,7,15],"1f6a3-1f3fc":[30,8,15],"1f6a3-1f3fd":[30,9,15],"1f6a3-1f3fe":[30,10,15],"1f6a3-1f3ff":[30,11,15],"1f6b4-1f3fb":[30,29,15],"1f6b4-1f3fc":[30,30,15],"1f6b4-1f3fd":[30,31,15],"1f6b4-1f3fe":[30,32,15],"1f6b4-1f3ff":[30,33,15],"1f6b5-1f3fb":[30,35,15],"1f6b5-1f3fc":[30,36,15],"1f6b5-1f3fd":[30,37,15],"1f6b5-1f3fe":[30,38,15],"1f6b5-1f3ff":[30,39,15],"1f6b6-1f3fb":[31,0,15],"1f6b6-1f3fc":[31,1,15],"1f6b6-1f3fd":[31,2,15],"1f6b6-1f3fe":[31,3,15],"1f6b6-1f3ff":[31,4,15],"1f6c0-1f3fb":[31,15,15],"1f6c0-1f3fc":[31,16,15],"1f6c0-1f3fd":[31,17,15],"1f6c0-1f3fe":[31,18,15],"1f6c0-1f3ff":[31,19,15],"1f918-1f3fb":[32,10,15],"1f918-1f3fc":[32,11,15],"1f918-1f3fd":[32,12,15],"1f918-1f3fe":[32,13,15],"1f918-1f3ff":[32,14,15]},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=a),exports.EmojiConvertor=a):"function"==typeof define&&define.amd?define(function(){return a}):f.EmojiConvertor=a}).call(function(){return this||("undefined"!=typeof window?window:global)}()); --------------------------------------------------------------------------------