vue-js-spatial-navigation

Vue directive of js-spatial-navigation;

Installation

NPM

    npm install vue-js-spatial-navigation

Getting Started

import Vue from "vue";
import vjsn from "vue-js-spatial-navigation";

Vue.use(vjsn);

Optional global Configuration

Additional configuration scrollOptions:

• The page will auto scroll to the focus element by using scrollIntoView.

• You can set this scrollOptions for the scrollIntoViewOptions.

• The page will not scroll to the focus element when setting scrollOptions to "" or null.

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);

Documentation

$SpatialNavigation

A global Vue instance property for SpatialNavigation;

// you can access SpatialNavigation in every instance
this.$SpatialNavigation;

v-focus

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>

dynamic control

<div v-focus="focusable">
  <div></div>
</div>

<script>
  export default {
    data() {
      return {
        focusable: false
      };
    },
    methods: {
      changeFocusable() {
        this.focusable = !this.focusable;
      }
    }
  };
</script>

v-focus-section

A directive that define a focus Section

<div v-focus-section>
  <div v-focus>
    <div></div>
  </div>
  <div v-focus>
    <div></div>
  </div>
</div>

Pass a specified section id

<!-- section id -->
<div v-focus-section:my-section>
  <div v-focus></div>
</div>

Set configuration

<!-- set configuration -->
<div v-focus-section:my-section="{enterTo:'last-focused'}">
  <div v-focus></div>
</div>

Set default section

<!-- set default section -->
<div v-focus-section:my-section.default="{enterTo:'last-focused'}">
  <div v-focus></div>
</div>

v-disable-focus-section

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>