diff --git a/src/components/DbUpload.vue b/src/components/DbUpload.vue index c9eadc4..d4fb5a7 100644 --- a/src/components/DbUpload.vue +++ b/src/components/DbUpload.vue @@ -4,8 +4,8 @@
@@ -59,13 +59,24 @@ export default { }, data () { return { - state: '' + state: '', + animationPromise: Promise.resolve() + } + }, + mounted () { + if (this.illustrated) { + this.animationPromise = new Promise((resolve) => { + this.$refs.fileImg.addEventListener('animationend', () => { + resolve() + }) + }) } }, methods: { loadDb () { - return this.$db.loadDb(this.$refs.file.files[0]) - .then((schema) => { + this.state = 'drop' + return Promise.all([this.$db.loadDb(this.$refs.file.files[0]), this.animationPromise]) + .then(([schema]) => { this.$store.commit('saveSchema', schema) if (this.$route.path !== '/editor') { this.$router.push('/editor') @@ -73,18 +84,8 @@ export default { }) }, drop (event) { - event.preventDefault() this.$refs.file.files = event.dataTransfer.files - this.state = 'drop' this.loadDb() - .then(() => { - // Clean up - // event.currentTarget.classList.add('bg-gray-100') - // event.currentTarget.classList.remove('bg-green-300') - }) - }, - onFlyEnd (event) { - console.log('END!!!', event.animationName.startsWith('fly')) } } }