[Advanced Search] Close Info popup closes #16

doriongilmore · Jul 6, 2020 · 4ba5fec · 4ba5fec
1 parent 65cab30
commit 4ba5fec
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 80 deletions.
diff --git a/src/components/Modals.vue b/src/components/Modals.vue
@@ -10,35 +10,15 @@
           v-show="canClose && currentModal"
           class="close"
           @click="onClickClose"
-        >
-          X
-        </div>
+        >X</div>
         <!-- close button -->
         <!--modals-->
-        <Import
-          v-if="currentModal === 'import'"
-          @closeModal="closeAnim"
-        ></Import>
-        <Export
-          v-if="currentModal === 'export'"
-          @closeModal="closeAnim"
-        ></Export>
-        <Card
-                v-if="currentModal === 'card'"
-                @closeModal="closeAnim"
-        ></Card>
-        <AdvancedSearch
-                v-if="currentModal === 'search'"
-                @closeModal="closeAnim"
-        ></AdvancedSearch>
-        <HomeFeature
-                v-if="currentModal === 'feature'"
-                @closeModal="closeAnim"
-        ></HomeFeature>
-        <Confirmation
-                v-if="currentModal === 'confirm'"
-                @closeModal="closeAnim"
-        ></Confirmation>
+        <Import v-if="currentModal === 'import'"></Import>
+        <Export v-if="currentModal === 'export'"></Export>
+        <Card v-if="currentModal === 'card'"></Card>
+        <AdvancedSearch v-if="currentModal === 'search'"></AdvancedSearch>
+        <HomeFeature v-if="currentModal === 'feature'"></HomeFeature>
+        <Confirmation v-if="currentModal === 'confirm'"></Confirmation>
       </div>
       <div ref="loading" class="loading" v-show="isLoading && !isAnimating">
         <span>LOADING</span>
@@ -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
@@ -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
@@ -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,