Merge branch 'feature/custom-callback-management' into develop

pulsardev · Mar 16, 2018 · da97b22 · da97b22
2 parents 7af9743 + 255117d
commit da97b22
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 20 deletions.
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -10,5 +10,6 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/demo/src/components/MyTour.vue b/demo/src/components/MyTour.vue
@@ -4,7 +4,7 @@
     <button @click="nextStep" class="btn btn-lg">Next step</button>
     <button @click="showLastStep" class="btn btn-lg">Show last step</button>
 
-    <v-tour name="myTour" :steps="steps">
+    <v-tour name="myTour" :steps="steps" :callbacks="callbacks">
       <template slot-scope="tour">
         <transition name="fade">
           <v-step
@@ -43,6 +43,9 @@ export default {
         },
         {
           target: '#v-step-1',
+          header: {
+            title: 'Vue Tour'
+          },
           content: 'An awesome plugin made with Vue.js!'
         },
         {
@@ -58,18 +61,37 @@ export default {
             placement: 'left'
           }
         }
-      ]
+      ],
+      callbacks: {
+        onPreviousStep: this.myCustomPreviousStepCallback,
+        onNextStep: this.myCustomNextStepCallback
+      }
     }
   },
   mounted: function () {
     this.$tours['myTour'].start()
+
+    // A dynamically added onStop callback
+    this.callbacks.onStop = () => {
+      document.querySelector('#v-step-0').scrollIntoView({behavior: 'smooth'})
+    }
   },
   methods: {
     nextStep () {
       this.$tours['myTour'].nextStep()
     },
     showLastStep () {
       this.$tours['myTour'].currentStep = this.steps.length - 1
+    },
+    myCustomPreviousStepCallback (currentStep) {
+      console.log('[Vue Tour] A custom previousStep callback has been called on step ' + (currentStep + 1))
+    },
+    myCustomNextStepCallback (currentStep) {
+      console.log('[Vue Tour] A custom nextStep callback has been called on step ' + (currentStep + 1))
+
+      if (currentStep === 1) {
+        console.log('[Vue Tour] A custom nextStep callback has been called from step 2 to step 3')
+      }
     }
   }
 }
@@ -80,7 +102,7 @@ export default {
     transition: opacity .5s;
   }
 
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  .fade-enter, .fade-leave-to {
     opacity: 0;
   }
 </style>
diff --git a/demo/src/views/Home.vue b/demo/src/views/Home.vue
@@ -8,14 +8,20 @@
             <h2>VUE TOUR</h2>
           </a>
         </div>
+
         <h1>vue-tour</h1>
         <h2>a <u>Lightweight</u>, <u>Simple</u> and <u>Customizable</u> tour plugin for use with Vue.js</h2>
 
         <p>
           <a href="https://pulsar.gitbooks.io/vue-tour/" class="btn btn-primary btn-lg">Docs</a>
           <a href="https://github.com/pulsardev/vue-tour" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
         </p>
-        <p class="text-gray">Latest version: <span class="version">1.0.0</span></p>
+
+        <p>
+          <a class="github-button" href="https://github.com/pulsardev/vue-tour" data-size="large" data-show-count="true" aria-label="Star pulsardev/vue-tour on GitHub">Star</a>
+        </p>
+
+        <p class="text-gray">Latest version: <span class="version">{{ version }}</span></p>
         <div class="columns">
           <div class="column col-4 col-xs-12">
             <div class="card text-center">
@@ -106,7 +112,7 @@
 
     <footer class="section section-footer">
       <div id="copyright" class="grid-footer container grid-lg">
-        <p><a href="https://pulsar.gitbooks.io/vue-tour/" target="_blank">Documents</a> | <a href="https://github.com/pulsardev/vue-tour" target="_blank">GitHub</a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLK49A83DXCQ8" target="_blank">PayPal Donate</a> | Version <span class="version">1.0.0</span></p>
+        <p><a href="https://pulsar.gitbooks.io/vue-tour/" target="_blank">Documents</a> | <a href="https://github.com/pulsardev/vue-tour" target="_blank">GitHub</a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLK49A83DXCQ8" target="_blank">PayPal Donate</a> | Version <span class="version">{{ version }}</span></p>
         <p>Built with <span class="text-error">♥</span> by <a href="https://pulsar.surge.sh" target="_blank">Pulsar</a>. Licensed under the <a href="https://github.com/pulsardev/vue-tour/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
       </div>
     </footer>
@@ -120,6 +126,11 @@ export default {
   name: 'home',
   components: {
     MyTour
+  },
+  data () {
+    return {
+      version: '1.0.0'
+    }
   }
 }
 </script>
diff --git a/demo/vue.config.js b/demo/vue.config.js
@@ -1,3 +1,3 @@
 module.exports = {
   baseUrl: './'
-}
+}
diff --git a/src/components/VStep.vue b/src/components/VStep.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="v-step" :id="'v-step-' + hash" :ref="'v-step-' + hash">
+    <slot name="header">
+      <div v-if="step.header" class="v-step__header">
+        <div v-if="step.header.title" v-html="step.header.title"></div>
+      </div>
+    </slot>
+
     <slot name="content">
       <div class="v-step__content">
-        <span v-if="step.content" v-html="step.content"></span>
-        <span v-else>This is a demo step! The id of this step is {{ hash }} and it targets {{ step.target }}.</span>
+        <div v-if="step.content" v-html="step.content"></div>
+        <div v-else>This is a demo step! The id of this step is {{ hash }} and it targets {{ step.target }}.</div>
       </div>
     </slot>
 
@@ -16,13 +22,14 @@
       </div>
     </slot>
 
-    <div class="v-step__arrow"></div>
+    <div class="v-step__arrow" :class="{ 'v-step__arrow--dark': step.header && step.header.title }"></div>
   </div>
 </template>
 
 <script>
 import Popper from 'popper.js'
 import sum from 'hash-sum'
+import { DEFAULT_STEP_OPTIONS } from '../shared/constants'
 
 export default {
   name: 'v-step',
@@ -51,8 +58,15 @@ export default {
       hash: sum(this.step.target)
     }
   },
+  computed: {
+    params () {
+      return {
+        ...DEFAULT_STEP_OPTIONS,
+        ...this.step.params
+      }
+    }
+  },
   mounted () {
-    let params = this.step.params || {}
     let targetElement = document.querySelector(this.step.target)
 
     // TODO: debug mode
@@ -65,9 +79,7 @@ export default {
       new Popper(
         targetElement,
         this.$refs['v-step-' + this.hash],
-        {
-          placement: params.placement ? params.placement : 'bottom'
-        }
+        this.params
       )
     } else {
       console.error('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] does not exist!')
@@ -98,6 +110,10 @@ export default {
 
   .v-step .v-step__arrow {
     border-color: #50596c; /* #ffc107, #35495e */
+
+    &--dark {
+      border-color: #454d5d;
+    }
   }
 
   .v-step[x-placement^="top"] {
@@ -162,6 +178,14 @@ export default {
 
   /* Custom */
 
+  .v-step__header {
+    margin: -1rem -1rem 0.5rem;
+    padding: 0.5rem;
+    background-color: #454d5d;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
   .v-step__content {
     margin: 0 0 1rem 0;
   }

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { DEFAULT_OPTIONS, KEYS } from '../shared/constants'
+import { DEFAULT_CALLBACKS, DEFAULT_OPTIONS, KEYS } from '../shared/constants'
 
 export default {
   name: 'v-tour',
@@ -45,6 +45,10 @@ export default {
     options: {
       type: Object,
       default: () => { return DEFAULT_OPTIONS }
+    },
+    callbacks: {
+      type: Object,
+      default: () => { return DEFAULT_CALLBACKS }
     }
   },
   data () {
@@ -74,6 +78,12 @@ export default {
         ...this.options
       }
     },
+    customCallbacks () {
+      return {
+        ...DEFAULT_CALLBACKS,
+        ...this.callbacks
+      }
+    },
     // Return true if the tour is active, which means that there's a VStep displayed
     isRunning () {
       return this.currentStep > -1 && this.currentStep < this.numberOfSteps
@@ -92,16 +102,24 @@ export default {
     start () {
       // Wait for the DOM to be loaded, then start the tour
       setTimeout(() => {
+        this.customCallbacks.onStart()
         this.currentStep = 0
       }, this.customOptions.startTimeout)
     },
     previousStep () {
-      if (this.currentStep > 0) this.currentStep--
+      if (this.currentStep > 0) {
+        this.customCallbacks.onPreviousStep(this.currentStep)
+        this.currentStep--
+      }
     },
     nextStep () {
-      if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) this.currentStep++
+      if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) {
+        this.customCallbacks.onNextStep(this.currentStep)
+        this.currentStep++
+      }
     },
     stop () {
+      this.customCallbacks.onStop()
       this.currentStep = -1
     },
 

diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -1,10 +1,21 @@
-export const KEYS = {
-  ARROW_RIGHT: 39,
-  ARROW_LEFT: 37,
-  ESCAPE: 27
+export const DEFAULT_CALLBACKS = {
+  onStart: () => {},
+  onPreviousStep: (currentStep) => {},
+  onNextStep: (currentStep) => {},
+  onStop: () => {}
 }
 
 export const DEFAULT_OPTIONS = {
   useKeyboardNavigation: true,
   startTimeout: 0
 }
+
+export const DEFAULT_STEP_OPTIONS = {
+  placement: 'bottom'
+}
+
+export const KEYS = {
+  ARROW_RIGHT: 39,
+  ARROW_LEFT: 37,
+  ESCAPE: 27
+}