Skip to content

Commit da97b22

Browse files
mmorainvillemmorainville
committed
Merge branch 'feature/custom-callback-management' into develop
2 parents 7af9743 + 255117d commit da97b22

File tree

7 files changed

+107
-20
lines changed

7 files changed

+107
-20
lines changed

‎demo/public/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
<body>
1111
<div id="app"></div>
1212
<!-- built files will be auto injected -->
13+
<script async defer src="https://buttons.github.io/buttons.js"></script>
1314
</body>
1415
</html>

‎demo/src/components/MyTour.vue

+25-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<button @click="nextStep" class="btn btn-lg">Next step</button>
55
<button @click="showLastStep" class="btn btn-lg">Show last step</button>
66

7-
<v-tour name="myTour" :steps="steps">
7+
<v-tour name="myTour" :steps="steps" :callbacks="callbacks">
88
<template slot-scope="tour">
99
<transition name="fade">
1010
<v-step
@@ -43,6 +43,9 @@ export default {
4343
},
4444
{
4545
target: '#v-step-1',
46+
header: {
47+
title: 'Vue Tour'
48+
},
4649
content: 'An awesome plugin made with Vue.js!'
4750
},
4851
{
@@ -58,18 +61,37 @@ export default {
5861
placement: 'left'
5962
}
6063
}
61-
]
64+
],
65+
callbacks: {
66+
onPreviousStep: this.myCustomPreviousStepCallback,
67+
onNextStep: this.myCustomNextStepCallback
68+
}
6269
}
6370
},
6471
mounted: function () {
6572
this.$tours['myTour'].start()
73+
74+
// A dynamically added onStop callback
75+
this.callbacks.onStop = () => {
76+
document.querySelector('#v-step-0').scrollIntoView({behavior: 'smooth'})
77+
}
6678
},
6779
methods: {
6880
nextStep () {
6981
this.$tours['myTour'].nextStep()
7082
},
7183
showLastStep () {
7284
this.$tours['myTour'].currentStep = this.steps.length - 1
85+
},
86+
myCustomPreviousStepCallback (currentStep) {
87+
console.log('[Vue Tour] A custom previousStep callback has been called on step ' + (currentStep + 1))
88+
},
89+
myCustomNextStepCallback (currentStep) {
90+
console.log('[Vue Tour] A custom nextStep callback has been called on step ' + (currentStep + 1))
91+
92+
if (currentStep === 1) {
93+
console.log('[Vue Tour] A custom nextStep callback has been called from step 2 to step 3')
94+
}
7395
}
7496
}
7597
}
@@ -80,7 +102,7 @@ export default {
80102
transition: opacity .5s;
81103
}
82104
83-
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
105+
.fade-enter, .fade-leave-to {
84106
opacity: 0;
85107
}
86108
</style>

‎demo/src/views/Home.vue

+13-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,20 @@
88
<h2>VUE TOUR</h2>
99
</a>
1010
</div>
11+
1112
<h1>vue-tour</h1>
1213
<h2>a <u>Lightweight</u>, <u>Simple</u> and <u>Customizable</u> tour plugin for use with Vue.js</h2>
1314

1415
<p>
1516
<a href="https://pulsar.gitbooks.io/vue-tour/" class="btn btn-primary btn-lg">Docs</a>
1617
<a href="https://github.com/pulsardev/vue-tour" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
1718
</p>
18-
<p class="text-gray">Latest version: <span class="version">1.0.0</span></p>
19+
20+
<p>
21+
<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>
22+
</p>
23+
24+
<p class="text-gray">Latest version: <span class="version">{{ version }}</span></p>
1925
<div class="columns">
2026
<div class="column col-4 col-xs-12">
2127
<div class="card text-center">
@@ -106,7 +112,7 @@
106112

107113
<footer class="section section-footer">
108114
<div id="copyright" class="grid-footer container grid-lg">
109-
<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>
115+
<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>
110116
<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>
111117
</div>
112118
</footer>
@@ -120,6 +126,11 @@ export default {
120126
name: 'home',
121127
components: {
122128
MyTour
129+
},
130+
data () {
131+
return {
132+
version: '1.0.0'
133+
}
123134
}
124135
}
125136
</script>

‎demo/vue.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
22
baseUrl: './'
3-
}
3+
}

‎src/components/VStep.vue

+31-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<template>
22
<div class="v-step" :id="'v-step-' + hash" :ref="'v-step-' + hash">
3+
<slot name="header">
4+
<div v-if="step.header" class="v-step__header">
5+
<div v-if="step.header.title" v-html="step.header.title"></div>
6+
</div>
7+
</slot>
8+
39
<slot name="content">
410
<div class="v-step__content">
5-
<span v-if="step.content" v-html="step.content"></span>
6-
<span v-else>This is a demo step! The id of this step is {{ hash }} and it targets {{ step.target }}.</span>
11+
<div v-if="step.content" v-html="step.content"></div>
12+
<div v-else>This is a demo step! The id of this step is {{ hash }} and it targets {{ step.target }}.</div>
713
</div>
814
</slot>
915

@@ -16,13 +22,14 @@
1622
</div>
1723
</slot>
1824

19-
<div class="v-step__arrow"></div>
25+
<div class="v-step__arrow" :class="{ 'v-step__arrow--dark': step.header && step.header.title }"></div>
2026
</div>
2127
</template>
2228

2329
<script>
2430
import Popper from 'popper.js'
2531
import sum from 'hash-sum'
32+
import { DEFAULT_STEP_OPTIONS } from '../shared/constants'
2633
2734
export default {
2835
name: 'v-step',
@@ -51,8 +58,15 @@ export default {
5158
hash: sum(this.step.target)
5259
}
5360
},
61+
computed: {
62+
params () {
63+
return {
64+
...DEFAULT_STEP_OPTIONS,
65+
...this.step.params
66+
}
67+
}
68+
},
5469
mounted () {
55-
let params = this.step.params || {}
5670
let targetElement = document.querySelector(this.step.target)
5771
5872
// TODO: debug mode
@@ -65,9 +79,7 @@ export default {
6579
new Popper(
6680
targetElement,
6781
this.$refs['v-step-' + this.hash],
68-
{
69-
placement: params.placement ? params.placement : 'bottom'
70-
}
82+
this.params
7183
)
7284
} else {
7385
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 {
98110
99111
.v-step .v-step__arrow {
100112
border-color: #50596c; /* #ffc107, #35495e */
113+
114+
&--dark {
115+
border-color: #454d5d;
116+
}
101117
}
102118
103119
.v-step[x-placement^="top"] {
@@ -162,6 +178,14 @@ export default {
162178
163179
/* Custom */
164180
181+
.v-step__header {
182+
margin: -1rem -1rem 0.5rem;
183+
padding: 0.5rem;
184+
background-color: #454d5d;
185+
border-top-left-radius: 3px;
186+
border-top-right-radius: 3px;
187+
}
188+
165189
.v-step__content {
166190
margin: 0 0 1rem 0;
167191
}

‎src/components/VTour.vue

+21-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</template>
3131

3232
<script>
33-
import { DEFAULT_OPTIONS, KEYS } from '../shared/constants'
33+
import { DEFAULT_CALLBACKS, DEFAULT_OPTIONS, KEYS } from '../shared/constants'
3434
3535
export default {
3636
name: 'v-tour',
@@ -45,6 +45,10 @@ export default {
4545
options: {
4646
type: Object,
4747
default: () => { return DEFAULT_OPTIONS }
48+
},
49+
callbacks: {
50+
type: Object,
51+
default: () => { return DEFAULT_CALLBACKS }
4852
}
4953
},
5054
data () {
@@ -74,6 +78,12 @@ export default {
7478
...this.options
7579
}
7680
},
81+
customCallbacks () {
82+
return {
83+
...DEFAULT_CALLBACKS,
84+
...this.callbacks
85+
}
86+
},
7787
// Return true if the tour is active, which means that there's a VStep displayed
7888
isRunning () {
7989
return this.currentStep > -1 && this.currentStep < this.numberOfSteps
@@ -92,16 +102,24 @@ export default {
92102
start () {
93103
// Wait for the DOM to be loaded, then start the tour
94104
setTimeout(() => {
105+
this.customCallbacks.onStart()
95106
this.currentStep = 0
96107
}, this.customOptions.startTimeout)
97108
},
98109
previousStep () {
99-
if (this.currentStep > 0) this.currentStep--
110+
if (this.currentStep > 0) {
111+
this.customCallbacks.onPreviousStep(this.currentStep)
112+
this.currentStep--
113+
}
100114
},
101115
nextStep () {
102-
if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) this.currentStep++
116+
if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) {
117+
this.customCallbacks.onNextStep(this.currentStep)
118+
this.currentStep++
119+
}
103120
},
104121
stop () {
122+
this.customCallbacks.onStop()
105123
this.currentStep = -1
106124
},
107125

‎src/shared/constants.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
export const KEYS = {
2-
ARROW_RIGHT: 39,
3-
ARROW_LEFT: 37,
4-
ESCAPE: 27
1+
export const DEFAULT_CALLBACKS = {
2+
onStart: () => {},
3+
onPreviousStep: (currentStep) => {},
4+
onNextStep: (currentStep) => {},
5+
onStop: () => {}
56
}
67

78
export const DEFAULT_OPTIONS = {
89
useKeyboardNavigation: true,
910
startTimeout: 0
1011
}
12+
13+
export const DEFAULT_STEP_OPTIONS = {
14+
placement: 'bottom'
15+
}
16+
17+
export const KEYS = {
18+
ARROW_RIGHT: 39,
19+
ARROW_LEFT: 37,
20+
ESCAPE: 27
21+
}

0 commit comments

Comments
 (0)