This repository has been archived by the owner on Apr 9, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 130
/
liteaccordion.jquery.js
357 lines (287 loc) · 14.8 KB
/
liteaccordion.jquery.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0a
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
;(function($) {
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash, *not supported in IE7
},
// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),
// 'globals'
slides = elem.children('ol').children('li'),
header = slides.children(':first-child'),
slideLen = slides.length,
slideWidth = settings.containerWidth - slideLen * settings.headerWidth,
// public methods
methods = {
// start elem animation
play : function(index) {
var next = core.nextSlide(index && index);
if (core.playing) return;
// start autoplay
core.playing = setInterval(function() {
header.eq(next()).trigger('click.liteAccordion');
}, settings.cycleSpeed);
},
// stop elem animation
stop : function() {
clearInterval(core.playing);
core.playing = 0;
},
// trigger next slide
next : function() {
methods.stop();
header.eq(core.currentSlide === slideLen - 1 ? 0 : core.currentSlide + 1).trigger('click.liteAccordion');
},
// trigger previous slide
prev : function() {
methods.stop();
header.eq(core.currentSlide - 1).trigger('click.liteAccordion');
},
// destroy plugin instance
destroy : function() {
// stop autoplay
methods.stop();
// remove hashchange event bound to window
$(window).unbind('.liteAccordion');
// remove generated styles, classes, data, events
elem
.attr('style', '')
.removeClass('accordion basic dark light stitch')
.removeData('liteAccordion')
.unbind('.liteAccordion')
.find('li > :first-child')
.unbind('.liteAccordion')
.filter('.selected')
.removeClass('selected')
.end()
.find('b')
.remove();
slides
.removeClass('slide')
.children()
.attr('style', '');
},
// poke around the internals (NOT CHAINABLE)
debug : function() {
return {
elem : elem,
defaults : defaults,
settings : settings,
methods : methods,
core : core
};
}
},
// core utility and animation methods
core = {
// set style properties
setStyles : function() {
// set container heights, widths, theme & corner style
elem
.width(settings.containerWidth)
.height(settings.containerHeight)
.addClass('accordion')
.addClass(settings.rounded && 'rounded')
.addClass(settings.theme);
// set tab width, height and selected class
slides
.addClass('slide')
.children(':first-child')
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1)
.addClass('selected');
// set initial positions for each slide
header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth,
margin = header.first().next(),
offset = parseInt(margin.css('marginLeft'), 10) || parseInt(margin.css('marginRight'), 10);
if (index >= settings.firstSlide) left += slideWidth;
$this
.css('left', left)
.next()
.width(slideWidth - offset)
.css({ left : left, paddingLeft : settings.headerWidth });
// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
});
},
// bind click and mouseover events
bindEvents : function() {
if (settings.activateOn === 'click') {
header.bind('click.liteAccordion', core.triggerSlide);
} else if (settings.activateOn === 'mouseover') {
header.bind({
'mouseover.liteAccordion' : core.triggerSlide,
'click.liteAccordion' : core.triggerSlide
});
}
// pause on hover (can't use custom events with $.hover())
if (settings.pauseOnHover && settings.autoPlay) {
elem.bind('mouseover.liteAccordion', function() {
core.playing && methods.stop();
}).bind('mouseout.liteAccordion', function() {
!core.playing && methods.play(core.currentSlide);
});
}
},
linkable : function() {
var cacheSlideNames = (function() {
var slideNames = [];
slides.each(function() {
slideNames.push(($(this).attr('name')).toLowerCase());
});
// memoize
return cacheSlideNames = slideNames;
})();
var triggerHash = function(e) {
var index;
if (e.type === 'load' && !window.location.hash) return;
if (e.type === 'hashchange' && core.playing) return;
index = $.inArray((window.location.hash.slice(1)).toLowerCase(), cacheSlideNames);
if (index > -1 && index < cacheSlideNames.length) header.eq(index).trigger('click.liteAccordion');
};
$(window).bind({
'hashchange.liteAccordion' : triggerHash,
'load.liteAccordion' : triggerHash
});
},
// counter for autoPlay (zero index firstSlide on init)
currentSlide : settings.firstSlide - 1,
// next slide index
nextSlide : function(index) {
var next = index + 1 || core.currentSlide + 1;
// closure
return function() {
return next++ % slideLen;
};
},
// holds interval counter
playing : 0,
// animates left and right groups of slides
// side: denotes left side
animSlideGroup : function(index, next, side) {
var filterExpr = side ? ':lt(' + (index + 1) + ')' : ':gt(' + index + ')';
slides
.filter(filterExpr)
.each(function() {
var $this = $(this),
slideIndex = slides.index($this);
$this
.children()
.stop(true)
.animate({
left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth
},
settings.slideSpeed,
settings.easing,
function() {
// flag ensures that fn is only called one time per triggerSlide
if (!core.slideAnimCompleteFlag) {
settings.onSlideAnimComplete.call(next);
core.slideAnimCompleteFlag = true;
}
});
});
},
slideAnimCompleteFlag : false,
// trigger slide animation
triggerSlide : function(e) {
var $this = $(this),
index = header.index($this),
next = $this.next();
// update core.currentSlide
core.currentSlide = index;
// reset onSlideAnimComplete callback flag
core.slideAnimCompleteFlag = false;
// remove, then add selected class
header.removeClass('selected').filter($this).addClass('selected');
// reset current slide index in core.nextSlide closure
if (e.originalEvent && settings.autoPlay) {
methods.stop();
methods.play(index);
}
// set location.hash
if (settings.linkable && !core.playing) window.location.hash = $this.parent().attr('name');
// trigger callback in context of sibling div
settings.onTriggerSlide.call(next);
// animate left & right groups
core.animSlideGroup(index, next, true);
core.animSlideGroup(index, next);
},
ieClass : function() {
var version = ($.browser.version).charAt(0);
if (version === '6') methods.destroy();
elem.addClass('ie ie' + version);
},
init : function() {
// test for ie
if ($.browser.msie) core.ieClass();
// init styles and events
core.setStyles();
core.bindEvents();
// check slide speed is not faster than cycle speed
if (settings.cycleSpeed < settings.slideSpeed) settings.cycleSpeed = settings.slideSpeed;
// init hash links
if (settings.linkable && 'onhashchange' in window) core.linkable();
// init autoplay
settings.autoPlay && methods.play();
}
};
// init plugin
core.init();
// expose methods
return methods;
};
$.fn.liteAccordion = function(method) {
var elem = this,
instance = elem.data('liteAccordion');
// if creating a new instance
if (typeof method === 'object' || !method) {
return elem.each(function() {
var liteAccordion;
// if plugin already instantiated, return
if (instance) return;
// otherwise create a new instance
liteAccordion = new LiteAccordion(elem, method);
elem.data('liteAccordion', liteAccordion);
});
// otherwise, call method on current instance
} else if (typeof method === 'string' && instance[method]) {
// debug method isn't chainable b/c we need the debug object to be returned
if (method === 'debug') {
return instance[method].call(elem);
} else { // the rest of the methods are chainable though
instance[method].call(elem);
return elem;
}
}
};
})(jQuery);