tethys.backend/resources/js/Components/FirstrunWizard/FirstrunWizard.vue

<!--
  - @copyright Copyright (c) 2023 Arno Kaimbacher <arno.kaimbacher@outlook.at>
  -
  - @author Arno Kaimbacher <arno.kaimbacher@outlook.at>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->

<template>
    <NcModal v-if="showModal" id="firstrunwizard" class="first-run-wizard" size="normal" :has-next="hasNext"
        :has-previous="hasPrevious" @close="close" @next="goToNextPage" @previous="goToPreviousPage">
        <!-- page 0 for entry -->       
        <Page0 v-if="page === 0" @next="goToNextPage" />

        <div v-else class="first-run-wizard__wrapper">
            <Transition :name="circleSlideDirection">
                <div v-if="page === 1" class="first-run-wizard__background-circle" />
            </Transition>

            <div class="first-run-wizard__background-bar rounded-t-xl" />

            <!-- previous header button -->
            <NcButton v-if="page > 1" type="tertiary" class="first-run-wizard__back-button"
                aria-label="'Go to previous page'" @click="goToPreviousPage" :icon="mdiArrowLeft" :size="20"
                :rounded-full="true">
            </NcButton>
            <!-- close header button  -->
            <NcButton :type="page === 1 ? 'primary' : 'tertiary'" class="first-run-wizard__close-button"
                aria-label="'Close dialog'" @click="close" :icon="mdiClose" :size="20" :rounded-full="true">
            </NcButton>

            <!--  show logo on first page -->
            <div v-if="page === 1" class="first-run-wizard__logo"> <!-- :style="logoStyle" -->
                <JustboilLogo class="w-auto h-16" />
            </div>
            <div v-if="page === 1" class="first-run-wizard__logo" />
            <Transition :name="pageSlideDirection" mode="out-in">
                <Page1 v-if="page === 1" />
                <Page2 v-else-if="page === 2" />
                <Page3 v-else-if="page === 3" />
            </Transition>

            <!-- last wider button at footer for every page -->
            <NcButton type="primary" alignment="center-reverse" :wide="true" @click="handleButtonCLick" :label="buttonText"
                :icon="mdiArrowRight" :size="20">
            </NcButton>
        </div>
    </NcModal>
</template>

<script lang="ts">
// import { NcModal, BaseButton } from '@nextcloud/vue';
import NcModal from '@/Components/NcModal.vue';
import BaseButton from '@/Components/BaseButton.vue';
import NcButton from '@/Components/NcButton.vue';
// import { imagePath, generateUrl } from '@nextcloud/router';
// import axios from '@nextcloud/axios';
import JustboilLogo from '@/Components/JustboilLogo.vue';

import Page0 from './components/Page0.vue';
import Page1 from './components/Page1.vue';
import Page2 from './components/Page2.vue';
import Page3 from './components/Page3.vue';

import { mdiClose, mdiArrowRight, mdiArrowLeft } from '@mdi/js';

export default {
    name: 'FirstrunWizard',
    components: {
        NcModal,
        Page0,
        Page1,
        Page2,
        BaseButton,
        NcButton,
        Page3,
        JustboilLogo
    },

    data() {
        return {
            showModal: false,
            page: 1,
            // logoURL: '/logo.svg',// imagePath('firstrunwizard', 'nextcloudLogo.svg'),
            pageSlideDirection: undefined,
            circleSlideDirection: undefined,
            mdiClose: mdiClose,
            mdiArrowRight: mdiArrowRight,
            mdiArrowLeft,
        };
    },

    computed: {
        // logoStyle() {
        //     // return { backgroundImage: 'url(' + this.logoURL + ')' };
        //     return { backgroundImage: 'url(' + this.logoURL + ')' };
        // },

        hasPrevious() {
            if (window.innerWidth <= 512) {
                return false;
            } else {
                return this.page > 1;
            }
        },

        hasNext() {
            if (window.innerWidth <= 512) {
                return false;
            } else {
                return this.page < 3;
            }
        },

        buttonText() {
            if (this.page === 1) {
                return 'TethysCloud on all your devices';
            } else if (this.page === 2) {
                return 'More about TethysCloud';
            } else if (this.page === 3) {
                return 'Get started!';
            }
            return '';
        },
    },

    methods: {
        open() {
            this.page = 1;
            this.showModal = true;
        },

        close() {
            this.page = 1;
            this.showModal = false;
            // axios.delete(generateUrl('/apps/firstrunwizard/wizard'));
        },

        goToNextPage() {
            this.pageSlideDirection = 'slide-left';
            if (this.page === 1) {
                this.circleSlideDirection = 'slide-up';
            }
            this.$nextTick(() => {
                this.page++;
            });
        },

        goToPreviousPage() {
            this.pageSlideDirection = 'slide-right';
            if (this.page === 2) {
                this.circleSlideDirection = 'slide-down';
            }
            this.$nextTick(() => {
                this.page--;
            });
        },

        handleButtonCLick() {
            if (this.page < 3) {
                this.goToNextPage();
            } else {
                this.close();
            }
        },
    },
};
</script>

<style lang="css" scoped>
.first-run-wizard {
    &__wrapper {
        position: relative;
        overflow: hidden;
        padding: calc(var(--default-grid-baseline) * 5);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    &__background-circle {
        height: 6000px;
        width: 6000px;
        border-radius: 3000px;
        background-color: var(--color-primary-element);
        position: absolute;
        top: -5900px;
        left: calc(-3000px + 50%);
    }

    &__background-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: var(--color-primary-element);
    }

    &__back-button {
        position: absolute;
        top: var(--default-grid-baseline);
        left: var(--default-grid-baseline);
    }

    &__close-button {
        position: absolute;
        top: var(--default-grid-baseline);
        right: var(--default-grid-baseline);
    }

    &__logo { 
        pointer-events: none;
        position: absolute;
        top: 40px;
        /* top: 50%; */
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--color-primary-element-text);
    }
}

.modal-wrapper .modal-container {
    overflow: hidden;
    /* max-width: 90%;
  width: 600px;
  max-height: min(90%, 100% - 100px); */
}

.modal-wrapper .modal-container__content {
    overflow: hidden;
    height: 100%;
    display: contents;
}

@media only screen and (max-width: 512px) {
    :deep(.modal-wrapper .modal-container) {
        height: 100dvh;
        top: 0;
    }

    :deep(.modal-header) {
        pointer-events: none;
    }
}

/* hide close button predefined by NCModal.vue */
:deep(.modal-container__close) {
    display: none;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
    transition: all 0.2s;
}

.slide-left-enter {
    opacity: 0;
    transform: translateX(30%);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translateX(-30%);
}

.slide-right-enter {
    opacity: 0;
    transform: translateX(-30%);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translateX(30%);
}

.slide-up-enter {
    top: calc(-5900px);
}

.slide-up-leave-to {
    top: calc(-5900px - 80px);
}

.slide-down-enter {
    top: calc(-5900px - 80px);
}

.slide-down-leave-to {
    top: calc(-5900px); 
}
</style>