Как объединить группу кнопок с включенным фильтром с несколькими группами / раскрывающимися списками кнопок с фильтром в Isotope - PullRequest
Новая
       24

Как объединить группу кнопок с включенным фильтром с несколькими группами / раскрывающимися списками кнопок с фильтром в Isotope

0 голосов
/ 25 мая 2019

Используя Isotope, я пытаюсь создать галерею, которая объединяет группу кнопок с включенным фильтром и несколько групп / кнопок с исключительными фильтрами.Какой недостающий кусок кода, чтобы заставить это работать?

Я хотел бы объединить…

и включительно ('ИЛИ') фильтр (например, цвет): red, .green) - эффективно позволяя пользователям выбирать категории элементов для включения в их «поиск» - используя группу кнопок или флажки в виде кнопок

… с…

несколько эксклюзивных ('AND') наборов фильтров (например, красный. Квадрат, красный. Заземленный, красный. Квадратный. Большой, красный. Заземленный. Большой, зеленый. Квадратный, зеленый. Заземленный, зеленый.square.large, green.ounded.large) - эффективно позволяя пользователям затем дополнительно фильтровать результаты - используя другие группы кнопок или флажков, а также раскрывающиеся списки.

Я думаю,это в основном то, о чем спрашивает пользователь rostik в нижней части этой страницы на странице изотопного GitHub: https://github.com/metafizzy/isotope/issues/771 К сожалению, на вопрос не было ответа, и проблема была закрыта.

Основано на «Изотопе Дейва ДеСандро» «Флажок - флажки иd выпадающие списки, включающие и исключающие фильтры »(https://codepen.io/desandro/pen/iBkzF), Я попытался создать решение в своем собственном Codepen здесь: https://codepen.io/fvv/pen/JqLxyW

Другая моя попытка состояла в том, чтобы начать с« Изотопной комбинации »ДеСандрофильтры с флажками 2 ”(https://codepen.io/desandro/pen/MebyMR) и попытки превратить некоторые массивы флажков в выпадающие списки: https://codepen.io/fvv/pen/xNWMEE

Но из-за отсутствия у меня навыков JS я не смогполучить любую попытку работы.

Я также предполагаю, что это может привести к некоторым большим запросам фильтра, что означает, что мне, вероятно, нужно будет использовать функцию вместо этого.Вот что было предложено здесь: Изотоп - радиокнопки + комбинированные фильтры

Но, опять же, мне не удалось объединить все по мере необходимости.

Моя первоначальная идея заключалась в том, чтобы просто создать дополнительные наборы переменных $ checkboxes, но потом я довольно быстро понял, что это, вероятно, не сработает, так как кажется, что этот код создает отображение от инклюзивной фильтрации к выпадающим спискам и эксклюзивной фильтрациичтобы флажки - когда мне нужен сценарий, который позволяет эксклюзивные фильтры с использованием раскрывающихся списков.Поэтому я удалил изменения. 

var $selects = $('#form-ui select');
var $checkboxes = $('#form-ui input');

$selects.add( $checkboxes ).change( function() {
  // map input values to an array
  var exclusives = [];
  var inclusives = [];
  // exclusive filters from selects
  $selects.each( function( i, elem ) {
    if ( elem.value ) {
      exclusives.push( elem.value );
    }
  });
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // if checkbox, use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });

  // combine exclusive and inclusive filters

  // first combine exclusives
  exclusives = exclusives.join('');

  var filterValue;
  if ( inclusives.length ) {
    // map inclusives with exclusives for
    filterValue = $.map( inclusives, function( value ) {
      return value + exclusives;
    });
    filterValue = filterValue.join(', ');
  } else {
    filterValue = exclusives;
  }

  $output.text( filterValue );
  $container.isotope({ filter: filterValue })
});
...