A javascript spatial navigation library
Installation
npm install focusmove --save
Build
npm run build
### Simply usage:
make the focusable element have a tabindex attribute
Normaly usage
var config=priority: PriorityLEFT | PriorityTOP Priority default processing allMultiple values can be connected by '|' eg PriorityLEFT | PriorityTOP when it have PriorityCONTAIN the other four properties is invalid distmode: FocusMoveDistModeCENTER // Distance calculation method,center or edge.default is FocusMove.DistMode.EDGE. selector: "a" // selector who can used by document.querySelectorAll. default is "[tabindex]" scope: document // lock the scope in this htmlelement. floatframe: document//A float div covered on the focus element if necessary.enableaction: true // if dircetion attribute id is not found then eval dirction string and focus attribute as script. FocusMove;
FocusMove; // Initialization to get focus object. setSelector() and ready() will call this function,you don't have to call it manually.This function will be set the first element to be focused.
FocusMove{} // will call after focus changed.
{ ;} FocusMove // Additional keysevent. FocusMove // remove keyevent which added by addEvent().
FocusMove // change focus manual FocusMove // change scope FocusMove // change focus item selector FocusMove//skip once action FocusMovepause = true; //pause focus move
Declarative usage
this is hight priority then the autofocus way.
goto worldgoto world
- if current focus target has "fm-left fm-right fm-up fm-down" property,it will force set to target focus.
- if direction property value is '-1' ,the target direction will be stop move any way.
- if direction is empty,it will be auto move.
- if fm-[direction/click] is not empty then the engine will first find target element which id is the same as this attribute.if not found then try to execute attribute string as javascript and 'this' is current element。
FocusScopeManage
hash usage:
FocusMoveManage; //add new scope to manager FocusMoveManage; //add new scope to manager FocusMoveManage; //change scope FocusMoveManage; //remove scope from manager
stack usage:
FocusMoveManage; //push current scope to stack. FocusMoveManage; //remove current scope and revert last scope from stack. FocusMoveManageclear; //clear all stack and scope list.