change input blocking to use css

This commit is contained in:
Shpuld Shpuldson 2020-10-28 08:53:23 +02:00
parent 85dc4002a1
commit 7007659e05
2 changed files with 10 additions and 9 deletions

View file

@ -65,8 +65,10 @@ const Timeline = {
} }
}, },
classes () { classes () {
let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
return { return {
root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []), root: rootClasses,
header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []), header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@ -125,17 +127,11 @@ 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 () { stopBlockingClicks: debounce(function () {
this.blockingClicks = false this.blockingClicks = false
this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
}, 1000), }, 1000),
blockClicksTemporarily () { blockClicksTemporarily () {
if (!this.blockingClicks) { if (!this.blockingClicks) {
this.$el.addEventListener('click', this.blockClickEvent, true)
this.blockingClicks = true this.blockingClicks = true
} }
this.stopBlockingClicks() this.stopBlockingClicks()

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="[classes.root, 'timeline']"> <div :class="[classes.root, 'Timeline']">
<div :class="classes.header"> <div :class="classes.header">
<TimelineMenu v-if="!embedded" /> <TimelineMenu v-if="!embedded" />
<div <div
@ -103,10 +103,15 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.timeline { .Timeline {
.loadmore-text { .loadmore-text {
opacity: 1; opacity: 1;
} }
&.-blocked {
pointer-events: none;
cursor: wait;
}
} }
.timeline-heading { .timeline-heading {