remove modals stack (#12423)

2025-12-16 22:27:26 +01:00 · 2020-08-10 18:38:24 +02:00
parent 8c3a9c6dbc
commit d7ee1ec4f4
9 changed files with 26 additions and 128 deletions
--- a/website/client/src/app.vue
+++ b/website/client/src/app.vue
@@ -513,13 +513,9 @@ export default {
    } else {
      this.hideLoadingScreen();
    }
-
-    this.initializeModalStack();
  },
  beforeDestroy () {
    this.$root.$off('playSound');
-    this.$root.$off('bv::modal::hidden');
-    this.$root.$off('bv::show::modal');
    this.$root.$off('buyModal::showItem');
    this.$root.$off('selectMembersModal::showItem');
  },
@@ -549,112 +545,6 @@ export default {
      this.$store.dispatch('auth:logout', { redirectToLogin: true });
      return true;
    },
-    initializeModalStack () {
-      // Manage modals
-      this.$root.$on('bv::show::modal', (modalId, data = {}) => {
-        if (data.fromRoot) return;
-        const { modalStack } = this.$store.state;
-
-        this.trackGemPurchase(modalId, data);
-
-        // Add new modal to the stack
-        const prev = modalStack[modalStack.length - 1];
-        const prevId = prev ? prev.modalId : undefined;
-        modalStack.push({ modalId, prev: prevId });
-      });
-
-      this.$root.$on('bv::modal::hidden', bvEvent => {
-        let modalId = bvEvent.target && bvEvent.target.id;
-
-        // sometimes the target isn't passed to the hidden event, fallback is the vueTarget
-        if (!modalId) {
-          modalId = bvEvent.vueTarget && bvEvent.vueTarget.id;
-        }
-
-        if (!modalId) {
-          return;
-        }
-
-        const { modalStack } = this.$store.state;
-
-        const modalOnTop = modalStack[modalStack.length - 1];
-
-        // Check for invalid modal. Event systems can send multiples
-        if (!this.validStack(modalStack)) return;
-
-        // If we are moving forward
-        if (modalOnTop && modalOnTop.prev === modalId) return;
-
-        // Remove modal from stack
-        this.$store.state.modalStack.pop();
-
-        // Get previous modal
-        const modalBefore = modalOnTop ? modalOnTop.prev : undefined;
-
-        if (modalBefore) this.$root.$emit('bv::show::modal', modalBefore, { fromRoot: true });
-      });
-
-      // Dismiss modal aggressively. Pass a modal ID to remove a modal instance from the stack
-      // (both the stack entry itself and its "prev" reference) so we don't reopen it
-      this.$root.$on('habitica::dismiss-modal', oldModal => {
-        if (!oldModal) return;
-        this.$root.$emit('bv::hide::modal', oldModal);
-        let removeIndex = this.$store.state.modalStack
-          .map(modal => modal.modalId)
-          .indexOf(oldModal);
-        if (removeIndex >= 0) {
-          this.$store.state.modalStack.splice(removeIndex, 1);
-        }
-        removeIndex = this.$store.state.modalStack
-          .map(modal => modal.prev)
-          .indexOf(oldModal);
-        if (removeIndex >= 0) {
-          delete this.$store.state.modalStack[removeIndex].prev;
-        }
-      });
-    },
-    validStack (modalStack) {
-      const modalsThatCanShowTwice = ['profile'];
-      const modalCount = {};
-      const prevAndCurrent = 2;
-
-      for (const current of modalStack) {
-        if (!modalCount[current.modalId]) modalCount[current.modalId] = 0;
-        modalCount[current.modalId] += 1;
-        if (
-          modalCount[current.modalId] > prevAndCurrent
-          && modalsThatCanShowTwice.indexOf(current.modalId) === -1
-        ) {
-          this.$store.state.modalStack = [];
-          return false;
-        }
-
-        if (!current.prev) continue; // eslint-disable-line
-        if (!modalCount[current.prev]) modalCount[current.prev] = 0;
-        modalCount[current.prev] += 1;
-        if (
-          modalCount[current.prev] > prevAndCurrent
-          && modalsThatCanShowTwice.indexOf(current.prev) === -1
-        ) {
-          this.$store.state.modalStack = [];
-          return false;
-        }
-      }
-
-      return true;
-    },
-    trackGemPurchase (modalId, data) {
-      // Track opening of gems modal unless it's been already tracked
-      // For example the gems button in the menu already tracks the event by itself
-      if (modalId === 'buy-gems' && data.alreadyTracked !== true) {
-        Analytics.track({
-          hitType: 'event',
-          eventCategory: 'button',
-          eventAction: 'click',
-          eventLabel: 'Gems > Wallet',
-        });
-      }
-    },
    itemSelected (item) {
      this.selectedItemToBuy = item;
    },
--- a/website/client/src/components/achievements/firstDrops.vue
+++ b/website/client/src/components/achievements/firstDrops.vue
@@ -126,7 +126,7 @@ export default {
        egg: '',
        hatchingPotion: '',
      };
-      this.$root.$emit('habitica::dismiss-modal', 'first-drops');
+      this.$root.$emit('bv::hide::modal', 'first-drops');
    },
    toInventory () {
      this.$router.push('/inventory/items');
--- a/website/client/src/components/challenges/challengeModal.vue
+++ b/website/client/src/components/challenges/challengeModal.vue
@@ -607,7 +607,7 @@ export default {
      this.$emit('createChallenge', challenge);
      this.resetWorkingChallenge();

-      this.$root.$emit('habitica::dismiss-modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
      this.$router.push(`/challenges/${challenge._id}`);
    },
    async updateChallenge () {
@@ -628,7 +628,7 @@ export default {
      const challenge = await this.$store.dispatch('challenges:updateChallenge', { challenge: challengeDetails });
      this.$emit('updatedChallenge', { challenge });
      this.resetWorkingChallenge();
-      this.$root.$emit('habitica::dismiss-modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
    },
    toggleCategorySelect () {
      this.showCategorySelect = !this.showCategorySelect;
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -144,7 +144,7 @@ export default {
        challengeId: this.challengeId,
        winnerId: this.winner._id,
      });
-      this.$root.$emit('habitica::dismiss-modal', 'close-challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'close-challenge-modal');
      this.$router.push('/challenges/myChallenges');
    },
    async deleteChallenge () {
@@ -153,7 +153,7 @@ export default {
        challengeId: this.challengeId,
        prize: this.prize,
      });
-      this.$root.$emit('habitica::dismiss-modal', 'close-challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'close-challenge-modal');
      this.$router.push('/challenges/myChallenges');
    },
  },
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -295,6 +295,7 @@
 </style>

 <script>
+import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
 import markdown from '@/directives/markdown';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
@@ -305,10 +306,7 @@ import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
 import heart from '@/assets/svg/health.svg';
 import logo from '@/assets/svg/habitica-logo.svg';

-import fourGems from '@/assets/svg/4-gems.svg';
 import twentyOneGems from '@/assets/svg/21-gems.svg';
-import fortyTwoGems from '@/assets/svg/42-gems.svg';
-import eightyFourGems from '@/assets/svg/84-gems.svg';

 import amazonButton from '@/components/payments/amazonButton';

@@ -326,16 +324,12 @@ export default {
        logo,
        check: checkIcon,
        creditCardIcon,
-        fourGems,
        heart,
        twentyOneGems,
-        fortyTwoGems,
-        eightyFourGems,
      }),
      gemAmount: 0,
-      subscriptionPlan: '',
-      selectedPage: 'subscribe',
      planGemLimits,
+      alreadyTracked: false,
    };
  },
  computed: {
@@ -349,6 +343,20 @@ export default {
        >= (this.user.purchased.plan.consecutive.gemCapExtra + this.planGemLimits.convCap);
    },
  },
+  mounted () {
+    this.$root.$on('bv::show::modal', (modalId, data = {}) => {
+      // Track opening of gems modal unless it's been already tracked
+      // For example the gems button in the menu already tracks the event by itself
+      if (modalId === 'buy-gems' && data.alreadyTracked !== true) {
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'button',
+          eventAction: 'click',
+          eventLabel: 'Gems > Wallet',
+        });
+      }
+    });
+  },
  methods: {
    close () {
      this.$root.$emit('bv::hide::modal', 'buy-gems');
--- a/website/client/src/components/payments/selectUserModal.vue
+++ b/website/client/src/components/payments/selectUserModal.vue
@@ -177,7 +177,7 @@ export default {
  },
  methods: {
    close () {
-      this.$root.$emit('habitica::dismiss-modal', 'select-user-modal');
+      this.$root.$emit('bv::hide::modal', 'select-user-modal');
    },
    searchUser: debounce(async function userSearch (searchTerm) {
      this.foundUser = {};
--- a/website/client/src/components/payments/sendGemsModal.vue
+++ b/website/client/src/components/payments/sendGemsModal.vue
@@ -296,7 +296,7 @@ export default {
      this.sendingInProgress = false;
    },
    close () {
-      this.$root.$emit('habitica::dismiss-modal', 'send-gems');
+      this.$root.$emit('bv::hide::modal', 'send-gems');
    },
  },
 };
--- a/website/client/src/components/payments/successModal.vue
+++ b/website/client/src/components/payments/successModal.vue
@@ -244,7 +244,7 @@ export default {
  methods: {
    close () {
      this.paymentData = {};
-      this.$root.$emit('habitica::dismiss-modal', 'payments-success-modal');
+      this.$root.$emit('bv::hide::modal', 'payments-success-modal');
    },
  },
 };
--- a/website/client/src/pages/private-messages.vue
+++ b/website/client/src/pages/private-messages.vue
@@ -644,8 +644,8 @@ export default {
    await this.reload();

    // close members modal if the Private Messages page is opened in an existing tab
-    this.$root.$emit('habitica::dismiss-modal', 'profile');
-    this.$root.$emit('habitica::dismiss-modal', 'members-modal');
+    this.$root.$emit('bv::hide::modal', 'profile');
+    this.$root.$emit('bv::hide::modal', 'members-modal');

    const data = this.$store.state.privateMessageOptions;
    if (data && data.userIdToMessage) {