\n \n $emit('arrowLeft', $event)\"\n @keydown.right=\"() => $emit('arrowRight')\"\n @keydown.down=\"() => $emit('arrowDown')\"\n @keydown.up=\"($event) => $emit('arrowUp', $event)\"\n @keydown.enter=\"() => $emit('enter')\"\n v-model=\"value\"\n />\n Use the left, right, up and down arrow keys to navigate the emoji search\n results.\n
\n\n\n\n","// http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating\n\n// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel\n\n// MIT license\n\nvar isWindowAvailable = typeof window !== 'undefined'\n\nisWindowAvailable &&\n (function () {\n var lastTime = 0\n var vendors = ['ms', 'moz', 'webkit', 'o']\n\n for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\n window.requestAnimationFrame =\n window[vendors[x] + 'RequestAnimationFrame']\n window.cancelAnimationFrame =\n window[vendors[x] + 'CancelAnimationFrame'] ||\n window[vendors[x] + 'CancelRequestAnimationFrame']\n }\n\n if (!window.requestAnimationFrame)\n window.requestAnimationFrame = function (callback, element) {\n var currTime = new Date().getTime()\n var timeToCall = Math.max(0, 16 - (currTime - lastTime))\n var id = window.setTimeout(function () {\n callback(currTime + timeToCall)\n }, timeToCall)\n\n lastTime = currTime + timeToCall\n return id\n }\n\n if (!window.cancelAnimationFrame)\n window.cancelAnimationFrame = function (id) {\n clearTimeout(id)\n }\n })()\n","export class PickerView {\n constructor(pickerComponent) {\n this._vm = pickerComponent\n this._data = pickerComponent.data\n this._perLine = pickerComponent.perLine\n\n this._categories = []\n this._categories.push(...this._data.categories())\n this._categories = this._categories.filter((category) => {\n return category.emojis.length > 0\n })\n\n this._categories[0].first = true\n Object.freeze(this._categories)\n\n this.activeCategory = this._categories[0]\n this.searchEmojis = null\n\n // Preview emoji, shown on mouse over or when we move\n // with arrow keys.\n this.previewEmoji = null\n // Indexes are used to keep the position when moving\n // with arrows: current category and current emoji\n // inside the category.\n this.previewEmojiCategoryIdx = 0\n this.previewEmojiIdx = -1\n }\n\n onScroll() {\n const scrollElement = this._vm.$refs.scroll\n\n if (!scrollElement) {\n // Reported in https://github.com/serebrov/emoji-mart-vue/issues/305\n // Would be good to understand how it can happen, but at least\n // exiting early we prevent the error.\n return\n }\n\n const scrollTop = scrollElement.scrollTop\n\n let activeCategory = this.filteredCategories[0]\n for (let i = 0, l = this.filteredCategories.length; i < l; i++) {\n let category = this.filteredCategories[i]\n let component = this._vm.getCategoryComponent(i)\n // The `-50` offset switches active category (selected in the\n // anchors bar) a bit eariler, before it actually reaches the top.\n if (component && component.$el.offsetTop - 50 > scrollTop) {\n break\n }\n activeCategory = category\n }\n this.activeCategory = activeCategory\n }\n\n get allCategories() {\n return this._categories\n }\n\n get filteredCategories() {\n if (this.searchEmojis) {\n return [\n {\n id: 'search',\n name: 'Search',\n emojis: this.searchEmojis,\n },\n ]\n }\n return this._categories.filter((category) => {\n let hasEmojis = category.emojis.length > 0\n return hasEmojis\n })\n }\n\n get previewEmojiCategory() {\n if (this.previewEmojiCategoryIdx >= 0) {\n return this.filteredCategories[this.previewEmojiCategoryIdx]\n }\n return null\n }\n\n onAnchorClick(category) {\n if (this.searchEmojis) {\n // No categories are shown when search is active.\n return\n }\n let i = this.filteredCategories.indexOf(category)\n let component = this._vm.getCategoryComponent(i)\n let scrollToComponent = () => {\n if (component) {\n let top = component.$el.offsetTop\n if (category.first) {\n top = 0\n }\n this._vm.$refs.scroll.scrollTop = top\n }\n }\n if (this._vm.infiniteScroll) {\n scrollToComponent()\n } else {\n this.activeCategory = this.filteredCategories[i]\n }\n }\n\n onSearch(value) {\n let emojis = this._data.search(value, this.maxSearchResults)\n this.searchEmojis = emojis\n\n this.previewEmojiCategoryIdx = 0\n this.previewEmojiIdx = 0\n this.updatePreviewEmoji()\n }\n\n onEmojiEnter(emoji) {\n this.previewEmoji = emoji\n this.previewEmojiIdx = -1\n this.previewEmojiCategoryIdx = -1\n }\n\n onEmojiLeave(emoji) {\n this.previewEmoji = null\n }\n\n onArrowLeft() {\n // Moving left, decrease emoji index.\n if (this.previewEmojiIdx > 0) {\n this.previewEmojiIdx -= 1\n } else {\n // If emoji index is zero, go to the previous category.\n this.previewEmojiCategoryIdx -= 1\n if (this.previewEmojiCategoryIdx < 0) {\n // If we reached first category, keep it.\n this.previewEmojiCategoryIdx = 0\n } else {\n // Update emoji index - we moved to the previous category,\n // get the last emoji in it.\n this.previewEmojiIdx =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis.length -\n 1\n }\n }\n this.updatePreviewEmoji()\n }\n\n onArrowRight() {\n if (\n this.previewEmojiIdx <\n this.emojisLength(this.previewEmojiCategoryIdx) - 1\n ) {\n // Moving right within category, increase emoji index.\n this.previewEmojiIdx += 1\n } else {\n // Go to the next category.\n this.previewEmojiCategoryIdx += 1\n if (this.previewEmojiCategoryIdx >= this.filteredCategories.length) {\n // If we reached the last category - keep it.\n this.previewEmojiCategoryIdx = this.filteredCategories.length - 1\n } else {\n // If we moved to the next category, update emoji index to the\n // first emoji in the new category.\n this.previewEmojiIdx = 0\n }\n }\n this.updatePreviewEmoji()\n }\n\n onArrowDown() {\n // If we are out of the emoji control (index is -1), select the first\n // emoji in the first category by calling `onArrowRight`.\n if (this.previewEmojiIdx == -1) {\n return this.onArrowRight()\n }\n\n const categoryLength =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis.length\n\n // When moving down, we can move `_perLine` icons right to\n // jump to the same position in the next row.\n let diff = this._perLine\n\n // TODO: previewCategory should match activeCategory\n // (so it would be both highlighted in UI and used\n // when we start moving with arrows after clicking\n // the category).\n\n // Note: probably we can alwasy take current row length\n // as a `diff` - it will fit both case of any row and\n // special case of the last row.\n // Note: it can be also easier to update indexes\n // directly here instead of calling onArrowRight.\n // Same is true for `onArrowUp`.\n\n // Unless if we are on the last row of the category and\n // there are less then `_perLine` emojis in it.\n // In this case we use the last row length as diff\n // so we go straight down, for example:\n //\n // 1 2 3 4 5 6\n // 7 8 9\n // A B C D E F\n //\n // If we go down from `8`, we need to move 3 emojis right\n // to lend at `B` (and 3 is the length of the last row of\n // this category).\n // And if we used 6 instead (row length, `_perLine`), we would\n // lend up at `E`.\n if (this.previewEmojiIdx + diff > categoryLength) {\n // Calculate the last row length.\n diff = categoryLength % this._perLine\n }\n for (let i = 0; i < diff; i++) {\n this.onArrowRight()\n }\n this.updatePreviewEmoji()\n }\n\n onArrowUp() {\n // Similar to `onArrowDown`, to move up we can move left\n // by `_perLine` number of emojis.\n let diff = this._perLine\n\n if (this.previewEmojiIdx - diff < 0) {\n if (this.previewEmojiCategoryIdx > 0) {\n // Unless if we are on the first line of the category and\n // the last line in the previous category is shorter than\n // `_perLine`.\n // In this case we use the last row length as diff, so\n // we go straight up, for example:\n //\n // 1 2 3 4 5\n // 6 7 8\n // 9 A B C D\n //\n // If we go up from `A`, we need to move 3 emojis left to get\n // to `7` (and 3 is the length of the last row of the previous\n // category).\n const prevCategoryLastRowLength =\n this.filteredCategories[this.previewEmojiCategoryIdx - 1].emojis\n .length % this._perLine\n // diff = this.previewEmojiIdx + prevCategoryLastRowLength\n diff = prevCategoryLastRowLength\n } else {\n diff = 0\n }\n }\n for (let i = 0; i < diff; i++) {\n this.onArrowLeft()\n }\n this.updatePreviewEmoji()\n }\n\n updatePreviewEmoji() {\n this.previewEmoji =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis[\n this.previewEmojiIdx\n ]\n\n this._vm.$nextTick(() => {\n // Scroll the view if the `previewEmoji` goes out of the visible area.\n const scrollEl = this._vm.$refs.scroll\n\n // Note: it would be more Vue-ish to mark all emojis with `ref`s\n // and then do something similar here to what we do in the\n // `getCategories` instead of using `querySelector` directly,\n // but I am not sure if having many refs would affect the performance\n // (it might, so I use `querySelector` for now).\n const emojiEl = scrollEl.querySelector('.emoji-mart-emoji-selected')\n\n const scrollHeight = scrollEl.offsetTop - scrollEl.offsetHeight\n if (\n emojiEl &&\n emojiEl.offsetTop + emojiEl.offsetHeight >\n scrollHeight + scrollEl.scrollTop\n ) {\n scrollEl.scrollTop += emojiEl.offsetHeight\n }\n if (emojiEl && emojiEl.offsetTop < scrollEl.scrollTop) {\n scrollEl.scrollTop -= emojiEl.offsetHeight\n }\n })\n }\n\n emojisLength(categoryIdx) {\n if (categoryIdx == -1) {\n return 0\n }\n return this.filteredCategories[categoryIdx].emojis.length\n }\n}\n","