Навигация по массиву клавишами

107

11 сентября 2021, 13:30

Есть такой сильно упрощенный код

var array = [1,2,3,4,5,6,7,8,9,10];
var num = 0;
var html = "";
array.forEach(function(item){
    html += '<div class="card" id="index-' + item + '">' + item + '</div>'
})
document.querySelector(".wrap").innerHTML = html;

document.addEventListener('keydown', function(event) {
    if (event.key == "ArrowRight" && num < array.length - 1) {
        num++;
    } else if(event.key == "ArrowLeft" && num > 0 ){
        num--;
    }

    document.querySelectorAll(".card").forEach(function(item){
        item.classList.remove('active');
    });
    document.querySelector("#index-" + array[num]).classList.add('active');
});

https://jsfiddle.net/xw9znqo5/

На его основе отрендерены элементы, Количество колонок и рядов может быть произвольным. Мне нужно сделать что то типа курсора, нужно добавить активный css класс текущей ячейке (текущему элементу массива). Клавишами лево / право я двигаюсь по масиву в начало и конец массива соответственно. И добавляю класс .active текущей ячейке. Тут все понятно.

Непонятно становится с клавишами вверх / вниз. Если нужно перейти с верхнего ряда на нижний

Answer 1

С помощью этого кода получаем количество элементов в одной строке

let inlineCount = 0;
const updateInlineCount = () => {
  let cards = document.querySelectorAll('.card');
  let currs = 0;
  for (let i = 0; i < cards.length; i++) {
    let e = cards[i].getBoundingClientRect().left;
    if (currs === 0 || e > currs) { 
      currs = e;
    } else {
      inlineCount = i;
      return;
    }
  }
}
// Обновляем первоначальное значение
updateInlineCount();
// Обновляем значение при изменение размера блока
window.addEventListener('resize', updateInlineCount);

После чего добавляем события Up/Down

if(event.key == "ArrowUp" && num > inlineCount - 1){
    num -= inlineCount;
} else if(event.key == "ArrowDown" && num < array.length - inlineCount){
    num += inlineCount;
}

Код полностью: https://jsfiddle.net/u3bd7yrc/