@asd20/ui 3.2.963 → 3.2.965

package/src/components/organisms/Asd20TourGuide/index.vue

@@ -1,247 +0,0 @@
-<template>
-  <div class="asd20-tour-guide">
-    <v-tour
-      :steps="steps"
-      :callbacks="{
-        onStart: onStart,
-        onNextStep: onNextStep,
-        onPreviousStep: onPreviousStep,
-        onStop: onStop,
-      }"
-      :name="name"
-    >
-      <template slot-scope="tour">
-        <transition name="fade">
-          <template v-for="(step, index) of tour.steps">
-            <v-step
-              v-if="tour.currentStep === index"
-              :key="index"
-              :step="step"
-              :previous-step="tour.previousStep"
-              :next-step="tour.nextStep"
-              :stop="tour.stop"
-              :is-first="tour.isFirst"
-              :is-last="tour.isLast"
-              :labels="tour.labels"
-            >
-              <template>
-                <div slot="actions" class="v-step__actions">
-                  <asd20-button
-                    v-if="!tour.isFirst"
-                    transparent
-                    horizontal
-                    class="btn btn-primary"
-                    label="Previous"
-                    @click.native="tour.previousStep"
-                  />
-                  <asd20-button
-                    :label="tour.isLast ? 'Finish' : 'Skip Tour'"
-                    transparent
-                    horizontal
-                    class="btn btn-primary"
-                    @click.native="tour.stop"
-                  />
-                  <asd20-button
-                    v-if="!tour.isLast"
-                    transparent
-                    horizontal
-                    class="btn btn-primary"
-                    label="Next"
-                    @click.native="tour.nextStep"
-                  />
-                </div>
-              </template>
-            </v-step>
-          </template>
-        </transition>
-      </template>
-    </v-tour>
-    <asd20-modal
-      v-if="useIntro"
-      class="intro-modal"
-      :open="showIntro"
-      :title="introTitle"
-      icon="info"
-      dismissable
-      windowed
-      @dismiss="showIntro = false"
-    >
-      <Asd20Viewport padded scrollable>
-        <slot name="intro" />
-
-        <asd20-button
-          transparent
-          bordered
-          horizontal
-          label="Take a Tour"
-          @click.native="
-            showIntro = false
-            $tours[name].start()
-          "
-        />
-      </Asd20Viewport>
-    </asd20-modal>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import Asd20Modal from '../../molecules/Asd20Modal'
-import Asd20Viewport from '../../atoms/Asd20Viewport'
-import VueTour from 'vue-tour'
-import 'vue-tour/dist/vue-tour.css'
-
-const safeCall = (obj, funcName, ...args) => {
-  if (
-    obj !== undefined &&
-    obj &&
-    obj.hasOwnProperty(funcName) &&
-    typeof obj[funcName] === 'function'
-  )
-    obj[funcName](...args)
-}
-
-Vue.use(VueTour)
-
-export default {
-  name: 'App',
-  components: { Asd20Modal, Asd20Viewport },
-  data: () => ({
-    showIntro: false,
-  }),
-  props: {
-    name: { type: String, default: 'tour' },
-    steps: { type: Array, default: () => [] },
-    callbacks: {
-      type: Object,
-      default: null,
-    },
-    useIntro: { type: Boolean, default: false },
-    introTitle: { type: String, default: 'Tour' },
-  },
-
-  methods: {
-    onStart() {
-      const curStepEl = document.querySelector(this.steps[0].target)
-      const curStepElParent = curStepEl.parentNode
-
-      //Add the active class for the first step
-      curStepEl.classList.add('tour-active')
-      curStepElParent.classList.add('tour-active-parent')
-      safeCall(this.callbacks, 'onStart')
-    },
-    onNextStep(step) {
-      const curStepEl = document.querySelector(this.steps[step].target)
-      const curStepElParent = curStepEl.parentNode
-      const nextStepEl = document.querySelector(this.steps[step + 1].target)
-      const nextStepElParent = nextStepEl.parentNode
-
-      //Add active class to next step and remove from current.
-      curStepEl.classList.remove('tour-active')
-      curStepElParent.classList.remove('tour-active-parent')
-      nextStepEl.classList.add('tour-active')
-      nextStepElParent.classList.add('tour-active-parent')
-      safeCall(this.callbacks, 'onNextStep', step)
-    },
-    onPreviousStep(step) {
-      const curStepEl = document.querySelector(this.steps[step].target)
-      const prevStepEl = document.querySelector(this.steps[step - 1].target)
-      const curStepElParent = curStepEl.parentNode
-      const prevStepElParent = prevStepEl.parentNode
-
-      //Add active step to previous and remove from current.
-      curStepEl.classList.remove('tour-active')
-      curStepElParent.classList.remove('tour-active-parent')
-      prevStepEl.classList.add('tour-active')
-      prevStepElParent.classList.add('tour-active-parent')
-      safeCall(this.callbacks, 'onPreviousStep', step)
-    },
-    onStop() {
-      document.querySelector(`.tour-active`).classList.remove('tour-active')
-      document
-        .querySelector(`.tour-active-parent`)
-        .classList.remove('tour-active-parent')
-      safeCall(this.callbacks, 'onStop')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../design/_variables.scss';
-
-.asd20-tour-guide {
-  &::v-deep .v-tour .v-step {
-    z-index: 10001;
-    background: white;
-    color: var(--website-card__reverse-background-color);
-    border-radius: 0;
-    box-shadow: 0 0 0 1px var(--color__tertiary),
-      0 0 2rem 0 var(--color__secondary);
-    filter: none;
-  }
-
-  &::v-deep .v-step__actions {
-    display: flex;
-    margin: 0 -1rem -1rem -1rem;
-    :first-child {
-      margin-right: auto;
-    }
-    :last-child {
-      margin-right: 0;
-      margin-left: auto;
-    }
-  }
-
-  &::v-deep .v-tour .v-step__header {
-    background: transparent;
-    border-bottom: 1px solid var(--color__tertiary);
-    margin-bottom: space(1);
-    padding: space(0.5) space(1);
-    border-radius: 0;
-    color: var(--color__primary);
-    font-size: 1.125rem;
-    font-weight: bold;
-  }
-
-  &::v-deep .v-tour .v-step .v-step__arrow {
-    border-width: 0.75rem;
-  }
-
-  &::v-deep .v-tour .v-step[x-placement^='right'] .v-step__arrow {
-    left: -1.5rem;
-    border-right-color: var(--website-page__background-color);
-  }
-  &::v-deep .v-tour .v-step[x-placement^='left'] .v-step__arrow {
-    right: -1.5rem;
-    border-left-color: var(--website-page__background-color);
-  }
-  &::v-deep .v-tour .v-step[x-placement^='top'] .v-step__arrow {
-    bottom: -1.5rem;
-    border-top-color: var(--website-page__background-color);
-  }
-  &::v-deep .v-tour .v-step[x-placement^='bottom'] .v-step__arrow {
-    top: -1.5rem;
-    border-bottom-color: var(--website-page__background-color);
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.5s;
-  }
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
-}
-
-@media (min-width: 1024px) {
-  .asd20-tour-guide .intro-modal {
-    &::v-deep .asd20-modal {
-      align-self: center;
-      flex-grow: 0;
-      max-width: 50vw;
-    }
-  }
-}
-</style>