移动规则
按下方向键时,vuEPG 根据元素在屏幕上的位置(getBoundingClientRect())选出下一个焦点。
1. 确定候选范围
候选范围是当前焦点所在 EPGGroup 的第一层子节点(EPGItem 与 EPGGroup),每次导航时从当前 DOM 读取。不包括当前焦点自身和被隐藏的元素;position: fixed 的可见元素也可参与导航。子节点中的 EPGGroup 被当作一个整体参与比较。
当前焦点不属于任何分组时,以整个页面作为一个虚拟分组,候选范围为页面顶层的节点。
2. 按方向筛选
以向下为例(其余方向对称):
- 只保留上边缘低于当前焦点上边缘的候选;
- 将这些候选分为两类:
- 重叠:与当前焦点在水平方向上有重叠(判断时当前焦点两侧各向内收缩 5%);
- 完全越过:与当前焦点在水平方向上没有重叠,并且上边缘低于当前焦点的下边缘;
- 其余候选排除。
3. 选出最近的
- 存在重叠的候选时,在其中选择上边缘最靠上(距离最近)的;
- 否则,在完全越过的候选中选择上边缘最靠上的;
- 距离相同时,选择左边缘与当前焦点左边缘最接近的。
4. 逐层向外
以上两类都没有候选时,以当前焦点所在的 EPGGroup 整体为起点,在上一层分组中重复第 1 ~ 3 步,直到页面顶层。
5. 落点
- 目标是
EPGItem:直接获得焦点; - 目标是
EPGGroup:焦点落在组内带有default标识的节点上,没有时落在第一个节点上;该节点仍是EPGGroup时继续向内进入。 - 目标分组没有子节点时,不移动焦点。
TIP
2.x 的移动规则在此基础上修复了若干问题,并提供了可交互的示意图,见 2.x 移动规则。