Skip to content

Commit

Permalink
feat: use jump.js for more options per step
Browse files Browse the repository at this point in the history
jump.js allow more options (offset, duration)
offset is usefull when using fixed positionned "floating" menu for exemple
`scrollIntoView` is not yet fully compatible on all browser
  • Loading branch information
Lionel Bijaoui committed Aug 23, 2018
1 parent a3bba72 commit 64eb8d1
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 5 deletions.
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
},
"dependencies": {
"hash-sum": "^1.0.2",
"jump.js": "^1.0.2",
"popper.js": "^1.12.9",
"vue": "^2.5.13"
},
Expand Down
19 changes: 14 additions & 5 deletions src/components/VStep.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@
</template>

<script>
import Popper from 'popper.js'
import sum from 'hash-sum'
import { DEFAULT_STEP_OPTIONS } from '../shared/constants'
import Popper from "popper.js";
import jump from "jump.js";
import sum from "hash-sum";
import { DEFAULT_STEP_OPTIONS } from "../shared/constants";
export default {
name: 'v-step',
Expand Down Expand Up @@ -76,7 +77,15 @@ export default {
// console.log('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] is:', targetElement)
if (targetElement) {
targetElement.scrollIntoView({behavior: 'smooth'})
let jumpOptions = {
duration: this.step.duration || 1000,
offset: this.step.offset || 0,
callback: undefined,
a11y: false
};
jump(targetElement, jumpOptions);
// targetElement.scrollIntoView({ behavior: "smooth" });
/* eslint-disable no-new */
this._data._popper = new Popper(
Expand All @@ -88,7 +97,7 @@ export default {
console.error('[Vue Tour] The target element ' + this.step.target + ' of .v-step[id="' + this.hash + '"] does not exist!')
this.$emit('targetNotFound', this.step)
}
}
' of .v-step[id="' +
},
mounted () {
this.createStep()
Expand Down

0 comments on commit 64eb8d1

Please sign in to comment.