2019-03-29 16:49:32 +01:00
|
|
|
<template>
|
2022-10-09 22:42:36 +02:00
|
|
|
<Popover
|
2022-11-21 21:17:33 +01:00
|
|
|
ref="popover"
|
2022-10-09 22:42:36 +02:00
|
|
|
trigger="click"
|
|
|
|
popover-class="emoji-picker popover-default"
|
2023-01-21 22:28:33 +01:00
|
|
|
:trigger-attrs="{ 'aria-hidden': true }"
|
2022-10-09 22:42:36 +02:00
|
|
|
@show="onPopoverShown"
|
|
|
|
@close="onPopoverClosed"
|
2021-10-08 21:09:24 +02:00
|
|
|
>
|
2022-10-09 22:42:36 +02:00
|
|
|
<template #content>
|
|
|
|
<div class="heading">
|
2019-08-12 13:20:08 +02:00
|
|
|
<span
|
2022-10-09 22:42:36 +02:00
|
|
|
ref="header"
|
|
|
|
class="emoji-tabs"
|
2019-08-12 13:20:08 +02:00
|
|
|
>
|
2021-08-15 03:10:24 +02:00
|
|
|
<span
|
2023-01-02 20:01:56 +01:00
|
|
|
v-for="group in filteredEmojiGroups"
|
2022-10-09 22:42:36 +02:00
|
|
|
:ref="setGroupRef('group-header-' + group.id)"
|
|
|
|
:key="group.id"
|
|
|
|
class="emoji-tabs-item"
|
|
|
|
:class="{
|
|
|
|
active: activeGroupView === group.id
|
|
|
|
}"
|
|
|
|
:title="group.text"
|
2023-01-02 20:01:56 +01:00
|
|
|
@click.prevent="highlight(group.id)"
|
2021-08-15 03:10:24 +02:00
|
|
|
>
|
2022-10-09 22:42:36 +02:00
|
|
|
<span
|
|
|
|
v-if="group.image"
|
|
|
|
class="emoji-picker-header-image"
|
|
|
|
>
|
|
|
|
<still-image
|
|
|
|
:alt="group.text"
|
|
|
|
:src="group.image"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
<FAIcon
|
|
|
|
v-else
|
|
|
|
:icon="group.icon"
|
|
|
|
fixed-width
|
2021-10-08 19:17:47 +02:00
|
|
|
/>
|
2021-08-15 03:10:24 +02:00
|
|
|
</span>
|
2019-08-12 13:20:08 +02:00
|
|
|
</span>
|
2019-08-12 19:01:38 +02:00
|
|
|
<span
|
2022-10-09 22:42:36 +02:00
|
|
|
v-if="stickerPickerEnabled"
|
|
|
|
class="additional-tabs"
|
2019-08-12 19:01:38 +02:00
|
|
|
>
|
2022-10-09 22:42:36 +02:00
|
|
|
<span
|
|
|
|
class="stickers-tab-icon additional-tabs-item"
|
|
|
|
:class="{active: showingStickers}"
|
|
|
|
:title="$t('emoji.stickers')"
|
|
|
|
@click.prevent="toggleStickers"
|
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
icon="sticky-note"
|
|
|
|
fixed-width
|
|
|
|
/>
|
|
|
|
</span>
|
2019-08-12 19:01:38 +02:00
|
|
|
</span>
|
2022-10-09 22:42:36 +02:00
|
|
|
</div>
|
2019-07-28 23:10:43 +02:00
|
|
|
<div
|
2022-10-09 22:42:36 +02:00
|
|
|
v-if="contentLoaded"
|
|
|
|
class="content"
|
2019-07-28 23:10:43 +02:00
|
|
|
>
|
|
|
|
<div
|
2022-10-09 22:42:36 +02:00
|
|
|
class="emoji-content"
|
|
|
|
:class="{hidden: showingStickers}"
|
2019-07-28 23:10:43 +02:00
|
|
|
>
|
2022-10-09 22:42:36 +02:00
|
|
|
<div class="emoji-search">
|
|
|
|
<input
|
2022-11-21 21:17:33 +01:00
|
|
|
ref="search"
|
2022-10-09 22:42:36 +02:00
|
|
|
v-model="keyword"
|
|
|
|
type="text"
|
|
|
|
class="form-control"
|
|
|
|
:placeholder="$t('emoji.search_emoji')"
|
|
|
|
@input="$event.target.composing = false"
|
|
|
|
>
|
|
|
|
</div>
|
2022-12-24 19:48:36 +01:00
|
|
|
<DynamicScroller
|
2022-10-09 22:42:36 +02:00
|
|
|
ref="emoji-groups"
|
|
|
|
class="emoji-groups"
|
|
|
|
:class="groupsScrolledClass"
|
2022-12-24 19:48:36 +01:00
|
|
|
:min-item-size="minItemSize"
|
2023-01-02 19:25:59 +01:00
|
|
|
:items="emojiItems"
|
2023-01-02 18:40:03 +01:00
|
|
|
:emit-update="true"
|
2022-12-24 19:48:36 +01:00
|
|
|
@update="onScroll"
|
2023-01-02 19:42:09 +01:00
|
|
|
@visible="recalculateItemPerRow"
|
2023-01-06 19:14:38 +01:00
|
|
|
@resize="recalculateItemPerRow"
|
2019-07-28 15:07:01 +02:00
|
|
|
>
|
2022-12-24 19:48:36 +01:00
|
|
|
<template #default="{ item: group, index, active }">
|
|
|
|
<DynamicScrollerItem
|
2023-01-02 18:40:03 +01:00
|
|
|
:ref="setGroupRef('group-' + group.id)"
|
2022-12-24 19:48:36 +01:00
|
|
|
:item="group"
|
|
|
|
:active="active"
|
|
|
|
:data-index="index"
|
|
|
|
:size-dependencies="[group.emojis.length]"
|
2022-10-09 22:42:36 +02:00
|
|
|
>
|
2022-12-24 19:48:36 +01:00
|
|
|
<div
|
|
|
|
class="emoji-group"
|
|
|
|
>
|
|
|
|
<h6
|
2023-01-02 19:25:59 +01:00
|
|
|
v-if="group.isFirstRow"
|
2022-12-24 19:48:36 +01:00
|
|
|
class="emoji-group-title"
|
|
|
|
>
|
|
|
|
{{ group.text }}
|
|
|
|
</h6>
|
|
|
|
<span
|
|
|
|
v-for="emoji in group.emojis"
|
|
|
|
:key="group.id + emoji.displayText"
|
|
|
|
:title="maybeLocalizedEmojiName(emoji)"
|
|
|
|
class="emoji-item"
|
|
|
|
@click.stop.prevent="onEmoji(emoji)"
|
|
|
|
>
|
|
|
|
<span
|
|
|
|
v-if="!emoji.imageUrl"
|
|
|
|
class="emoji-picker-emoji -unicode"
|
|
|
|
>{{ emoji.replacement }}</span>
|
|
|
|
<still-image
|
|
|
|
v-else
|
|
|
|
class="emoji-picker-emoji -custom"
|
|
|
|
loading="lazy"
|
|
|
|
:src="emoji.imageUrl"
|
|
|
|
:data-emoji-name="group.id + emoji.displayText"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</DynamicScrollerItem>
|
|
|
|
</template>
|
|
|
|
</DynamicScroller>
|
2022-10-09 22:42:36 +02:00
|
|
|
<div class="keep-open">
|
|
|
|
<Checkbox v-model="keepOpen">
|
|
|
|
{{ $t('emoji.keep_open') }}
|
|
|
|
</Checkbox>
|
2019-08-12 13:20:08 +02:00
|
|
|
</div>
|
2019-07-28 23:10:43 +02:00
|
|
|
</div>
|
2022-10-09 22:42:36 +02:00
|
|
|
<div
|
|
|
|
v-if="showingStickers"
|
|
|
|
class="stickers-content"
|
|
|
|
>
|
|
|
|
<sticker-picker
|
|
|
|
@uploaded="onStickerUploaded"
|
|
|
|
@upload-failed="onStickerUploadFailed"
|
|
|
|
/>
|
2019-09-08 14:51:17 +02:00
|
|
|
</div>
|
2019-03-29 17:48:52 +01:00
|
|
|
</div>
|
2022-10-09 22:42:36 +02:00
|
|
|
</template>
|
|
|
|
</Popover>
|
2019-03-29 16:49:32 +01:00
|
|
|
</template>
|
|
|
|
|
2019-08-12 12:18:37 +02:00
|
|
|
<script src="./emoji_picker.js"></script>
|
2019-08-12 13:20:08 +02:00
|
|
|
<style lang="scss" src="./emoji_picker.scss"></style>
|