https://bayalagbuteegch.mn/js/isotope_extras.js

1$.Isotope.prototype._getCenteredMasonryColumns = function() {
2  this.width = this.element.width();
3
4  var parentWidth = this.element.parent().width();
5
6                // i.e. options.masonry && options.masonry.columnWidth
7  var colW = this.options.masonry && this.options.masonry.columnWidth ||
8                // or use the size of the first item
9                this.$filteredAtoms.outerWidth(true) ||
10                // if there's no items, use size of container
11                parentWidth;
12
13  var cols = Math.floor( parentWidth / colW );
14  cols = Math.max( cols, 1 );
15
16  // i.e. this.masonry.cols = ....
17  this.masonry.cols = cols;
18  // i.e. this.masonry.columnWidth = ...
19  this.masonry.columnWidth = colW;
20};
21
22$.Isotope.prototype._masonryReset = function() {
23  // layout-specific props
24  this.masonry = {};
25  // FIXME shouldn't have to call this again
26  this._getCenteredMasonryColumns();
27  var i = this.masonry.cols;
28  this.masonry.colYs = [];
29  while (i--) {
30    this.masonry.colYs.push( 0 );
31  }
32};
33
34$.Isotope.prototype._masonryResizeChanged = function() {
35  var prevColCount = this.masonry.cols;
36  // get updated colCount
37  this._getCenteredMasonryColumns();
38  return ( this.masonry.cols !== prevColCount );
39};
40
41$.Isotope.prototype._masonryGetContainerSize = function() {
42  var unusedCols = 0,
43      i = this.masonry.cols;
44  // count unused columns
45  while ( --i ) {
46    if ( this.masonry.colYs[i] !== 0 ) {
47      break;
48    }
49    unusedCols++;
50  }
51
52  return {
53        height : Math.max.apply( Math, this.masonry.colYs ),
54        // fit container to columns that have been used;
55        width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
56      };
57};
58
59
60$(function(){
61
62  var $container = $('#container');
63
64
65    // add randomish size classes
66    $container.find('.element').each(function(){
67      var $this = $(this),
68          number = parseInt( $this.find('.number').text(), 10 );
69      if ( number % 7 % 2 === 1 ) {
70        $this.addClass('width2');
71      }
72      if ( number % 3 === 0 ) {
73        $this.addClass('height2');
74      }
75    });
76
77  $container.isotope({
78    itemSelector : '.element',
79    masonry : {
80      columnWidth : 120
81    },
82    getSortData : {
83      symbol : function( $elem ) {
84        return $elem.attr('data-symbol');
85      },
86      category : function( $elem ) {
87        return $elem.attr('data-category');
88      },
89      number : function( $elem ) {
90        return parseInt( $elem.find('.number').text(), 10 );
91      },
92      weight : function( $elem ) {
93        return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
94      },
95      name : function ( $elem ) {
96        return $elem.find('.name').text();
97      }
98    }
99  });
100
101
102    var $optionSets = $('#options .option-set'),
103        $optionLinks = $optionSets.find('a');
104
105    $optionLinks.click(function(){
106      var $this = $(this);
107      // don't proceed if already selected
108      if ( $this.hasClass('selected') ) {
109        return false;
110      }
111      var $optionSet = $this.parents('.option-set');
112      $optionSet.find('.selected').removeClass('selected');
113      $this.addClass('selected');
114
115      // make option object dynamically, i.e. { filter: '.my-filter-class' }
116      var options = {},
117          key = $optionSet.attr('data-option-key'),
118          value = $this.attr('data-option-value');
119      // parse 'false' as false boolean
120      value = value === 'false' ? false : value;
121      options[ key ] = value;
122      if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
123        // changes in layout modes need extra logic
124        changeLayoutMode( $this, options )
125      } else {
126        // otherwise, apply new options
127        $container.isotope( options );
128      }
129
130      return false;
131    });
132
133
134
135    $('#insert a').click(function(){
136      var $newEls = $( fakeElement.getGroup() );
137      $container.isotope( 'insert', $newEls );
138
139      return false;
140    });
141
142    $('#append a').click(function(){
143      var $newEls = $( fakeElement.getGroup() );
144      $container.append( $newEls ).isotope( 'appended', $newEls );
145
146      return false;
147    });
148
149
150
151    // change size of clicked element
152    $container.delegate( '.element', 'click', function(){
153      $(this).toggleClass('large');
154      $container.isotope('reLayout');
155    });
156
157    // toggle variable sizes of all elements
158    $('#toggle-sizes').find('a').click(function(){
159      $container
160        .toggleClass('variable-sizes')
161        .isotope('reLayout');
162      return false;

163    });
164
165
166  var $sortBy = $('#sort-by');
167  $('#shuffle a').click(function(){
168    $container.isotope('shuffle');
169    $sortBy.find('.selected').removeClass('selected');
170    $sortBy.find('[data-option-value="random"]').addClass('selected');
171    return false;
172  });
173
174});