-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjQuery.danceSwitcher.js
174 lines (174 loc) · 9.17 KB
/
jQuery.danceSwitcher.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
(function($) {
$.fn.extend({
danceSwitcher: function(options) {
var defaults = {
speed: 1,
collapsedWidth: 230,
collapsedHeight: 80,
collapsedMPB: [10, 10, 10, 10],
collapsedLineHeight: '80px',
activeLineHeight: '48px',
animationSequence: 'prev/next'
};
options = $.extend(defaults, options);
return $(this).each(function() {
var $this = $(this),
speed = options.speed,
first = $(this).children('div').eq(0), // the first child of the switcher, so that it is open by default
i;
$this.css('height', ($this.children('div').length - 1) * (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]) + 'px'); // set the height of the switcher to the appropriate value
first.addClass('active'); // make the first box active
for (i = 1; i < $this.children('div').length; i++) { // position all of the boxes appropriately
$this.children('div').eq(i).css('top', (i - 1) * (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]) + 'px');
}
if (options.animationSequence === 'prev/next') { // using the default animation
$this.children('div').click(function() { // bind aclick event to all the boxes
var $$this = $(this);
if (!$$this.hasClass('active') && !$this.hasClass('inprogress')) { // if the box clicked isn't already active and there isn't already animation going on
var next, prev;
$this.addClass('inprogress'); // make sure 2 animations don't happen at once
$this.children('.active').children('.content').animate({ // fade out the content of the active box
opacity: 0
}, 750 / speed);
$this.children('.active').children('h3').animate({ // animate the active header line height
lineHeight: options.collapsedLineHeight
}, 750 / speed);
if ($$this.next(':not(.active)').get(0)) { // if the clicked box isn't last
next = $(this).next();
prev = false;
}
else {
next = $$this.prev();
prev = true;
}
$$this.css({ // convert the height property of the clicked box to the bottom property
bottom: $this.height() - $$this.position().top - (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]),
height: 'auto'
});
$this.children('.active').css('height', $this.children('.active').height()).animate({
top: next.css('top'), // move the active box to the vertical position of its final destination
height: options.collapsedHeight // make its height the height of a collapsed box
}, 750 / speed, function() {
$$this.animate({ // move the clicked box out untill it's the same dimensions as the previously active box
left: 0,
right: (options.collapsedWidth + options.collapsedMPB[1] + options.collapsedMPB[3])
}, 500 / speed, function() {
next.animate({ // move the box next to the previously active box (to the right) to the place where the clicked box used to be
top: $$this.css('top')
}, 750 / speed, function() {
$this.children('.active').animate({ // move the previously active box to where the last animated box just was
left: next.position().left,
right: 0
}, 750 / speed, function() {
$$this.children('h3').animate({ // animate the line height of the clicked box to the height of an active box
lineHeight: options.activeLineHeight
}, 750 / speed);
$$this.children('.content').animate({ // and make its content opaque
opacity: 1
}, 750 / speed);
$$this.animate({ // and give it the dimensions of an active box
top: 0,
bottom: 0
}, 750 / speed, function() {
if (!prev) {
$this.children('.active').insertAfter(next); // if the "next" box was the box underneath the now active box, mave its position in the DOM to where it now is visually on the page
}
else if (prev) {
$this.children('.active').insertBefore(next); // same thing but if it was above the now active box
}
$this.children('.active').removeClass('active'); // remove the active class from the box that is no longer active
$$this.addClass('active'); // and add it to the now active box
$$this.prependTo($$this.parent()); // move the now active box to the top of the switcher DOM tree
$this.removeClass('inprogress'); // and set the switcher to not animating
});
});
});
});
});
}
});
}
else if (options.animationSequence === 'first/last'){
$this.children('div').click(function() {
var $$this = $(this), active = $this.children('.active'), last = !$$this.next().get(0), alreadyCalled = false,
callback = function() {
console.log($this.width() - (options.collapsedWidth + options.collapsedMPB[1] + options.collapsedMPB[3]));
active.css('bottom', 'auto').animate({
right: 0,
left: $this.width() - (options.collapsedWidth + options.collapsedMPB[1] + options.collapsedMPB[3])
}, 750 / speed, function() {
$$this.animate({
top: 0,
bottom: 0
}, 750 / speed).children('h3').animate({
lineHeight: options.activeLineHeight
}, 750 / speed);
$$this.children('.content').animate({
opacity: 1
}, 750 / speed, function() {
if (!last) {
active.appendTo($this).removeClass('active');
}
else {
active.prependTo($this).removeClass('active');
}
$$this.prependTo($this).addClass('active');
$this.removeClass('inprogress');
});
});
};
if (!$$this.hasClass('active') && !$this.hasClass('inprogress')) {
$this.addClass('inprogress');
active.children('h3').animate({
lineHeight: options.collapsedLineHeight
}, 750 / speed);
active.children('.content').animate({
opacity: 0
}, 750 / speed);
active.animate({
top: (!last) ? $this.height() - options.collapsedHeight - options.collapsedMPB[0] - options.collapsedMPB[2] : 0,
bottom: (!last) ? 0 : $this.height() - options.collapsedHeight - options.collapsedMPB[0] - options.collapsedMPB[2]
}, 750 / speed, function() {
active.css({
top: (!last) ? $this.height() - active.height() - options.collapsedMPB[0] - options.collapsedMPB[2] : 0,
height: active.height()
});
$$this.css({
bottom: $this.height() - $$this.position().top - (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2]),
height: 'auto'
});
$$this.animate({
left: 0,
right: (options.collapsedWidth + options.collapsedMPB[1] + options.collapsedMPB[3])
}, 500 / speed, function() {
if (!last) {
$$this.nextAll('div').each(function() {
var $$$this = $(this);
$$$this.animate({
top: $$$this.position().top - (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2])
}, 750 / speed, function() {
if (!alreadyCalled) { callback(); }
alreadyCalled = true;
});
});
}
else {
$$this.prevAll('div:not(.active)').each(function() {
var $$$this = $(this);
$$$this.animate({
top: $$$this.position().top + (options.collapsedHeight + options.collapsedMPB[0] + options.collapsedMPB[2])
}, 750 / speed, function() {
if (!alreadyCalled) { callback(); }
alreadyCalled = true;
});
});
}
});
});
}
});
}
});
}
});
}(jQuery));