summaryrefslogtreecommitdiff
path: root/js/components/slideset.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/slideset.js')
-rwxr-xr-xjs/components/slideset.js514
1 files changed, 0 insertions, 514 deletions
diff --git a/js/components/slideset.js b/js/components/slideset.js
deleted file mode 100755
index b9a39b0..0000000
--- a/js/components/slideset.js
+++ /dev/null
@@ -1,514 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3
4 var component;
5
6 if (window.UIkit) {
7 component = addon(UIkit);
8 }
9
10 if (typeof define == "function" && define.amd) {
11 define("uikit-slideset", ["uikit"], function(){
12 return component || addon(UIkit);
13 });
14 }
15
16})(function(UI){
17
18 "use strict";
19
20 var Animations;
21
22 UI.component('slideset', {
23
24 defaults: {
25 default : 1,
26 animation : 'fade',
27 duration : 200,
28 filter : '',
29 delay : false,
30 controls : false,
31 autoplay : false,
32 autoplayInterval : 7000,
33 pauseOnHover : true
34 },
35
36 sets: [],
37
38 boot: function() {
39
40 // auto init
41 UI.ready(function(context) {
42
43 UI.$("[data-uk-slideset]", context).each(function(){
44
45 var ele = UI.$(this);
46
47 if(!ele.data("slideset")) {
48 UI.slideset(ele, UI.Utils.options(ele.attr("data-uk-slideset")));
49 }
50 });
51 });
52 },
53
54 init: function() {
55
56 var $this = this;
57
58 this.activeSet = false;
59 this.list = this.element.find('.uk-slideset');
60 this.nav = this.element.find('.uk-slideset-nav');
61 this.controls = this.options.controls ? UI.$(this.options.controls) : this.element;
62
63 UI.$win.on("resize load", UI.Utils.debounce(function() {
64 $this.updateSets();
65 }, 100));
66
67 $this.list.addClass('uk-grid-width-1-'+$this.options.default);
68
69 ['xlarge', 'large', 'medium', 'small'].forEach(function(bp) {
70
71 if (!$this.options[bp]) {
72 return;
73 }
74
75 $this.list.addClass('uk-grid-width-'+bp+'-1-'+$this.options[bp]);
76 });
77
78 this.on("click.uk.slideset", '[data-uk-slideset-item]', function(e) {
79
80 e.preventDefault();
81
82 if ($this.animating) {
83 return;
84 }
85
86 var set = UI.$(this).attr('data-uk-slideset-item');
87
88 if ($this.activeSet === set) return;
89
90 switch(set) {
91 case 'next':
92 case 'previous':
93 $this[set=='next' ? 'next':'previous']();
94 break;
95 default:
96 $this.show(parseInt(set, 10));
97 }
98
99 });
100
101 this.controls.on('click.uk.slideset', '[data-uk-filter]', function(e) {
102
103 var ele = UI.$(this);
104
105 if (ele.parent().hasClass('uk-slideset')) {
106 return;
107 }
108
109 e.preventDefault();
110
111 if ($this.animating || $this.currentFilter == ele.attr('data-uk-filter')) {
112 return;
113 }
114
115 $this.updateFilter(ele.attr('data-uk-filter'));
116
117 $this._hide().then(function(){
118
119 $this.updateSets(true, true);
120 });
121 });
122
123 this.on('swipeRight swipeLeft', function(e) {
124 $this[e.type=='swipeLeft' ? 'next' : 'previous']();
125 });
126
127 this.updateFilter(this.options.filter);
128 this.updateSets();
129
130 this.element.on({
131 mouseenter: function() { if ($this.options.pauseOnHover) $this.hovering = true; },
132 mouseleave: function() { $this.hovering = false; }
133 });
134
135 // Set autoplay
136 if (this.options.autoplay) {
137 this.start();
138 }
139 },
140
141 updateSets: function(animate, force) {
142
143 var visible = this.visible, i;
144
145 this.visible = this.getVisibleOnCurrenBreakpoint();
146
147 if (visible == this.visible && !force) {
148 return;
149 }
150
151 this.children = this.list.children().hide();
152 this.items = this.getItems();
153 this.sets = array_chunk(this.items, this.visible);
154
155 for (i=0;i<this.sets.length;i++) {
156 this.sets[i].css({'display': 'none'});
157 }
158
159 // update nav
160 if (this.nav.length && this.nav.empty()) {
161
162 for (i=0;i<this.sets.length;i++) {
163 this.nav.append('<li data-uk-slideset-item="'+i+'"><a></a></li>');
164 }
165
166 this.nav[this.nav.children().length==1 ? 'addClass':'removeClass']('uk-invisible');
167 }
168
169 this.activeSet = false;
170 this.show(0, !animate);
171 },
172
173 updateFilter: function(currentfilter) {
174
175 var $this = this, filter;
176
177 this.currentFilter = currentfilter;
178
179 this.controls.find('[data-uk-filter]').each(function(){
180
181 filter = UI.$(this);
182
183 if (!filter.parent().hasClass('uk-slideset')) {
184
185 if (filter.attr('data-uk-filter') == $this.currentFilter) {
186 filter.addClass('uk-active');
187 } else {
188 filter.removeClass('uk-active');
189 }
190 }
191 });
192 },
193
194 getVisibleOnCurrenBreakpoint: function() {
195
196 var breakpoint = null,
197 tmp = UI.$('<div style="position:absolute;height:1px;top:-1000px;width:100px"><div></div></div>').appendTo('body'),
198 testdiv = tmp.children().eq(0),
199 breakpoints = this.options;
200
201 ['xlarge', 'large', 'medium', 'small'].forEach(function(bp) {
202
203 if (!breakpoints[bp] || breakpoint) {
204 return;
205 }
206
207 tmp.attr('class', 'uk-grid-width-'+bp+'-1-2').width();
208
209 if (testdiv.width() == 50) {
210 breakpoint = bp;
211 }
212 });
213
214 tmp.remove();
215
216 return this.options[breakpoint] || this.options['default'];
217 },
218
219 getItems: function() {
220
221 var items = [], filter;
222
223 if (this.currentFilter) {
224
225 filter = this.currentFilter || [];
226
227 if (typeof(filter) === 'string') {
228 filter = filter.split(/,/).map(function(item){ return item.trim(); });
229 }
230
231 this.children.each(function(index){
232
233 var ele = UI.$(this), f = ele.attr('data-uk-filter'), infilter = filter.length ? false : true;
234
235 if (f) {
236
237 f = f.split(/,/).map(function(item){ return item.trim(); });
238
239 filter.forEach(function(item){
240 if (f.indexOf(item) > -1) infilter = true;
241 });
242 }
243
244 if(infilter) items.push(ele[0]);
245 });
246
247 items = UI.$(items);
248
249 } else {
250 items = this.list.children();
251 }
252
253 return items;
254 },
255
256 show: function(setIndex, noanimate, dir) {
257
258 var $this = this;
259
260 if (this.activeSet === setIndex || this.animating) {
261 return;
262 }
263
264 dir = dir || (setIndex < this.activeSet ? -1:1);
265
266 var current = this.sets[this.activeSet] || [],
267 next = this.sets[setIndex],
268 animation = this._getAnimation();
269
270 if (noanimate || !UI.support.animation) {
271 animation = Animations.none;
272 }
273
274 this.animating = true;
275
276 if (this.nav.length) {
277 this.nav.children().removeClass('uk-active').eq(setIndex).addClass('uk-active');
278 }
279
280 animation.apply($this, [current, next, dir]).then(function(){
281
282 UI.Utils.checkDisplay(next, true);
283
284 $this.children.hide().removeClass('uk-active');
285 next.addClass('uk-active').css({'display': '', 'opacity':''});
286
287 $this.animating = false;
288 $this.activeSet = setIndex;
289
290 UI.Utils.checkDisplay(next, true);
291
292 $this.trigger('show.uk.slideset', [next]);
293 });
294
295 },
296
297 _getAnimation: function() {
298
299 var animation = Animations[this.options.animation] || Animations.none;
300
301 if (!UI.support.animation) {
302 animation = Animations.none;
303 }
304
305 return animation;
306 },
307
308 _hide: function() {
309
310 var $this = this,
311 current = this.sets[this.activeSet] || [],
312 animation = this._getAnimation();
313
314 this.animating = true;
315
316 return animation.apply($this, [current, [], 1]).then(function(){
317 $this.animating = false;
318 });
319 },
320
321 next: function() {
322 this.show(this.sets[this.activeSet + 1] ? (this.activeSet + 1) : 0, false, 1);
323 },
324
325 previous: function() {
326 this.show(this.sets[this.activeSet - 1] ? (this.activeSet - 1) : (this.sets.length - 1), false, -1);
327 },
328
329 start: function() {
330
331 this.stop();
332
333 var $this = this;
334
335 this.interval = setInterval(function() {
336 if (!$this.hovering && !$this.animating) $this.next();
337 }, this.options.autoplayInterval);
338
339 },
340
341 stop: function() {
342 if (this.interval) clearInterval(this.interval);
343 }
344 });
345
346 Animations = {
347
348 'none': function() {
349 var d = UI.$.Deferred();
350 d.resolve();
351 return d.promise();
352 },
353
354 'fade': function(current, next) {
355 return coreAnimation.apply(this, ['uk-animation-fade', current, next]);
356 },
357
358 'slide-bottom': function(current, next) {
359 return coreAnimation.apply(this, ['uk-animation-slide-bottom', current, next]);
360 },
361
362 'slide-top': function(current, next) {
363 return coreAnimation.apply(this, ['uk-animation-slide-top', current, next]);
364 },
365
366 'slide-vertical': function(current, next, dir) {
367
368 var anim = ['uk-animation-slide-top', 'uk-animation-slide-bottom'];
369
370 if (dir == -1) {
371 anim.reverse();
372 }
373
374 return coreAnimation.apply(this, [anim, current, next]);
375 },
376
377 'slide-horizontal': function(current, next, dir) {
378
379 var anim = ['uk-animation-slide-right', 'uk-animation-slide-left'];
380
381 if (dir == -1) {
382 anim.reverse();
383 }
384
385 return coreAnimation.apply(this, [anim, current, next, dir]);
386 },
387
388 'scale': function(current, next) {
389 return coreAnimation.apply(this, ['uk-animation-scale-up', current, next]);
390 }
391 };
392
393 UI.slideset.animations = Animations;
394
395 // helpers
396
397 function coreAnimation(cls, current, next, dir) {
398
399 var d = UI.$.Deferred(),
400 delay = (this.options.delay === false) ? Math.floor(this.options.duration/2) : this.options.delay,
401 $this = this, clsIn, clsOut, release, i;
402
403 dir = dir || 1;
404
405 this.element.css('min-height', this.element.height());
406
407 if (next[0]===current[0]) {
408 d.resolve();
409 return d.promise();
410 }
411
412 if (typeof(cls) == 'object') {
413 clsIn = cls[0];
414 clsOut = cls[1] || cls[0];
415 } else {
416 clsIn = cls;
417 clsOut = clsIn;
418 }
419
420 release = function() {
421
422 if (current && current.length) {
423 current.hide().removeClass(clsOut+' uk-animation-reverse').css({'opacity':'', 'animation-delay': '', 'animation':''});
424 }
425
426 if (!next.length) {
427 d.resolve();
428 return;
429 }
430
431 for (i=0;i<next.length;i++) {
432 next.eq(dir == 1 ? i:(next.length - i)-1).css('animation-delay', (i*delay)+'ms');
433 }
434
435 var finish = function() {
436 next.removeClass(''+clsIn+'').css({opacity:'', display:'', 'animation-delay':'', 'animation':''});
437 d.resolve();
438 $this.element.css('min-height', '');
439 finish = false;
440 };
441
442 next.addClass(clsIn)[dir==1 ? 'last':'first']().one(UI.support.animation.end, function(){
443 if(finish) finish();
444 }).end().css('display', '');
445
446 // make sure everything resolves really
447 setTimeout(function() {
448 if(finish) finish();
449 }, next.length * delay * 2);
450 };
451
452 if (next.length) {
453 next.css('animation-duration', this.options.duration+'ms');
454 }
455
456 if (current && current.length) {
457
458 current.css('animation-duration', this.options.duration+'ms')[dir==1 ? 'last':'first']().one(UI.support.animation.end, function() {
459 release();
460 });
461
462 for (i=0;i<current.length;i++) {
463
464 (function (index, ele){
465
466 setTimeout(function(){
467
468 ele.css('display', 'none').css('display', '').css('opacity', 0).on(UI.support.animation.end, function(){
469 ele.removeClass(clsOut);
470 }).addClass(clsOut+' uk-animation-reverse');
471
472 }.bind(this), i * delay);
473
474 })(i, current.eq(dir == 1 ? i:(current.length - i)-1));
475 }
476
477 } else {
478 release();
479 }
480
481 return d.promise();
482 }
483
484 function array_chunk(input, size) {
485
486 var x, i = 0, c = -1, l = input.length || 0, n = [];
487
488 if (size < 1) return null;
489
490 while (i < l) {
491
492 x = i % size;
493
494 if(x) {
495 n[c][x] = input[i];
496 } else {
497 n[++c] = [input[i]];
498 }
499
500 i++;
501 }
502
503 i = 0;
504 l = n.length;
505
506 while (i < l) {
507 n[i] = jQuery(n[i]);
508 i++;
509 }
510
511 return n;
512 }
513
514});
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 08:19:57 +0000