/
filterit.js
97 lines (87 loc) · 2.49 KB
/
filterit.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// jQuery Call Area
$(function(){
// Init - filterIt
$("#filterit").filterIt();
});
/*!
* filterIt v0.2
* Copyright (c) 2013 Brandon Miller
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
**/
(function($){
$.fn.filterIt = function(options) {
// Vars
var $container = $(this),
$filterBtn = $(".filter"),
$filterItem = $(".filter-item"),
fItemWidth = $filterItem.eq(0).outerWidth(),
fItemHeight = $filterItem.eq(0).outerHeight();
// Initial Setup
$filterItem.addClass("all active");
function setDimensions(){
$filterItem.each(function(){
var $this = $(this),
setW = $this.width(),
setH = $this.height();
$this.data("width", setW);
$this.data("height", setH);
});
}
setDimensions();
// Transition Support
function getSupportedTransition() {
var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition'.split(' ');
for(var i = 0; i < prefixes.length; i++) {
if(document.createElement('div').style[prefixes[i]] !== undefined) {
return prefixes[i];
}
}
return false;
}
// CSS Tranforms, Transitions
if (getSupportedTransition()) {
$filterBtn.on("click", function(){
if ($(this).hasClass("active")) return;
var $curBtn = $(this),
cat = $curBtn.data("filter"),
$category = $container.find(cat),
$active = $(".filter-item.active");
//$notCategory = $container.find($filterItem).not(cat);
// Button - Active State
$filterBtn.removeClass("active");
$curBtn.addClass("active");
// Animate OUT
$active.removeClass("active").addClass("not-active");
// Add delay to wait for transition to complete (going from active to not)
setTimeout(function(){
$active.css({
"width": "0px",
"height": "0px"
});
// Animate IN
$category.each(function(){
var $this = $(this);
$this.css({
width: $this.data("width") + "px",
height: $this.data("height") + "px"
});
});
$category.addClass("active").removeClass("not-active");
}, 500);
});
}
// jQuery Show/Hide Fallback
if (!getSupportedTransition()) {
$filterBtn.on("click", function(){
var $curBtn = $(this),
cat = $curBtn.data("filter");
$filterBtn.removeClass("active");
$curBtn.addClass("active");
$container.find(cat).css({"display": "block"});
$container.find($filterItem).not(cat).css({"display": "none"});
});
}
}
})(jQuery);