Как понять решение с множественным выбором (shift + click) элементов в списке?

Question

[gleendo]

Сидел вот читал учебник, читал читал, вроде как более менее разбирался о чем читаю, и вот дочитался, встала задача сделать выделение пунктов списка: learn.javascript.ru/task/selectable-list

Попробовал решить. Просто выделение одного пункта сделал. Выделение с ctrl/meta сделал. А вот с shift вообще понять не мог. Думал посмотрю в решение. Думал что станет понятно. Но ничего не прояснилось, и теперь даже с решением ничего понять не могу. Голова уже кругом идет. Капец трудно все дается, как бы я ни старался, вообще уже кажется что не мое это.

В общем помогите разобраться в решении. Хочется понять как решено, а то уже бросить все хочется из за непонимания почти всего.

Там в задаче есть решение, но вот на всякий случай функция выбора с шифтом

function selectFromLast(target) {
  var startElem = lastClickedLi || ul.children[0];

  var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;

  if (isLastClickedBefore) {
    for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
      elem.classList.add('selected');
    }
  } else {
    for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
      elem.classList.add('selected');
    }
  }
  elem.classList.add('selected');
}

Comments

[Алексей Уколов]

Вы забыли написать непосредственно свой вопрос. "Помогите разобраться", "хочется понять", "капец трудно" - это не вопросы, это, простите, нытьё. Нытью здесь не место.

[gleendo]

Алексей Уколов: "Помогите разобраться", это просьба, подразумевающая вопрос, а значит я чего то не знаю, поэтому хочу узнать, а значит жду ответа. Формат ответа я не обозначил, жду любой помощи, которая поможет мне разобраться. Это могут быть комментарии к коду, либо ссылка какая нибудь где будет то или иное сообщении/текст, благодаря которому я смогу понять решении выше упомянутой задачи.
В общем что то не нравится, просто пройдите мимо.
И если вы плохо видите или что еще, то сам собственно вопрос(со знаком вопроса (?)) написан в заголовке.
Как понять решение с множественным выбором (shift + click) элементов в списке?

[Алексей Уколов]

Я не могу пройти мимо, потому что я модерирую данный ресурс. Есть два варианта развития событий: вы задаёте конкретный вопрос (в чём у вас затруднения, что непонятно, что вы пробовали, что не получается), на который можно дать конкретный ответ или я удаляю этот вопрос.

[gleendo]

Алексей Уколов: Так я же и задал конкретный вопрос, как понять алгоритм решения части задачи. Привел код решения, дал ссылку на условие задачи, описал что попробовал, описал что получилось. Указал что непонятна часть с выбором с shift. Попросил помощи объяснить приведенное решение. Конкретней я не могу и не знаю как. Я привел код который мне непонятен. И на мой вопрос можно дать конкретный ответ. Например в виде комментариев к коду.
Вполне нормальный вопрос.

[Алексей Уколов]

То есть вам из этих десяти строчек кода непонятна вообще ни одна? И ни в одной из этих строк вы не видите знакомых конструкций? Или у вас всё-таки проблемы с какой-то определённой частью?

[gleendo]

Алексей Уколов: Конкретно по строчкам если, то непонятна вот эта:
var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
Все остальные конструкции мне понятны и я знаком с ними. Суть в том, что, мне непонятен сам алгоритм. Что и зачем написано в этой функции.

[Алексей Уколов]

Ну вот, с этим уже можно работать.

Answer 1

[Алексей Уколов]

function selectFromLast(target) {
  // Определяем элемент, с которого начинается выделение
  // Если до этого кликали на какой-то элемент, берём его
  // Иначе берём первый элемент списка
  var startElem = lastClickedLi || ul.children[0];

  // Определяем, находится стартовый элемент до или после выбранного
  // Для этого применяем битовую операцию И
  // https://learn.javascript.ru/compare-document-position
  var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;

  if (isLastClickedBefore) {
    // Если стартовый элемент расположен перед выбранным, идём от стартового вниз до выбранного
    for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
      elem.classList.add('selected');
    }
  } else {
    // Если стартовый элемент расположен после выбранного, идём от стартового вверх до выбранного
    for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
      elem.classList.add('selected');
    }
  }

  // Наконец, устанавливаем класс выбранному элементу
  elem.classList.add('selected');
}