From b77259a9a0c353ede8ff1d6bf5c13ae91ca7fc7c Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 8 Jan 2022 01:35:16 -0500 Subject: Use StillImage to render emojis in emoji picker --- src/components/still-image/still-image.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'src/components/still-image/still-image.js') diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index d7abbcb5..1806d33b 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -7,16 +7,23 @@ const StillImage = { 'imageLoadHandler', 'alt', 'height', - 'width' + 'width', + 'dataSrc' ], data () { return { + // for lazy loading, see loadLazy() + realSrc: this.src, stopGifs: this.$store.getters.mergedConfig.stopGifs } }, computed: { animated () { - return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) + if (!this.realSrc) { + return false + } + + return this.stopGifs && (this.mimetype === 'image/gif' || this.realSrc.endsWith('.gif')) }, style () { const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str @@ -27,7 +34,15 @@ const StillImage = { } }, methods: { + loadLazy () { + if (this.dataSrc) { + this.realSrc = this.dataSrc + } + }, onLoad () { + if (!this.realSrc) { + return + } const image = this.$refs.src if (!image) return this.imageLoadHandler && this.imageLoadHandler(image) -- cgit v1.2.3-70-g09d2 From 96564609f87e93d32448da6c7d6a75cea50eff93 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 17 Jan 2022 23:41:11 -0500 Subject: Make StillImage react to src changes --- src/components/still-image/still-image.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/components/still-image/still-image.js') diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 1806d33b..200ef147 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -57,6 +57,14 @@ const StillImage = { onError () { this.imageLoadError && this.imageLoadError() } + }, + watch: { + src () { + this.realSrc = this.src + }, + dataSrc () { + this.$el.removeAttribute('data-loaded') + } } } -- cgit v1.2.3-70-g09d2 From 78081836dfa40abdb587dcbca59d339a27e23fb2 Mon Sep 17 00:00:00 2001 From: tusooa Date: Sat, 24 Dec 2022 12:43:30 -0500 Subject: Remove lozad code --- src/components/emoji_picker/emoji_picker.js | 40 ---------------------------- src/components/emoji_picker/emoji_picker.vue | 4 +-- src/components/still-image/still-image.js | 3 ++- src/components/still-image/still-image.vue | 1 + 4 files changed, 5 insertions(+), 43 deletions(-) (limited to 'src/components/still-image/still-image.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2838e102..68240fd8 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, @@ -125,9 +124,6 @@ const EmojiPicker = { setGroupRef (name) { return el => { this.groupRefs[name] = el } }, - setEmojiRef (name) { - return el => { this.emojiRefs[name] = el } - }, onPopoverShown () { this.$emit('show') }, @@ -208,43 +204,12 @@ 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.$nextTick(() => { this.$refs.search.focus() }) this.contentLoaded = true - this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() if (!oldContentLoaded) { this.$nextTick(() => { @@ -269,13 +234,9 @@ const EmojiPicker = { this.debouncedHandleKeywordChange() }, allCustomGroups () { - this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() } }, - destroyed () { - this.destroyLazyLoad() - }, computed: { activeGroupView () { return this.showingStickers ? '' : this.activeGroup @@ -314,7 +275,6 @@ const EmojiPicker = { }, debouncedHandleKeywordChange () { return debounce(() => { - this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() }, 500) }, diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index ff56d637..d0b7fe8f 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -104,9 +104,9 @@ >{{ emoji.replacement }} 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" > -- cgit v1.2.3-70-g09d2