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,