diff --git a/package.json b/package.json index 6ce0b116..a32f93a4 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "escape-html": "1.0.3", "js-cookie": "3.0.1", "localforage": "1.10.0", - "lozad": "1.16.0", "parse-link-header": "2.0.0", "phoenix": "1.6.2", "punycode.js": "2.1.0", @@ -46,6 +45,7 @@ "vue-i18n": "9.2.2", "vue-router": "4.1.6", "vue-template-compiler": "2.7.14", + "vue-virtual-scroller": "^2.0.0-beta.7", "vuex": "4.1.0" }, "devDependencies": { diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 7a4672b6..1fa9dd2a 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,6 +1,8 @@ import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import vClickOutside from 'click-outside-vue3' +import VueVirtualScroller from 'vue-virtual-scroller' +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' @@ -397,6 +399,7 @@ const afterStoreSetup = async ({ store, i18n }) => { app.use(vClickOutside) app.use(VBodyScrollLock) + app.use(VueVirtualScroller) app.component('FAIcon', FontAwesomeIcon) app.component('FALayers', FontAwesomeLayers) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2838e102..4a447905 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,6 +81,17 @@ 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: { @@ -102,7 +112,8 @@ const EmojiPicker = { contentLoaded: false, groupRefs: {}, emojiRefs: {}, - filteredEmojiGroups: [] + filteredEmojiGroups: [], + width: 0 } }, components: { @@ -125,9 +136,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 +155,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 +192,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 +215,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 +238,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.offsetWidth + }) } }, watch: { @@ -269,14 +254,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 }, @@ -314,10 +307,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) }, diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 53363ec1..dda12197 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -74,6 +74,7 @@ $emoji-picker-emoji-size: 32px; } .emoji-groups { + height: 100%; min-height: 200px; } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index ff56d637..453ecdfc 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -74,45 +74,56 @@ @input="$event.target.composing = false" > -
-
-
+ - {{ group.text }} -
- - {{ emoji.replacement }} - - - -
-
+
+
+ {{ group.text }} +
+ + {{ emoji.replacement }} + + +
+ + +
{{ $t('emoji.keep_open') }} diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 200ef147..56fd2fd9 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -8,7 +8,8 @@ const StillImage = { 'alt', 'height', 'width', - 'dataSrc' + 'dataSrc', + 'loading' ], data () { return { diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 633fb229..d015e138 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -17,6 +17,7 @@ :data-src="dataSrc" :src="realSrc" :referrerpolicy="referrerpolicy" + :loading="loading" @load="onLoad" @error="onError" > diff --git a/yarn.lock b/yarn.lock index 5058407a..7b45ee14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6103,11 +6103,6 @@ lower-case@^2.0.2: dependencies: tslib "^2.0.3" -lozad@1.16.0: - version "1.16.0" - resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4" - integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w== - lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -6375,6 +6370,11 @@ minimist@^1.2.5: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== +mitt@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230" + integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg== + mkdirp@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" @@ -8810,6 +8810,16 @@ vue-loader@17.0.1: hash-sum "^2.0.0" loader-utils "^2.0.0" +vue-observe-visibility@^2.0.0-alpha.1: + version "2.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13" + integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g== + +vue-resize@^2.0.0-alpha.1: + version "2.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a" + integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg== + vue-router@4.1.6: version "4.1.6" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1" @@ -8833,6 +8843,15 @@ vue-template-compiler@2.7.14: de-indent "^1.0.2" he "^1.2.0" +vue-virtual-scroller@^2.0.0-beta.7: + version "2.0.0-beta.7" + resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.7.tgz#4ea8158638c84b2033b001a8b26c5fcb6896b271" + integrity sha512-OrouVj1i2939jaLjVfu8f5fsDlbzhAb4bOsYZYrAkpcVLylAmMoGtIL7eT3hJrdTiaKbwQpRdnv7DKf9Fn+tHg== + dependencies: + mitt "^2.1.0" + vue-observe-visibility "^2.0.0-alpha.1" + vue-resize "^2.0.0-alpha.1" + vue@3.2.45: version "3.2.45" resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"