JQuery Isotope - элементы элемента расширяются при нажатии кнопок - PullRequest
0 голосов
/ 13 марта 2020

Я использую Изотопный фильтр и поиск, а высота элементов слегка увеличивается с каждым нажатием кнопки или поиском. Мне нужно, чтобы они остались одного размера.

Чтобы понять, что я имею в виду, сайт имеет вид https://www.exploreloudoncounty.com/explore/

Я попытался включить свойство max-height в CSS и я не знаю, что еще попробовать.

HTML:

<p><input type="text" class="quicksearch" placeholder="Search" /></p>

<div class="filters">
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="size">
      <button class="btn is-checked" data-filter="">Show All</button>
      <button class="btn" data-filter=".adv">Advertising</button>
      <button class="btn" data-filter=".const">Construction</button>
      <button class="btn" data-filter=".retail">Retail</button>
      <button class="btn" data-filter=".real">Realty</button>
      <button class="btn" data-filter=".pol">Political</button>
    </div>
  </div>

</div>

<div class="grid">
        <div class="element-item lc const"><a href="/explore/lcrr">
            <img src="/explore/lcrr/favicon.png">
            <hr>
            <h3>American Log Cabin Restoration<span class="hidden">lc const house construction</span></h3>
            <p id="hourslog"></p></a>
            <p><a href="tel:+18655672190">(865) 567-2190</a></p>
            <a href="/explore/lcrr"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>

        <div class="element-item lou "><a href="https://www.exploreloudoncounty.com/explore/massagestudiotn">
            <img src="https://www.exploreloudoncounty.com/explore/massagestudiotn/ms.png">
            <hr>
            <h3>The Massage Studio<span class="hidden">key words</span></h3>
            <p id="hoursmassage"></p></a>
            <p><a href="tel:+18657225769">(865) 722-5769</a></p>
            <a href="https://www.exploreloudoncounty.com/explore/massagestudiotn"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>

        <div class="element-item lou retail"><a href="https://www.exploreloudoncounty.com/explore/purdys">
            <img src="https://www.exploreloudoncounty.com/explore/purdys/purdyoem.jpg">
            <hr>
            <h3>Purdy's Powersports<span class="hidden">motorcycle bike atv dirt motocross</span></h3>
            <p id="hourspurdy"></p></a>
            <p><a href="tel:+18654087315">(865) 408-7315</a></p>
            <a href="https://www.exploreloudoncounty.com/explore/purdys"><aside class="busiweblink"><p>VISIT PAGE</p></aside></a>
        </div>
</div>

JQuery:

// store filter for each group
var buttonFilters = {};
var buttonFilter;
// quick search regex
var qsRegex;

Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  // transition objects
  this._transn = {
    ingProperties: {},
    clean: {},
    onEnd: {}
  };
  this.sortData = {};
};

Isotope.prototype.arrange = function( opts ) {
  // set any options pass
  this.option( opts );
  this._getIsInstant();
  // just filter
  this.filteredItems = this._filter( this.items );
  // flag for initalized
  this._isLayoutInited = true;
};

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult && buttonResult;
  },
});

$('.filters').on( 'click', '.btn', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  buttonFilters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  buttonFilter = concatValues( buttonFilters );
  // Isotope arrange
  $grid.isotope();
});

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}) );

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };
}
...