simplified duplication in tour manager when modal is open

nimiq · Mar 5, 2022 · d02c66f · d02c66f
1 parent f041efe
commit d02c66f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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;