Vue directive of js-spatial-navigation;
npm install vue-js-spatial-navigation
import Vue from "vue";
import vjsn from "vue-js-spatial-navigation";
Vue.use(vjsn);
Optional global Configuration
-
The page will auto scroll to the focus element by using
scrollIntoView
. -
You can set this
scrollOptions
for thescrollIntoViewOptions
. -
The page will not scroll to the focus element when setting
scrollOptions
to""
ornull
.
const config = {
straightOnly: false,
straightOverlapThreshold: 0.5,
rememberSource: false,
disabled: false,
defaultElement: "",
enterTo: "",
leaveFor: null,
restrict: "self-first",
tabIndexIgnoreList: "a, input, select, textarea, button, iframe, [contentEditable=true]",
navigableFilter: null,
scrollOptions: { behavior: "smooth", block: "center" }
};
Vue.use(vjsn, config);
A global Vue instance property for SpatialNavigation;
// you can access SpatialNavigation in every instance
this.$SpatialNavigation;
A directive that make the element focusable.
The element with v-focus
must under the element with v-focus-section
, see v-focus-section
<div v-focus>
<div></div>
</div>
<div v-focus="focusable">
<div></div>
</div>
<script>
export default {
data() {
return {
focusable: false
};
},
methods: {
changeFocusable() {
this.focusable = !this.focusable;
}
}
};
</script>
A directive that define a focus Section
<div v-focus-section>
<div v-focus>
<div></div>
</div>
<div v-focus>
<div></div>
</div>
</div>
<!-- section id -->
<div v-focus-section:my-section>
<div v-focus></div>
</div>
<!-- set configuration -->
<div v-focus-section:my-section="{enterTo:'last-focused'}">
<div v-focus></div>
</div>
<!-- set default section -->
<div v-focus-section:my-section.default="{enterTo:'last-focused'}">
<div v-focus></div>
</div>
This directive will make the conponemt unnavigable. See SpatialNavigation.disable(), SpatialNavigation.enable().
<div v-focus-section v-disable-focus-section="disable">
<div v-focus></div>
</div>
<script>
export default {
data() {
return {
disable: false
};
},
methods: {
changeDisable() {
this.disable = !this.disable;
}
}
};
</script>