Изотопная фильтрация - проблемы при сбросе в исходное положение - PullRequest
Новая
       8

Изотопная фильтрация - проблемы при сбросе в исходное положение

0 голосов
/ 21 мая 2018

Я построил сетку Isotope для отображения проектов, которая также использует фильтрацию Isotope для более быстрой сортировки проектов.

Фильтрация работает нормально, пока вы не попытаетесь вернуть раскрывающиеся списки в их положение по умолчанию "Все услуги »и« Все сектора ».Тогда все проекты скрыты, когда они все должны отображаться.

http://www.ellyon.co.uk/wp/projects/

РЕДАКТИРОВАТЬ: Это возможно конфликт Jquery?Я добавил свой файл functions.php, так как я не уверен на 100%, что правильно добавил сценарии.

functions.php 

function add_isotope() {
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/styles/project.css' );

    wp_enqueue_script('isotope-init');
    wp_enqueue_style('isotope-css');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );

function modify_jquery() {
    if ( !is_admin() ) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, '3.2.1' );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'init', 'modify_jquery' );

Isotope.js 

// Grid
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
  columnWidth: '.grid-sizer',
  packery: {
    gutter: '.gutter-sizer'
  }
});


// state variable
var $expandedItem;

// expand when clicked
$grid.on( 'click', '.grid-item', function( event ) {
  var isExpanded = $expandedItem && event.currentTarget == $expandedItem[0];
  if ( isExpanded ) {
    // exit if already expanded
    return;
  }
  // un-expand previous
  if ( $expandedItem ) {
    $expandedItem.removeClass('gigante');
  }
  // set new & expand
  $expandedItem = $( event.currentTarget ).addClass('gigante');
  $grid.isotope('layout');
});

$grid.on( 'click', '.close-button button', function( event ) {
  $expandedItem.removeClass('gigante');
  // reset variable
  $expandedItem = null;
  $grid.isotope('layout');
  event.stopPropagation();
});

// Select Filters
$(function() {
    var $container = $('.grid'),
        $select = $('div#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.grid-item'
    });
        $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });

});

1 Ответ

0 голосов
/ 22 мая 2018

Звездочка, *, является особым случаем и должна обрабатываться иначе, чем другие значения фильтра, например:

  • , если выбрано одно или несколько значений, не являющихся звездочками, то все звездочки должныигнорироваться
  • , если не выбрано значение, не являющееся звездочкой, по умолчанию используется одна звездочка (показать все).

Для реализации этих правил должен быть ряд способов.Вот один из них: 

// Select Filters
$(function() {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).data('filter-value'); // ... to an array of filter-values
        }).filter(function(val) {
            return val !== '*' // filter out all '*' values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });
    ...
});

Обратите внимание, что объект filters исходного кода только добавляет ненужную сложность.DOM очень хорошо представляет свое собственное состояние, поэтому вместо поддержания постоянного отображения в javascript проще сопоставить оба выбранных элемента напрямую в массив при каждом изменении одного из них.

код немного упростился бы, если бы HTML был построен следующим образом: 

<select class="filter option-set" data-filter-group="services">
    <option value="">All Services</option>
    <option value='.cladding'>Cladding</option>
    ...
</select>
<select class="filter option-set" data-filter-group="sectors">
    <option value="">All Sectors</option>
    <option value='.commerical'>Commerical</option>
    ...
</select>

Тогда необходимость в .filter() звездочках исчезнет, ​​оставив: 

$(function() {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).val(); // ... to an array of values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });
    ...
});
...