Advertisement
brookedot

Sorting Dynamic Data with Isotope.js

Apr 15th, 2013
322
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var $container = $('.sort-container');
  2.     createSortFunction = function(slug) {
  3.         return function($elem) {
  4.             var is_slug = $elem.hasClass(slug) ? ' ' : '';
  5.                  return (!is_slug?' ':'');
  6.           };
  7.     },
  8.     getSortData = function(data) {
  9.         var sortMethods = {};
  10.  
  11.         for (var index in data) {
  12.             var slug = data[index].slug;
  13.             sortMethods[slug] = createSortFunction(slug);
  14.         }
  15.  
  16.         return sortMethods;
  17.     }
  18.  
  19. $.getJSON('member-cat-json.php', function (data) {
  20.  
  21. $container.isotope({
  22.         itemSelector: '.member-item',
  23.         layoutMode: 'straightDown',
  24.         sortAscending: true,
  25.         getSortData: getSortData(data)
  26.     });
  27. });
  28.         var $optionSets = $('.option-set'),
  29.                 $optionLinks = $optionSets.find('a');
  30.                
  31.                       $optionLinks.click(function(){
  32.                         var $this = $(this);
  33.                         // don't proceed if already selected
  34.                         if ( $this.hasClass('selected') ) {
  35.                           return false;
  36.                         }
  37.                         var $optionSet = $this.parents('.option-set');
  38.                         $optionSet.find('.selected').removeClass('selected');
  39.                         $this.addClass('selected');
  40.                  
  41.                         // make option object dynamically, i.e. { filter: '.my-filter-class' }
  42.                         var options = {},
  43.                             key = $optionSet.attr('data-option-key'),
  44.                             value = $this.attr('data-option-value');
  45.                         // parse 'false' as false boolean
  46.                         value = value === 'false' ? false : value;
  47.                         options[ key ] = value;
  48.                           // otherwise, apply new options
  49.                           $container.isotope( options );
  50.                        
  51.                         return false;
  52.                 });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement