Skip to content

Commit

Permalink
simplified duplication in tour manager when modal is open
Browse files Browse the repository at this point in the history
  • Loading branch information
onmax committed Mar 5, 2022
1 parent f041efe commit 558bdf3
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 74 deletions.
4 changes: 0 additions & 4 deletions src/components/NimiqSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,3 @@ export default defineComponent({
}
}
</style>

function scrollIntoView() {
throw new Error('Function not implemented.');
}
9 changes: 2 additions & 7 deletions src/components/Tour.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
62 changes: 3 additions & 59 deletions src/components/TourLargeScreenManager.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand Down Expand Up @@ -134,6 +77,7 @@ export default defineComponent({
.tour-manager {
width: 100%;
overflow: hidden;
z-index: 10;
margin-bottom: 2rem;
Expand Down
8 changes: 4 additions & 4 deletions src/components/modals/Modal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit 558bdf3

Please sign in to comment.