Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use EmojiButton method in storybook-root
Best JavaScript code snippet using storybook-root
awards_handler.js
Source:awards_handler.js 
1/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, no-var, spaced-comment, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-template, quotes, comma-dangle, no-param-reassign, no-void, radix, keyword-spacing, space-before-blocks, brace-style, no-underscore-dangle, no-undef, no-plusplus, no-return-assign, camelcase, padded-blocks, max-len */2(function() {3 this.AwardsHandler = (function() {4 var FROM_SENTENCE_REGEX = /(?:, and | and |, )/; //For separating lists produced by ruby's Array#toSentence5 function AwardsHandler() {6 this.aliases = gl.emojiAliases();7 $(document).off('click', '.js-add-award').on('click', '.js-add-award', (function(_this) {8 return function(e) {9 e.stopPropagation();10 e.preventDefault();11 return _this.showEmojiMenu($(e.currentTarget));12 };13 })(this));14 $('html').on('click', function(e) {15 var $target;16 $target = $(e.target);17 if (!$target.closest('.emoji-menu-content').length) {18 $('.js-awards-block.current').removeClass('current');19 }20 if (!$target.closest('.emoji-menu').length) {21 if ($('.emoji-menu').is(':visible')) {22 $('.js-add-award.is-active').removeClass('is-active');23 return $('.emoji-menu').removeClass('is-visible');24 }25 }26 });27 $(document).off('click', '.js-emoji-btn').on('click', '.js-emoji-btn', (function(_this) {28 return function(e) {29 var $target, emoji;30 e.preventDefault();31 $target = $(e.currentTarget);32 emoji = $target.find('.icon').data('emoji');33 $target.closest('.js-awards-block').addClass('current');34 return _this.addAward(_this.getVotesBlock(), _this.getAwardUrl(), emoji);35 };36 })(this));37 }38 AwardsHandler.prototype.showEmojiMenu = function($addBtn) {39 var $holder, $menu, url;40 $menu = $('.emoji-menu');41 if ($addBtn.hasClass('js-note-emoji')) {42 $addBtn.closest('.note').find('.js-awards-block').addClass('current');43 } else {44 $addBtn.closest('.js-awards-block').addClass('current');45 }46 if ($menu.length) {47 $holder = $addBtn.closest('.js-award-holder');48 if ($menu.is('.is-visible')) {49 $addBtn.removeClass('is-active');50 $menu.removeClass('is-visible');51 return $('#emoji_search').blur();52 } else {53 $addBtn.addClass('is-active');54 this.positionMenu($menu, $addBtn);55 $menu.addClass('is-visible');56 return $('#emoji_search').focus();57 }58 } else {59 $addBtn.addClass('is-loading is-active');60 url = this.getAwardMenuUrl();61 return this.createEmojiMenu(url, (function(_this) {62 return function() {63 $addBtn.removeClass('is-loading');64 $menu = $('.emoji-menu');65 _this.positionMenu($menu, $addBtn);66 if (!_this.frequentEmojiBlockRendered) {67 _this.renderFrequentlyUsedBlock();68 }69 return setTimeout(function() {70 $menu.addClass('is-visible');71 $('#emoji_search').focus();72 return _this.setupSearch();73 }, 200);74 };75 })(this));76 }77 };78 AwardsHandler.prototype.createEmojiMenu = function(awardMenuUrl, callback) {79 return $.get(awardMenuUrl, function(response) {80 $('body').append(response);81 return callback();82 });83 };84 AwardsHandler.prototype.positionMenu = function($menu, $addBtn) {85 var css, position;86 position = $addBtn.data('position');87 // The menu could potentially be off-screen or in a hidden overflow element88 // So we position the element absolute in the body89 css = {90 top: ($addBtn.offset().top + $addBtn.outerHeight()) + "px"91 };92 if (position === 'right') {93 css.left = (($addBtn.offset().left - $menu.outerWidth()) + 20) + "px";94 $menu.addClass('is-aligned-right');95 } else {96 css.left = ($addBtn.offset().left) + "px";97 $menu.removeClass('is-aligned-right');98 }99 return $menu.css(css);100 };101 AwardsHandler.prototype.addAward = function(votesBlock, awardUrl, emoji, checkMutuality, callback) {102 if (checkMutuality == null) {103 checkMutuality = true;104 }105 emoji = this.normilizeEmojiName(emoji);106 this.postEmoji(awardUrl, emoji, (function(_this) {107 return function() {108 _this.addAwardToEmojiBar(votesBlock, emoji, checkMutuality);109 return typeof callback === "function" ? callback() : void 0;110 };111 })(this));112 return $('.emoji-menu').removeClass('is-visible');113 };114 AwardsHandler.prototype.addAwardToEmojiBar = function(votesBlock, emoji, checkForMutuality) {115 var $emojiButton, counter;116 if (checkForMutuality == null) {117 checkForMutuality = true;118 }119 if (checkForMutuality) {120 this.checkMutuality(votesBlock, emoji);121 }122 this.addEmojiToFrequentlyUsedList(emoji);123 emoji = this.normilizeEmojiName(emoji);124 $emojiButton = this.findEmojiIcon(votesBlock, emoji).parent();125 if ($emojiButton.length > 0) {126 if (this.isActive($emojiButton)) {127 return this.decrementCounter($emojiButton, emoji);128 } else {129 counter = $emojiButton.find('.js-counter');130 counter.text(parseInt(counter.text()) + 1);131 $emojiButton.addClass('active');132 this.addYouToUserList(votesBlock, emoji);133 return this.animateEmoji($emojiButton);134 }135 } else {136 votesBlock.removeClass('hidden');137 return this.createEmoji(votesBlock, emoji);138 }139 };140 AwardsHandler.prototype.getVotesBlock = function() {141 var currentBlock;142 currentBlock = $('.js-awards-block.current');143 if (currentBlock.length) {144 return currentBlock;145 } else {146 return $('.js-awards-block').eq(0);147 }148 };149 AwardsHandler.prototype.getAwardUrl = function() {150 return this.getVotesBlock().data('award-url');151 };152 AwardsHandler.prototype.checkMutuality = function(votesBlock, emoji) {153 var $emojiButton, awardUrl, isAlreadyVoted, mutualVote;154 awardUrl = this.getAwardUrl();155 if (emoji === 'thumbsup' || emoji === 'thumbsdown') {156 mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';157 $emojiButton = votesBlock.find("[data-emoji=" + mutualVote + "]").parent();158 isAlreadyVoted = $emojiButton.hasClass('active');159 if (isAlreadyVoted) {160 this.addAward(votesBlock, awardUrl, mutualVote, false);161 }162 }163 };164 AwardsHandler.prototype.isActive = function($emojiButton) {165 return $emojiButton.hasClass('active');166 };167 AwardsHandler.prototype.decrementCounter = function($emojiButton, emoji) {168 var counter, counterNumber;169 counter = $('.js-counter', $emojiButton);170 counterNumber = parseInt(counter.text(), 10);171 if (counterNumber > 1) {172 counter.text(counterNumber - 1);173 this.removeYouFromUserList($emojiButton, emoji);174 } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {175 $emojiButton.tooltip('destroy');176 counter.text('0');177 this.removeYouFromUserList($emojiButton, emoji);178 if ($emojiButton.parents('.note').length) {179 this.removeEmoji($emojiButton);180 }181 } else {182 this.removeEmoji($emojiButton);183 }184 return $emojiButton.removeClass('active');185 };186 AwardsHandler.prototype.removeEmoji = function($emojiButton) {187 var $votesBlock;188 $emojiButton.tooltip('destroy');189 $emojiButton.remove();190 $votesBlock = this.getVotesBlock();191 if ($votesBlock.find('.js-emoji-btn').length === 0) {192 return $votesBlock.addClass('hidden');193 }194 };195 AwardsHandler.prototype.getAwardTooltip = function($awardBlock) {196 return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';197 };198 AwardsHandler.prototype.toSentence = function(list) {199 if(list.length <= 2){200 return list.join(' and ');201 }202 else{203 return list.slice(0, -1).join(', ') + ', and ' + list[list.length - 1];204 }205 };206 AwardsHandler.prototype.removeYouFromUserList = function($emojiButton, emoji) {207 var authors, awardBlock, newAuthors, originalTitle;208 awardBlock = $emojiButton;209 originalTitle = this.getAwardTooltip(awardBlock);210 authors = originalTitle.split(FROM_SENTENCE_REGEX);211 authors.splice(authors.indexOf('You'), 1);212 return awardBlock213 .closest('.js-emoji-btn')214 .removeData('title')215 .removeAttr('data-title')216 .removeAttr('data-original-title')217 .attr('title', this.toSentence(authors))218 .tooltip('fixTitle');219 };220 AwardsHandler.prototype.addYouToUserList = function(votesBlock, emoji) {221 var awardBlock, origTitle, users;222 awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();223 origTitle = this.getAwardTooltip(awardBlock);224 users = [];225 if (origTitle) {226 users = origTitle.trim().split(FROM_SENTENCE_REGEX);227 }228 users.unshift('You');229 return awardBlock230 .attr('title', this.toSentence(users))231 .tooltip('fixTitle');232 };233 AwardsHandler.prototype.createEmoji_ = function(votesBlock, emoji) {234 var $emojiButton, buttonHtml, emojiCssClass;235 emojiCssClass = this.resolveNameToCssClass(emoji);236 buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='You' data-placement='bottom'> <div class='icon emoji-icon " + emojiCssClass + "' data-emoji='" + emoji + "'></div> <span class='award-control-text js-counter'>1</span> </button>";237 $emojiButton = $(buttonHtml);238 $emojiButton.insertBefore(votesBlock.find('.js-award-holder')).find('.emoji-icon').data('emoji', emoji);239 this.animateEmoji($emojiButton);240 $('.award-control').tooltip();241 return votesBlock.removeClass('current');242 };243 AwardsHandler.prototype.animateEmoji = function($emoji) {244 var className = 'pulse animated once short';245 $emoji.addClass(className);246 $emoji.on('webkitAnimationEnd animationEnd', function() {247 $(this).removeClass(className);248 });249 };250 AwardsHandler.prototype.createEmoji = function(votesBlock, emoji) {251 if ($('.emoji-menu').length) {252 return this.createEmoji_(votesBlock, emoji);253 }254 return this.createEmojiMenu(this.getAwardMenuUrl(), (function(_this) {255 return function() {256 return _this.createEmoji_(votesBlock, emoji);257 };258 })(this));259 };260 AwardsHandler.prototype.getAwardMenuUrl = function() {261 return gon.award_menu_url;262 };263 AwardsHandler.prototype.resolveNameToCssClass = function(emoji) {264 var emojiIcon, unicodeName;265 emojiIcon = $(".emoji-menu-content [data-emoji='" + emoji + "']");266 if (emojiIcon.length > 0) {267 unicodeName = emojiIcon.data('unicode-name');268 } else {269 // Find by alias270 unicodeName = $(".emoji-menu-content [data-aliases*=':" + emoji + ":']").data('unicode-name');271 }272 return "emoji-" + unicodeName;273 };274 AwardsHandler.prototype.postEmoji = function(awardUrl, emoji, callback) {275 return $.post(awardUrl, {276 name: emoji277 }, function(data) {278 if (data.ok) {279 return callback();280 }281 });282 };283 AwardsHandler.prototype.findEmojiIcon = function(votesBlock, emoji) {284 return votesBlock.find(".js-emoji-btn [data-emoji='" + emoji + "']");285 };286 AwardsHandler.prototype.scrollToAwards = function() {287 var options;288 options = {289 scrollTop: $('.awards').offset().top - 110290 };291 return $('body, html').animate(options, 200);292 };293 AwardsHandler.prototype.normilizeEmojiName = function(emoji) {294 return this.aliases[emoji] || emoji;295 };296 AwardsHandler.prototype.addEmojiToFrequentlyUsedList = function(emoji) {297 var frequentlyUsedEmojis;298 frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();299 frequentlyUsedEmojis.push(emoji);300 Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });301 };302 AwardsHandler.prototype.getFrequentlyUsedEmojis = function() {303 var frequentlyUsedEmojis;304 frequentlyUsedEmojis = (Cookies.get('frequently_used_emojis') || '').split(',');305 return _.compact(_.uniq(frequentlyUsedEmojis));306 };307 AwardsHandler.prototype.renderFrequentlyUsedBlock = function() {308 var emoji, frequentlyUsedEmojis, i, len, ul;309 if (Cookies.get('frequently_used_emojis')) {310 frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();311 ul = $("<ul class='clearfix emoji-menu-list frequent-emojis'>");312 for (i = 0, len = frequentlyUsedEmojis.length; i < len; i++) {313 emoji = frequentlyUsedEmojis[i];314 $(".emoji-menu-content [data-emoji='" + emoji + "']").closest('li').clone().appendTo(ul);315 }316 $('.emoji-menu-content').prepend(ul).prepend($('<h5>').text('Frequently used'));317 }318 return this.frequentEmojiBlockRendered = true;319 };320 AwardsHandler.prototype.setupSearch = function() {321 return $('input.emoji-search').on('keyup', (function(_this) {322 return function(ev) {323 var found_emojis, h5, term, ul;324 term = $(ev.target).val();325 // Clean previous search results326 $('ul.emoji-menu-search, h5.emoji-search').remove();327 if (term) {328 // Generate a search result block329 h5 = $('<h5 class="emoji-search" />').text('Search results');330 found_emojis = _this.searchEmojis(term).show();331 ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(found_emojis);332 $('.emoji-menu-content ul, .emoji-menu-content h5').hide();333 return $('.emoji-menu-content').append(h5).append(ul);334 } else {335 return $('.emoji-menu-content').children().show();336 }337 };338 })(this));339 };340 AwardsHandler.prototype.searchEmojis = function(term) {341 return $(".emoji-menu-list:not(.frequent-emojis) [data-emoji*='" + term + "']").closest('li').clone();342 };343 return AwardsHandler;344 })();...
simditor-emoji.js
Source:simditor-emoji.js
...30 EmojiButton.images = ['smile.png', 'smiley.png', 'laughing.png', 'blush.png', 'heart_eyes.png', 'smirk.png', 'flushed.png', 'grin.png', 'wink.png', 'kissing_closed_eyes.png', 'stuck_out_tongue_winking_eye.png', 'stuck_out_tongue.png', 'sleeping.png', 'worried.png', 'expressionless.png', 'sweat_smile.png', 'cold_sweat.png', 'joy.png', 'sob.png', 'angry.png', 'mask.png', 'scream.png', 'sunglasses.png', 'heart.png', 'broken_heart.png', 'star.png', 'anger.png', 'exclamation.png', 'question.png', 'zzz.png', 'thumbsup.png', 'thumbsdown.png', 'ok_hand.png', 'punch.png', 'v.png', 'clap.png', 'muscle.png', 'pray.png', 'skull.png', 'trollface.png'];31 EmojiButton.prototype.name = 'emoji';32 EmojiButton.prototype.icon = 'smile-o';33 EmojiButton.prototype.menu = true;34 function EmojiButton() {35 var args;36 args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];37 EmojiButton.__super__.constructor.apply(this, args);38 $.merge(this.editor.formatter._allowedAttributes['img'], ['data-emoji', 'alt']);39 }40 EmojiButton.prototype.renderMenu = function() {41 var $list, dir, html, name, opts, src, tpl, _i, _len, _ref;42 tpl = '<ul class="emoji-list">\n</ul>';43 opts = $.extend({44 imagePath: 'images/emoji/',45 images: EmojiButton.images46 }, this.editor.opts.emoji || {});47 html = "";48 dir = opts.imagePath.replace(/\/$/, '') + '/';...
Using AI Code Generation
1import EmojiButton from 'storybook-root/dist/components/EmojiButton'2@import "~storybook-root/dist/components/EmojiButton/style.css";3import React from 'react';4import { storiesOf } from '@storybook/react';5import { action } from '@storybook/addon-actions';6import { linkTo } from '@storybook/addon-links';7import EmojiButton from './test';8storiesOf('EmojiButton', module)9 .add('with text', () => (10 <EmojiButton onClick={action('clicked')}>😀 😎 👍 💯</EmojiButton>11 .add('with some emoji', () => (12 <EmojiButton onClick={action('clicked')}>😀 😎 👍 💯</EmojiButton>13 .add('with some emoji and action', () => (14 <EmojiButton onClick={action('clicked')}>😀 😎 👍 💯</EmojiButton>15 ));
Using AI Code Generation
1import { EmojiButton } from 'storybook-root'2import React from 'react'3import { storiesOf } from '@storybook/react'4import { EmojiButton } from 'storybook-root'5storiesOf('EmojiButton', module)6 .add('default', () => (7MIT © [prateekbh](
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
