aboutsummaryrefslogtreecommitdiff
path: root/src/components/emoji_picker
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/emoji_picker')
-rw-r--r--src/components/emoji_picker/emoji_picker.js135
-rw-r--r--src/components/emoji_picker/emoji_picker.scss36
-rw-r--r--src/components/emoji_picker/emoji_picker.vue90
3 files changed, 151 insertions, 110 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index dd5e5217..30c01aa5 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -3,7 +3,6 @@ import Checkbox from '../checkbox/checkbox.vue'
import Popover from 'src/components/popover/popover.vue'
import StillImage from '../still-image/still-image.vue'
import { ensureFinalFallback } from '../../i18n/languages.js'
-import lozad from 'lozad'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBoxOpen,
@@ -19,7 +18,7 @@ import {
faCode,
faFlag
} from '@fortawesome/free-solid-svg-icons'
-import { debounce, trim } from 'lodash'
+import { debounce, trim, chunk } from 'lodash'
library.add(
faBoxOpen,
@@ -82,14 +81,31 @@ const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
return orderedEmojiList.flat()
}
+const getOffset = (elem) => {
+ const style = elem.style.transform
+ const res = /translateY\((\d+)px\)/.exec(style)
+ if (!res) { return 0 }
+ return res[1]
+}
+
+const toHeaderId = id => {
+ return id.replace(/^row-\d+-/, '')
+}
+
const EmojiPicker = {
props: {
enableStickerPicker: {
required: false,
type: Boolean,
default: false
+ },
+ hideCustomEmoji: {
+ required: false,
+ type: Boolean,
+ default: false
}
},
+ inject: ['popoversZLayer'],
data () {
return {
keyword: '',
@@ -102,7 +118,8 @@ const EmojiPicker = {
contentLoaded: false,
groupRefs: {},
emojiRefs: {},
- filteredEmojiGroups: []
+ filteredEmojiGroups: [],
+ width: 0
}
},
components: {
@@ -125,9 +142,6 @@ const EmojiPicker = {
setGroupRef (name) {
return el => { this.groupRefs[name] = el }
},
- setEmojiRef (name) {
- return el => { this.emojiRefs[name] = el }
- },
onPopoverShown () {
this.$emit('show')
},
@@ -147,18 +161,21 @@ const EmojiPicker = {
}
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
},
- onScroll (e) {
- const target = (e && e.target) || this.$refs['emoji-groups']
- this.updateScrolledClass(target)
- this.scrolledGroup(target)
+ onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
+ const target = this.$refs['emoji-groups'].$el
+ this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
},
- scrolledGroup (target) {
+ scrolledGroup (target, start, end) {
const top = target.scrollTop + 5
this.$nextTick(() => {
- this.allEmojiGroups.forEach(group => {
+ this.emojiItems.slice(start, end + 1).forEach(group => {
+ const headerId = toHeaderId(group.id)
const ref = this.groupRefs['group-' + group.id]
- if (ref && ref.offsetTop <= top) {
- this.activeGroup = group.id
+ if (!ref) { return }
+ const elem = ref.$el.parentElement
+ if (!elem) { return }
+ if (elem && getOffset(elem) <= top) {
+ this.activeGroup = headerId
}
})
this.scrollHeader()
@@ -181,14 +198,10 @@ const EmojiPicker = {
setScroll(right + margin - headerCont.clientWidth)
}
},
- highlight (key) {
- const ref = this.groupRefs['group-' + key]
- const top = ref.offsetTop
+ highlight (groupId) {
this.setShowStickers(false)
- this.activeGroup = key
- this.$nextTick(() => {
- this.$refs['emoji-groups'].scrollTop = top + 1
- })
+ const indexInList = this.emojiItems.findIndex(k => k.id === groupId)
+ this.$refs['emoji-groups'].scrollToItem(indexInList)
},
updateScrolledClass (target) {
if (target.scrollTop <= 5) {
@@ -208,43 +221,13 @@ const EmojiPicker = {
filterByKeyword (list, keyword) {
return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
},
- initializeLazyLoad () {
- this.destroyLazyLoad()
- this.$nextTick(() => {
- this.$lozad = lozad('.still-image.emoji-picker-emoji', {
- load: el => {
- const name = el.getAttribute('data-emoji-name')
- const vn = this.emojiRefs[name]
- if (!vn) {
- return
- }
-
- vn.loadLazy()
- }
- })
- this.$lozad.observe()
- })
- },
- waitForDomAndInitializeLazyLoad () {
- this.$nextTick(() => this.initializeLazyLoad())
- },
- destroyLazyLoad () {
- if (this.$lozad) {
- if (this.$lozad.observer) {
- this.$lozad.observer.disconnect()
- }
- if (this.$lozad.mutationObserver) {
- this.$lozad.mutationObserver.disconnect()
- }
- }
- },
onShowing () {
const oldContentLoaded = this.contentLoaded
+ this.recalculateItemPerRow()
this.$nextTick(() => {
this.$refs.search.focus()
})
this.contentLoaded = true
- this.waitForDomAndInitializeLazyLoad()
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
if (!oldContentLoaded) {
this.$nextTick(() => {
@@ -261,6 +244,14 @@ const EmojiPicker = {
emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
}))
.filter(group => group.emojis.length > 0)
+ },
+ recalculateItemPerRow () {
+ this.$nextTick(() => {
+ if (!this.$refs['emoji-groups']) {
+ return
+ }
+ this.width = this.$refs['emoji-groups'].$el.clientWidth
+ })
}
},
watch: {
@@ -269,14 +260,22 @@ const EmojiPicker = {
this.debouncedHandleKeywordChange()
},
allCustomGroups () {
- this.waitForDomAndInitializeLazyLoad()
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
}
},
- destroyed () {
- this.destroyLazyLoad()
- },
computed: {
+ minItemSize () {
+ return this.emojiHeight
+ },
+ emojiHeight () {
+ return 32 + 4
+ },
+ emojiWidth () {
+ return 32 + 4
+ },
+ itemPerRow () {
+ return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+ },
activeGroupView () {
return this.showingStickers ? '' : this.activeGroup
},
@@ -287,7 +286,14 @@ const EmojiPicker = {
return 0
},
allCustomGroups () {
- return this.$store.getters.groupedCustomEmojis
+ if (this.hideCustomEmoji) {
+ return {}
+ }
+ const emojis = this.$store.getters.groupedCustomEmojis
+ if (emojis.unpacked) {
+ emojis.unpacked.text = this.$t('emoji.unpacked')
+ }
+ return emojis
},
defaultGroup () {
return Object.keys(this.allCustomGroups)[0]
@@ -310,10 +316,20 @@ const EmojiPicker = {
},
debouncedHandleKeywordChange () {
return debounce(() => {
- this.waitForDomAndInitializeLazyLoad()
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
}, 500)
},
+ emojiItems () {
+ return this.filteredEmojiGroups.map(group =>
+ chunk(group.emojis, this.itemPerRow)
+ .map((items, index) => ({
+ ...group,
+ id: index === 0 ? group.id : `row-${index}-${group.id}`,
+ emojis: items,
+ isFirstRow: index === 0
+ })))
+ .reduce((a, c) => a.concat(c), [])
+ },
languages () {
return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
},
@@ -335,6 +351,9 @@ const EmojiPicker = {
return emoji.displayText
}
+ },
+ isInModal () {
+ return this.popoversZLayer === 'modals'
}
}
}
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 53363ec1..5bcff33b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
$emoji-picker-header-height: 36px;
$emoji-picker-header-picture-width: 32px;
@@ -7,14 +7,14 @@ $emoji-picker-emoji-size: 32px;
.emoji-picker {
width: 25em;
- max-width: 100vw;
+ max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex;
flex-direction: column;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
color: var(--popoverText, $fallback--link);
- --lightText: var(--popoverLightText, $fallback--faint);
+
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
@@ -28,6 +28,7 @@ $emoji-picker-emoji-size: 32px;
max-width: $emoji-picker-header-picture-width;
height: $emoji-picker-header-picture-height;
max-height: $emoji-picker-header-picture-height;
+
.still-image {
max-width: 100%;
max-height: 100%;
@@ -62,24 +63,18 @@ $emoji-picker-emoji-size: 32px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
- min-height: 0px;
+ min-height: 0;
}
.emoji-tabs {
flex-grow: 1;
display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
+ flex-flow: row nowrap;
overflow-x: auto;
}
- .emoji-groups {
- min-height: 200px;
- }
-
.additional-tabs {
display: flex;
- flex: 1;
border-left: 1px solid;
border-left-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon);
@@ -121,7 +116,7 @@ $emoji-picker-emoji-size: 32px;
}
.sticker-picker {
- flex: 1 1 auto
+ flex: 1 1 auto;
}
.stickers,
@@ -151,22 +146,27 @@ $emoji-picker-emoji-size: 32px;
}
&-groups {
+ height: 100%;
+ min-height: 200px;
flex: 1 1 1px;
position: relative;
overflow: auto;
user-select: none;
- mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
- linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
- linear-gradient(to top, white, white);
+ mask:
+ linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+ linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+ linear-gradient(to top, white, white);
transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different
- -webkit-mask-composite: xor;
+ mask-composite: xor;
mask-composite: exclude;
+
&.scrolled {
&-top {
mask-size: 100% 20px, 100% 0, auto;
}
+
&-bottom {
mask-size: 100% 0, 100% 20px, auto;
}
@@ -200,7 +200,6 @@ $emoji-picker-emoji-size: 32px;
align-items: center;
justify-content: center;
margin: 4px;
-
cursor: pointer;
.emoji-picker-emoji.-custom {
@@ -208,12 +207,11 @@ $emoji-picker-emoji-size: 32px;
max-width: 100%;
max-height: 100%;
}
+
.emoji-picker-emoji.-unicode {
font-size: 24px;
overflow: hidden;
}
}
-
}
-
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ff56d637..b8d33309 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,13 +3,20 @@
ref="popover"
trigger="click"
popover-class="emoji-picker popover-default"
+ :trigger-attrs="{ 'aria-hidden': true }"
@show="onPopoverShown"
@close="onPopoverClosed"
>
<template #content>
<div class="heading">
+ <!--
+ Body scroll lock needs to be on every scrollable element on safari iOS.
+ Here we tell it to enable scrolling for this element.
+ See https://github.com/willmcpo/body-scroll-lock#vanilla-js
+ -->
<span
ref="header"
+ v-body-scroll-lock="isInModal"
class="emoji-tabs"
>
<span
@@ -21,6 +28,7 @@
active: activeGroupView === group.id
}"
:title="group.text"
+ role="button"
@click.prevent="highlight(group.id)"
>
<span
@@ -74,45 +82,61 @@
@input="$event.target.composing = false"
>
</div>
- <div
+ <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
+ <DynamicScroller
ref="emoji-groups"
+ v-body-scroll-lock="isInModal"
class="emoji-groups"
:class="groupsScrolledClass"
- @scroll="onScroll"
+ :min-item-size="minItemSize"
+ :items="emojiItems"
+ :emit-update="true"
+ @update="onScroll"
+ @visible="recalculateItemPerRow"
+ @resize="recalculateItemPerRow"
>
- <div
- v-for="group in filteredEmojiGroups"
- :key="group.id"
- class="emoji-group"
- >
- <h6
+ <template #default="{ item: group, index, active }">
+ <DynamicScrollerItem
:ref="setGroupRef('group-' + group.id)"
- 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)"
+ :item="group"
+ :active="active"
+ :data-index="index"
+ :size-dependencies="[group.emojis.length]"
>
- <span
- v-if="!emoji.imageUrl"
- class="emoji-picker-emoji -unicode"
- >{{ emoji.replacement }}</span>
- <still-image
- v-else
- :ref="setEmojiRef(group.id + emoji.displayText)"
- class="emoji-picker-emoji -custom"
- :data-src="emoji.imageUrl"
- :data-emoji-name="group.id + emoji.displayText"
- />
- </span>
- <span :ref="setGroupRef('group-end-' + group.id)" />
- </div>
- </div>
+ <div
+ class="emoji-group"
+ >
+ <h6
+ v-if="group.isFirstRow"
+ 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"
+ role="button"
+ @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"
+ :alt="maybeLocalizedEmojiName(emoji)"
+ :src="emoji.imageUrl"
+ :data-emoji-name="group.id + emoji.displayText"
+ />
+ </span>
+ </div>
+ </DynamicScrollerItem>
+ </template>
+ </DynamicScroller>
<div class="keep-open">
<Checkbox v-model="keepOpen">
{{ $t('emoji.keep_open') }}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-14 19:22:30 +0000