Issue due to js-spatial-navigation about the defaultElement configuration with selectors

[erwanlfrt]

An issue occurs due to js-spatial-navigation about the defaultElement configuration using selectors. Check the following issue for more information :

https://github.com/luke-chang/js-spatial-navigation/issues/48

Have a pleasant day.

[spacerefugee]

Hi @erwanlfrt , I have fixed this issue with your code! Thanks your reply!

[erwanlfrt]

Thank you @spacerefugee for the update.

I close this issue, maybe adding a direct dependency to js-spatial-navigation instead of copying the entire code of the library will be a more perennial solution.

Have a good day !

[spacerefugee]

@erwanlfrt You may notice that I added an additional configuration for smooth scrolling into the focusing element, to achieve this I have to modify js-spatial-navigation. Maybe I should fork js-spatial-navigation and modify it then add dependency to this repo just like you do.

[erwanlfrt]

@spacerefugee Indeed your spatial_navigation.js file is ahead from the existing one into js-spatial-navigation. ScrollOptions is a feature which improves the library so a pull request is conceivable.

[BlueBazze]

Would it be an idea to add mouse support? If anyone want to release an app for WebOS, it requires magic remote support. I have tried using React for a tv app, but it was too slow and had lagging ui. Vue is a lot better regarding performance. Maybe down the line other people want to use Vue for this. This library is basically the only option for tv apps with Vue.

[spacerefugee]

@BlueBazze I wrote this library exactly for tv apps with Vue, but I only run it on Samsung Tizen tv. I don't know how the magic remote behave, if it is same as mouse behavior, maybe you can write a directive for simply add a css class with hover style to the focusable element.

[BlueBazze]

I started trying to focus elements with mouse enter.

mounted(el, binding) {
    el.addEventListener("mouseenter", function () {
      el.style.border = "1px solid black";
      el.style.color = "green";
      el.style.backgroundColor = "yellow";
    });
  },

This works when i put it in a directive within my project. But if i try to put it in the directive for v-focus it dosnt work at all. Im gonna spend some time on this seeing as i cant release the app on WebOS without it.

[BlueBazze]

Alright. Apparently Vite has some cache so its not always using node_modules directly. Its working as expected. Im gonna add click functionality. Before we could just use @keyup on the element, but it would mean if we want magic remote support. We also need to call the same code with v-on:click for every button.

So if we convert the v-focus value to an object. We can have two values, one called "disabled", and another called "action" or something like that.