Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper

dalethedeveloper/gist:5701586

Created June 3, 2013 21:28
Show Gist options
  • Save dalethedeveloper/5701586 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/5701586 to your computer and use it in GitHub Desktop.
Download ZIP
As see on JSFiddle! http://jsfiddle.net/dalesaurus/AZLX5/ A jQuery Plugin to perform sorting tricks on class based collections of items with AND logic for multiple groups.
Raw
gistfile1.html
<!DOCTYPE html>
<head>
<style>
.event_wrap {border: 1px solid #ddd; padding: 10px;margin: 20px}
span.clear-filter {text-decoration:underline;background-color:blue;cursor:pointer;color:white;margin-left:5px}
.current-tax {font-weight:bold}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
(function ($) {
$.fn.sortEmAll = function (options) {
var settings = $.extend({
animationDelay: 400,
baseItemClass: '.event_wrap',
currentlySelectedClass: 'current-tax',
baseFilterAttribute: 'term',
clearHTML: '<span>Clear Selection</span>',
clearClass: 'clear-filter',
noEventsShown: function(e) {
alert('No events!');
}
}, options),
show_these = [],
addFilter = function (itmsel) {
if (show_these.indexOf(itmsel) == -1) show_these.push(itmsel);
},
rmFilter = function (itmsel) {
if (show_these.indexOf(itmsel) !== -1) show_these.splice(show_these.indexOf(itmsel), 1);
},
showFilter = function () {
return $(this).hasClass(show_these.join(','));
},
doFiltering = function () {
if(show_these.length > 0 ) {
var showThese = show_these.join(''),
allThose = $(settings.baseItemClass);
$(allThose).filter(showThese).filter(':hidden').slideDown(settings.animationDelay);
$(allThose).not(showThese).filter(':visible').slideUp(settings.animationDelay)
.promise().done(function() {
if( $(allThose).filter(':visible').length <= 0 )
$(document.body).trigger('sortEmAll.noEventsShown');
});
} else {
$(settings.baseItemClass).slideDown();
}
},
clearFilter = function(e) {
var grp = e.data.groupParent,
clr = $(e.target),
rmTax = clr.prev('.' + settings.currentlySelectedClass),
clrClass = '.' + $(rmTax).data(settings.baseFilterAttribute)
rmFilter(clrClass);
doFiltering();
rmTax.removeClass(settings.currentlySelectedClass);
clr.remove();
return false;
};
$(document.body).on('sortEmAll.noEventsShown',settings.noEventsShown);
return this.each(function () {
var $groupParent = $(this);
$(this).children().on('click', 'a', function () {
if( $(this).hasClass(settings.currentlySelectedClass) )
return false;
var curFilter = $groupParent.find('.' + settings.currentlySelectedClass),
clkClass = '.' + $(this).data(settings.baseFilterAttribute);
if (curFilter.length > 0)
$(curFilter[0]).next('.' + settings.clearClass).trigger('click');
addFilter(clkClass);
doFiltering();
$(this).addClass(settings.currentlySelectedClass);
$(settings.clearHTML)
.addClass(settings.clearClass)
.insertAfter(this)
.one('click',{groupParent:$groupParent},clearFilter);
return false;
});
});
};
}(jQuery));
$('ul.styled_list').sortEmAll();
</script>
</head>
<body>
<ul class="styled_list">
<li><a href="#" data-term="fri-9-13">Friday Sep 13</a></li>
<li><a href="#" data-term="fri-9-6">Friday Sep 6</a></li>
<li><a href="#" data-term="sat-9-7">Saturday Sep 7</a></li>
</ul>
<ul class="styled_list">
<li><a href="#" data-term="country">Country</a></li>
<li><a href="#" data-term="family">Family Show</a></li>
<li><a href="#" data-term="rock">Rock</a></li>
</ul>
<div class="event_wrap family fri-9-13">Family, Friday 9.13</div>
<div class="event_wrap family fri-9-6">Family, Friday 9.6</div>
<div class="event_wrap country sat-9-7">Country, Saturday 9.7</div>
<div class="event_wrap rock fri-9-13">Rock, Friday 9.13</div>
<div class="event_wrap family fri-9-13">Family, Friday 9.13</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment