catalog: self-heal lost cursor (focus a card if none focused on toggle); sync selection on all arrows
This commit is contained in:
1 parent
e18c49cc69
commit
b5fbd9e027
1 file changed
+20
-5
@@ -93,6 +93,12 @@
|
||||
|
||||
// Keep the focused card visible while navigating down/up (native Lampa behaviour).
|
||||
// Also remember the focused card + scroll offset so we can restore it on return.
|
||||
function syncSelection() {
|
||||
var el = document.querySelector('.mymovies .card.selector.focus');
|
||||
var cont = document.querySelector('.mymovies');
|
||||
if (el) comp._selectedId = el.getAttribute('data-id');
|
||||
if (cont) comp._scrollTop = cont.scrollTop;
|
||||
}
|
||||
function scrollFocused() {
|
||||
var cont = document.querySelector('.mymovies');
|
||||
var el = document.querySelector('.mymovies .card.selector.focus');
|
||||
@@ -110,8 +116,9 @@
|
||||
// Our keydown listener only drives scroll on arrow navigation to avoid a
|
||||
// double-back (our call + Lampa's native call) that skips a screen.
|
||||
comp._onKey = function (e) {
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
setTimeout(scrollFocused, 30);
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' ||
|
||||
e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
||||
setTimeout(function () { scrollFocused(); syncSelection(); }, 30);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', comp._onKey, true);
|
||||
@@ -163,7 +170,16 @@
|
||||
var cards = wrap.find('.card.selector');
|
||||
if (!cards.length) return;
|
||||
Lampa.Controller.collectionSet(wrap);
|
||||
if (started) return; // already focused once; keep current position
|
||||
// If no card is currently focused, focus one (restore last, else first).
|
||||
// This self-heals a lost cursor after returning from detail / menu.
|
||||
var focused = wrap.find('.card.selector.focus');
|
||||
if (!focused.length) {
|
||||
started = false;
|
||||
}
|
||||
if (started) {
|
||||
syncSelection();
|
||||
return;
|
||||
}
|
||||
started = true;
|
||||
var target = comp._selectedId
|
||||
? cards.filter('[data-id="' + comp._selectedId + '"]')[0]
|
||||
@@ -172,12 +188,11 @@
|
||||
Lampa.Controller.collectionFocus(target, wrap);
|
||||
if (comp._scrollTop) {
|
||||
var cont = wrap[0];
|
||||
// restore on next frame so layout is ready
|
||||
requestAnimationFrame(function () { cont.scrollTop = comp._scrollTop; });
|
||||
}
|
||||
},
|
||||
left: function () { if (Navigator.canmove('left')) Navigator.move('left'); else Lampa.Controller.toggle('menu'); },
|
||||
right: function () { Navigator.move('right'); },
|
||||
right: function () { Navigator.move('right'); Lampa.Controller.collectionFocus(document.querySelector('.mymovies .card.selector.focus'), $('.mymovies')); },
|
||||
up: function () { Navigator.move('up'); },
|
||||
down: function () { Navigator.move('down'); },
|
||||
back: function () { Lampa.Activity.backward(); }
|
||||
|
||||
Reference in new issue
Block a user