From 558bdf3e39f6b9b96ffd69fdbbb29d491634c08b Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Sat, 5 Mar 2022 12:27:12 -0600
Subject: [PATCH] simplified duplication in tour manager when modal is open

---
 src/components/NimiqSelector.vue          |  4 --
 src/components/Tour.vue                   |  9 +---
 src/components/TourLargeScreenManager.vue | 62 ++---------------------
 src/components/modals/Modal.vue           |  8 +--
 4 files changed, 9 insertions(+), 74 deletions(-)

diff --git a/src/components/NimiqSelector.vue b/src/components/NimiqSelector.vue
index 28612d609..cbaf11a7a 100644
--- a/src/components/NimiqSelector.vue
+++ b/src/components/NimiqSelector.vue
@@ -318,7 +318,3 @@ export default defineComponent({
     }
 }
 </style>
-
-function scrollIntoView() {
-  throw new Error('Function not implemented.');
-}
diff --git a/src/components/Tour.vue b/src/components/Tour.vue
index 12cee2167..b4dbd2a88 100644
--- a/src/components/Tour.vue
+++ b/src/components/Tour.vue
@@ -658,17 +658,12 @@ export default defineComponent({
 // updated as data attributes allow to use a value like [data-opaified="1"] to select ceratain elements
 // as well as [data-opacified] to all elements with this attribute. @see _removeUIFromOldStep
 
-#app[data-tour-active] [data-opacified],
-#app[data-tour-active] ~ div [data-opacified] {
+#app[data-tour-active] [data-opacified] {
   filter: opacity(0.3);
 }
 
 #app[data-tour-active] [data-non-interactable],
-#app[data-tour-active] [data-non-interactable] *,
-// Select also modals which are not children of #app but siblings
-#app[data-tour-active] ~ div [data-non-interactable],
-#app[data-tour-active] ~ div [data-non-interactable] *
-{
+#app[data-tour-active] [data-non-interactable] *{
     user-select: none !important;
     pointer-events: none !important;
     cursor: not-allowed;
diff --git a/src/components/TourLargeScreenManager.vue b/src/components/TourLargeScreenManager.vue
index 9d6d83a80..3a687b1a8 100644
--- a/src/components/TourLargeScreenManager.vue
+++ b/src/components/TourLargeScreenManager.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts">
-import { ITourBroadcast, ITourBroadcastStepChanged, TourStepIndex, IWalletHTMLElements } from '@/lib/tour';
-import { defineComponent, onMounted, onUnmounted, Ref, ref } from '@vue/composition-api';
+import { ITourBroadcast, ITourBroadcastStepChanged, TourStepIndex } from '@/lib/tour';
+import { defineComponent, onMounted, Ref, ref } from '@vue/composition-api';
 
 export default defineComponent({
     name: 'tour-large-screen-manager',
@@ -36,72 +36,15 @@ export default defineComponent({
 
         onMounted(async () => {
             show.value = true;
-            setTimeout(() => _checkIfModalIsOpen(), 2000);
         });
 
-        onUnmounted(() => _removeClonedManager());
-
         async function _stepChanged(
             { nSteps: newNSteps, currentStep: newCurrentStep }: ITourBroadcastStepChanged['payload']) {
             nSteps.value = newNSteps;
             currentStep.value = newCurrentStep;
-
-            await context.root.$nextTick();
-
-            _checkIfModalIsOpen();
-        }
-
-        function _checkIfModalIsOpen() {
-            const modalIsOpen = document.querySelector(IWalletHTMLElements.MODAL_CONTAINER) !== null;
-            if (modalIsOpen) {
-                _duplicateManager();
-            } else {
-                _removeClonedManager();
-            }
-        }
-
-        // remove the cloned manager if it exists due to a modal not being open anymore
-        // see _duplicateManager()
-        function _removeClonedManager() {
-            const tourManager = document.querySelector('body > .tour-manager');
-            if (tourManager) {
-                tourManager.remove();
-            }
-            const original = $originalManager.value!;
-            if (!original) return;
-            original.style.visibility = 'initial';
-        }
-
-        // at some steps, a modal will be openened in the tour and we still need to show the tour
-        // manager to the user, therefore, we need to duplicate the manager and set it to the body
-        // positionated over the modal
-        function _duplicateManager() {
-            _removeClonedManager();
-            const original = $originalManager.value!;
-            if (!original) return;
-
-            original.style.visibility = 'hidden';
-
-            const manager = original.cloneNode(true) as HTMLDivElement;
-
-            if (!manager) {
-                return;
-            }
-
-            manager.style.position = 'absolute';
-            manager.style.top = `${original.offsetTop}px`;
-            manager.style.left = `${original.offsetLeft}px`;
-            manager.style.width = `${original.offsetWidth}px`;
-            manager.style.height = `${original.offsetHeight}px`;
-            manager.style.visibility = 'inherit';
-            manager.style.zIndex = '10';
-            document.body.appendChild(manager);
-
-            manager.querySelector('button')!.addEventListener('click', () => endTour());
         }
 
         function endTour(emit = true) {
-            _removeClonedManager();
             show.value = false;
             if (emit) {
                 // Notify tour component through root instance event bus
@@ -134,6 +77,7 @@ export default defineComponent({
 .tour-manager {
     width: 100%;
     overflow: hidden;
+    z-index: 10;
 
     margin-bottom: 2rem;
 
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 1474e7977..9e773f6c3 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, Ref, ref, watch } from '@vue/composition-api';
-import { SmallPage, CloseButton } from '@nimiq/vue-components';
 import { useKeys } from '@/composables/useKeys';
-import { useWindowSize } from '../../composables/useWindowSize';
+import { CloseButton, SmallPage } from '@nimiq/vue-components';
+import { computed, defineComponent, onMounted, Ref, ref, watch } from '@vue/composition-api';
 import { useSwipes } from '../../composables/useSwipes';
-import { useSettingsStore } from '../../stores/Settings';
+import { useWindowSize } from '../../composables/useWindowSize';
 import { pointerdown } from '../../directives/PointerEvents';
+import { useSettingsStore } from '../../stores/Settings';
 
 export function enableModalTransition() {
     document.body.classList.remove('modal-transition-disabled');