luke-chang / js-spatial-navigation

A javascript-based implementation of Spatial Navigation.
Mozilla Public License 2.0
370 stars 117 forks source link

Youtube Demo - do not go up or down if there's nothing directly above or below #23

Open onigetoc opened 6 years ago

onigetoc commented 6 years ago

Youtube Demo - do not go up or down if there's nothing directly above or below

In the Youtube demo, You can go up or down if there's nothing right or straight above or below, How can we fix this?

In my exemple, if you go on the first contentgroup and navigate to the last item to the right, you can not go up to search box. It also happen on your Youtube demo. if you go to the last item, you can not go down or up to the next content group if there's nothing straight foward, it even jump to the second contengroup.

And it do not remember the last elment focused when we navigate up and down between .contentgroup

http://tvcast.top/scripts/js-spatial-navigation-master/demo/apptv.html By the way, i created a demo based on smart TV, you simply add .scrollX class to .content for overflow scroll horizontally and keep the focus item in the center. add .scale class to #content to create a scale effect.

Here without the .scall class http://tvcast.top/scripts/js-spatial-navigation-master/demo/1-YT-TV.html

I think there's something to do with this, may be a open project for javascript hybride TV Apps, web app, Android & IOS apps, Roku, Apple TV, Smart TV, X-box ect.

acontreras89 commented 6 years ago

I'm not sure I understand what you need, but here are my two cents:

Setting straightOnly = false in your section's config will allow focus to move in oblique directions. You also have a straightOverlapThreshold you can play with. In the examples above, this flag is set to true.

Also, with leaveFor you can specify where the focus goes when leaving a section in some direction.

// Oversimplified!
SN.add('content', { leaveFor: { up: '@search' } });

Lastly, you can add data-sn-* attributes to some of your elements to customize navigation even further.

FENIX285 commented 6 years ago

hello friend excuse my ignorance. I wonder if you could help me ..... I wish that by clicking or pressing enter on the channel send me to the player page thanks