diff --git a/src/components/Modals.vue b/src/components/Modals.vue index dd26857..738d97a 100644 --- a/src/components/Modals.vue +++ b/src/components/Modals.vue @@ -10,35 +10,15 @@ v-show="canClose && currentModal" class="close" @click="onClickClose" - > - X - + >X - - - - - - + + + + + +
LOADING @@ -80,6 +60,7 @@ export default { computed: { ...mapState({ modalName: state => state.modals.modalName, + noAnimation: state => state.modals.noAnimation, resolve: state => state.modals.resolve, reject: state => state.modals.reject, modalData: state => state.modals.modalData, @@ -92,67 +73,21 @@ export default { }, watch: { isLoading(newValue) { + const timeline = new TimelineLite({ pause: true }); if (newValue) { - const timeline = new TimelineLite({ pause: true }); timeline.add(TweenLite.to(this.$refs.modal, 0.2, { opacity: 0.2 }, 0)); - timeline.add( - TweenLite.to(this.$refs.loading, 0.2, { opacity: 1 }, 0.1) - ); - timeline.play(); + timeline.add(TweenLite.to(this.$refs.loading, 0.2, { opacity: 1 }, 0.1)); } else { - const timeline = new TimelineLite({ pause: true }); timeline.add(TweenLite.to(this.$refs.loading, 0.2, { opacity: 0 }, 0)); timeline.add(TweenLite.to(this.$refs.modal, 0.2, { opacity: 1 }, 0.1)); - timeline.play(); } + timeline.play(); }, modalName(newValue) { if (this.isAnimating) throw new Error("Opening a modal when animating"); if (newValue === actualModalParams.modalName) return; - this.timeline = new TimelineLite({ - paused: true, - onComplete: () => { - this.isAnimating = false; - this.currentModal = newValue; - this.timeline = null; - TweenLite.to(this.$refs.modal, 0.2, { - opacity: 1 - }); - } - }); - - this.timeline.add( - TweenLite.to(this.$refs.modal, 0.2, { - opacity: 0, - onComplete: () => { - this.currentModal = null; - } - }), - 0 - ); - - if (this.size !== actualModalParams.size) { - this.height = Math.round( - this.$refs.mainContainer.clientHeight * - CONST.modals.sizeRatio[this.size].height - ); - this.width = Math.round( - this.$refs.mainContainer.clientWidth * - CONST.modals.sizeRatio[this.size].width - ); - this.timeline.add( - TweenLite.to(this.$refs.mainAnim, 0.2, { height: this.height }), - 0.2 - ); - this.timeline.add( - TweenLite.to(this.$refs.mainAnim, 0.2, { width: this.width }), - 0.4 - ); - } - - this.isAnimating = true; - this.timeline.play(); + this.openAnim(); actualModalParams.size = this.size; actualModalParams.modalName = newValue; @@ -165,15 +100,14 @@ export default { e.stopPropagation(); e.preventDefault(); if (this.isAnimating || !this.canClose) return; - this.reject(); - this.closeAnim(); + this.onClickClose(); }, onClickMainAnim(e) { e.stopPropagation(); }, onClickClose() { - this.reject(); this.closeAnim(); + this.reject(); }, openAnim() { @@ -212,6 +146,12 @@ export default { }, closeAnim() { if (this.isAnimating) return; + if (this.noAnimation) { + this.isAnimating = false; + this.$store.commit("modals/close"); + this.timeline = null; + return; + } this.timeline = new TimelineLite({ paused: true, diff --git a/src/components/modals/AdvancedSearch.vue b/src/components/modals/AdvancedSearch.vue index 9a32701..233b9e0 100644 --- a/src/components/modals/AdvancedSearch.vue +++ b/src/components/modals/AdvancedSearch.vue @@ -110,6 +110,7 @@ }, methods: { openInfo() { + console.groupEnd(); this.$store.dispatch('modals/openFeature', CONST.home.features.KEY_FEATURE_SEARCH) .then(() => this.$store.dispatch('modals/openSearch')); }, diff --git a/src/store/modals.js b/src/store/modals.js index 0ad04f0..cfd12e1 100644 --- a/src/store/modals.js +++ b/src/store/modals.js @@ -2,6 +2,7 @@ export const modals = { namespaced: true, state: { //add modal options ? + noAnimation: false, modalName: null, modalData: null, resolve: null, //NIM @@ -21,6 +22,7 @@ export const modals = { "wrong modals params :\n" + JSON.stringify(payload, null, 4) ); } + state.noAnimation = !!payload.noAnimation; state.modalData = payload.modalData; state.modalName = payload.modalName; state.resolve = payload.resolve; @@ -88,6 +90,7 @@ export const modals = { return new Promise((resolve, reject) => { commit("open", { modalName: "feature", + noAnimation: true, canClose: true, size: 'medium', modalData,