Изотоп ванили - с пользовательскими селекторами и атрибутами данных - PullRequest
Новая
       13

Изотоп ванили - с пользовательскими селекторами и атрибутами данных

1 голос
/ 04 февраля 2020

Я пытаюсь создать изотопную демонстрацию - с функциями vanilla js - я хочу создать собственные селекторы.

https://jsfiddle.net/s1eympb0/12/

enter image description here

будет ли сортировка элементов в той сортировке, которую я хочу? С точки зрения фильтрации - для этого потребуется пользовательский селектор 

// bind filter button click
$('.filters-button-group').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');

  iso.arrange({
   // item element provided as argument
   filter: function( itemElem ) {
     var number = itemElem.querySelector('.number').innerText;
     return parseInt( number, 10 ) > 50;
   }
  });
});


// bind sort button click
$('.sort-by-button-group').on('click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');

  iso.shuffle();

  //elements - new sorted list?
  //iso.updateSortData( elements ) 
});

, поэтому для фильтров используется пользовательский селектор jquery? 

jQuery.extend(jQuery.expr[':'], {
  inview: function(el) {
    var $e = $(el),
      $w = $(window),
      top = $e.offset().top,
      height = $e.outerHeight(true),
      windowTop = $w.scrollTop(),
      windowScroll = windowTop - height,
      windowHeight = windowTop + height + $w.height();
    return (top > windowScroll && top < windowHeight);
  }
});

и так 

var newElements = $(".grid-items").is(":inview")
...