Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place!
I have a structured list like this
XHTML
<ul class = "query-list">
<li class="query"> something </li>
<li class="query"> something </li>
<li class="query"> something </li>
<li class="query"> something </li>
<li class="query"> something </li> //Should this actually be li:last-child?
<a class="fetch-more" href="#">Fetch More</a>
</ul>
The list displays 5 posts initially, then loads another 5 when a.fetch-more is clicked until all posts are loaded. Once all posts are retrieved, a.fetch-more disappears. This is the default DOM rendering.
JAVASCRIPT
Template.bar.onRendered( function() {
$(document).keydown(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 74) { //Keydown J
var listItem = $('ul.query-list > li.query');
var listItemFirst = $('ul.query-list > li.query:first-child');
var selectedChild = $('ul.query-list > li.query.selected-child');
if($('input').is(":focus")|| $('textarea').is(":focus")){
return null; //Prevent activation when input or textarea is focused
} else {
e.preventDefault();
if(! $(listItem).hasClass('selected-child')){
$(listItemFirst).addClass('selected-child'); //Select first child if ul > li has no selected items
} else
if( $(listItemFirst).hasClass('selected-child')) {
$(listItemFirst).removeClass('selected-child');
$('ul.query-list > li.query:last-child').addClass('selected-child'); //If first child is selected, select last child
} else {
selectedChild.removeClass('selected-child');
selectedChild.prev().addClass('selected-child'); // If none of the above applies, select previous li
}
}
}
});
});
The JS performs as intended.
However, there are some issues that I'm facing.
- Upon navigating away and returning, the order of li selection is incorrect. (i.e., selected in the sequence of second, fourth, third, one. Resolved upon refresh)
- If more posts need to be loaded, the last child will not select.
UPDATE 1
Problem 2 has been resolved (Thank you @Fabrizio Calderan). I moved the a.fetch_more outside the ul. Yet, upon navigation back, the selection order is still jumbled.