diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2024-07-09 13:03:24 +0200 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2024-07-10 18:25:13 +0200 |
commit | 1e6975215e600cda0f8dcec5dc4beae270700a60 (patch) | |
tree | ca701479e51991f47330559160d132eb7ce5016e | |
parent | 193b70eff9bb867e4611fe38ea06ff7407c4f03c (diff) |
fix(directive): replace v-observe-visibility with vIntersectionObserver
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.spec.js | 18 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 12 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue | 8 | ||||
-rw-r--r-- | src/components/NewConversationDialog/NewConversationContactsPage.vue | 13 | ||||
-rw-r--r-- | src/main.js | 2 | ||||
-rw-r--r-- | src/mainFilesSidebar.js | 2 | ||||
-rw-r--r-- | src/mainPublicShareAuthSidebar.js | 2 | ||||
-rw-r--r-- | src/mainPublicShareSidebar.js | 2 | ||||
-rw-r--r-- | src/mainRecording.js | 2 |
9 files changed, 35 insertions, 26 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index f5089ddb9..450a69a19 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -507,7 +507,7 @@ describe('Message.vue', () => { test('displays unread message marker that marks the message seen when visible', () => { getVisualLastReadMessageIdMock.mockReturnValue(123) messageProps.nextMessageId = 333 - const observeVisibility = jest.fn() + const IntersectionObserver = jest.fn() const wrapper = shallowMount(Message, { localVue, @@ -516,7 +516,7 @@ describe('Message.vue', () => { MessageBody, }, directives: { - observeVisibility, + IntersectionObserver, }, propsData: messageProps, provide: injected, @@ -525,26 +525,26 @@ describe('Message.vue', () => { const marker = wrapper.find('.new-message-marker') expect(marker.exists()).toBe(true) - expect(observeVisibility).toHaveBeenCalled() - const directiveValue = observeVisibility.mock.calls[0][1] + expect(IntersectionObserver).toHaveBeenCalled() + const directiveValue = IntersectionObserver.mock.calls[0][1] expect(wrapper.vm.seen).toEqual(false) - directiveValue.value(false) + directiveValue.value([{ isIntersecting: false }]) expect(wrapper.vm.seen).toEqual(false) - directiveValue.value(true) + directiveValue.value([{ isIntersecting: true }]) expect(wrapper.vm.seen).toEqual(true) // stays true if it was visible once - directiveValue.value(false) + directiveValue.value([{ isIntersecting: false }]) expect(wrapper.vm.seen).toEqual(true) }) test('does not display read marker on the very last message', () => { messageProps.lastReadMessageId = 123 messageProps.nextMessageId = null // last message - const observeVisibility = jest.fn() + const IntersectionObserver = jest.fn() const wrapper = shallowMount(Message, { localVue, @@ -553,7 +553,7 @@ describe('Message.vue', () => { MessageBody, }, directives: { - observeVisibility, + IntersectionObserver, }, propsData: messageProps, provide: injected, diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 894dc4ce5..0885bcc9a 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -78,7 +78,7 @@ @close="isTranslateDialogOpen = false" /> <div v-if="isLastReadMessage" - v-observe-visibility="lastReadMessageVisibilityChanged" + v-intersection-observer="lastReadMessageVisibilityChanged" class="new-message-marker"> <span>{{ t('spreed', 'Unread messages') }}</span> </div> @@ -86,6 +86,8 @@ </template> <script> +import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components' + import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue' import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue' @@ -128,6 +130,10 @@ export default { UnfoldMore, }, + directives: { + IntersectionObserver, + }, + props: { message: { type: Object, @@ -346,8 +352,8 @@ export default { methods: { t, - lastReadMessageVisibilityChanged(isVisible) { - if (isVisible) { + lastReadMessageVisibilityChanged([{ isIntersecting }]) { + if (isIntersecting) { this.seen = true } }, diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue index 4f5ddb90c..58573392d 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue @@ -6,7 +6,7 @@ <template> <!-- Poll card --> <a v-if="!showAsButton" - v-observe-visibility="getPollData" + v-intersection-observer="getPollData" :aria-label="t('spreed', 'Poll')" class="poll-card" role="button" @@ -30,6 +30,8 @@ </template> <script> +import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components' + import PollIcon from 'vue-material-design-icons/Poll.vue' import { t } from '@nextcloud/l10n' @@ -46,6 +48,10 @@ export default { PollIcon, }, + directives: { + IntersectionObserver, + }, + props: { name: { type: String, diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue index cec291bc9..105062282 100644 --- a/src/components/NewConversationDialog/NewConversationContactsPage.vue +++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue @@ -8,7 +8,7 @@ <!-- Search --> <div class="set-contacts__form"> <NcTextField ref="setContacts" - v-observe-visibility="visibilityChanged" + v-intersection-observer="visibilityChanged" :value.sync="searchText" type="text" class="set-contacts__form-input" @@ -57,6 +57,7 @@ </template> <script> +import { vIntersectionObserver as IntersectionObserver } from '@vueuse/components' import debounce from 'debounce' import { ref } from 'vue' @@ -93,6 +94,10 @@ export default { Magnify, }, + directives: { + IntersectionObserver, + }, + props: { conversationName: { type: String, @@ -225,12 +230,14 @@ export default { this.contactsLoading = false } }, - visibilityChanged(isVisible) { - if (isVisible) { + + visibilityChanged([{ isIntersecting }]) { + if (isIntersecting) { // Focus the input field of the current component. this.focusInput() } }, + focusInput() { this.setContacts.focus() }, diff --git a/src/main.js b/src/main.js index ac23314b0..62c861568 100644 --- a/src/main.js +++ b/src/main.js @@ -5,7 +5,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import Vue from 'vue' -import VueObserveVisibility from 'vue-observe-visibility' import VueRouter from 'vue-router' import VueShortKey from 'vue-shortkey' import Vuex from 'vuex' @@ -48,7 +47,6 @@ Vue.prototype.OCA = OCA Vue.use(PiniaVuePlugin) Vue.use(Vuex) Vue.use(VueRouter) -Vue.use(VueObserveVisibility) Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) const pinia = createPinia() diff --git a/src/mainFilesSidebar.js b/src/mainFilesSidebar.js index 1809fb42b..7a9f1640b 100644 --- a/src/mainFilesSidebar.js +++ b/src/mainFilesSidebar.js @@ -5,7 +5,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import Vue from 'vue' -import VueObserveVisibility from 'vue-observe-visibility' import VueShortKey from 'vue-shortkey' import Vuex from 'vuex' @@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA Vue.use(PiniaVuePlugin) Vue.use(Vuex) Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) -Vue.use(VueObserveVisibility) const pinia = createPinia() diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js index e6253f611..a51738ba2 100644 --- a/src/mainPublicShareAuthSidebar.js +++ b/src/mainPublicShareAuthSidebar.js @@ -5,7 +5,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import Vue from 'vue' -import VueObserveVisibility from 'vue-observe-visibility' import VueShortKey from 'vue-shortkey' import Vuex from 'vuex' @@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA Vue.use(PiniaVuePlugin) Vue.use(Vuex) Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) -Vue.use(VueObserveVisibility) const pinia = createPinia() store.dispatch('setMainContainerSelector', '#talk-sidebar') diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js index 05343c5ab..0fe180f2a 100644 --- a/src/mainPublicShareSidebar.js +++ b/src/mainPublicShareSidebar.js @@ -5,7 +5,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import Vue, { reactive } from 'vue' -import VueObserveVisibility from 'vue-observe-visibility' import VueShortKey from 'vue-shortkey' import Vuex from 'vuex' @@ -42,7 +41,6 @@ Vue.prototype.OCA = OCA Vue.use(PiniaVuePlugin) Vue.use(Vuex) Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) -Vue.use(VueObserveVisibility) const pinia = createPinia() diff --git a/src/mainRecording.js b/src/mainRecording.js index 00b39c5bb..121d9e5f2 100644 --- a/src/mainRecording.js +++ b/src/mainRecording.js @@ -6,7 +6,6 @@ import { createPinia, PiniaVuePlugin } from 'pinia' import Vue from 'vue' -import VueObserveVisibility from 'vue-observe-visibility' import VueRouter from 'vue-router' import VueShortKey from 'vue-shortkey' import Vuex from 'vuex' @@ -51,7 +50,6 @@ Vue.prototype.OCA = OCA Vue.use(PiniaVuePlugin) Vue.use(Vuex) Vue.use(VueRouter) -Vue.use(VueObserveVisibility) Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) const pinia = createPinia() |