block clicks for a second when timeline moves

This commit is contained in:
Shpuld Shpuldson 2020-10-27 12:59:50 +02:00
parent e2c4816feb
commit 1403f20f9f

View file

@ -2,7 +2,7 @@ import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
import Conversation from '../conversation/conversation.vue' import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue' import TimelineMenu from '../timeline_menu/timeline_menu.vue'
import { throttle, keyBy } from 'lodash' import { debounce, throttle, keyBy } from 'lodash'
export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
const ids = [] const ids = []
@ -34,7 +34,8 @@ const Timeline = {
paused: false, paused: false,
unfocused: false, unfocused: false,
bottomedOut: false, bottomedOut: false,
virtualScrollIndex: 0 virtualScrollIndex: 0,
blockingClicks: false
} }
}, },
components: { components: {
@ -124,6 +125,21 @@ const Timeline = {
this.$store.commit('setLoading', { timeline: this.timelineName, value: false }) this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
}, },
methods: { methods: {
blockClickEvent (e) {
e.stopPropagation()
e.preventDefault()
},
stopBlockingClicks: debounce(function () {
this.blockingClicks = false
this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
}, 1000),
blockClicksTemporarily () {
if (!this.blockingClicks) {
this.$el.addEventListener('click', this.blockClickEvent, true)
this.blockingClicks = true
}
this.stopBlockingClicks()
},
handleShortKey (e) { handleShortKey (e) {
// Ignore when input fields are focused // Ignore when input fields are focused
if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
@ -135,6 +151,7 @@ const Timeline = {
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 }) this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
this.fetchOlderStatuses() this.fetchOlderStatuses()
} else { } else {
this.blockClicksTemporarily()
this.$store.commit('showNewStatuses', { timeline: this.timelineName }) this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false this.paused = false
} }