diff options
Diffstat (limited to 'js/components/slideshow-fx.js')
-rwxr-xr-x | js/components/slideshow-fx.js | 383 |
1 files changed, 383 insertions, 0 deletions
diff --git a/js/components/slideshow-fx.js b/js/components/slideshow-fx.js new file mode 100755 index 0000000..d180509 --- /dev/null +++ b/js/components/slideshow-fx.js | |||
@@ -0,0 +1,383 @@ | |||
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-slideshow-fx", ["uikit"], function() { | ||
12 | return component || addon(UIkit); | ||
13 | }); | ||
14 | } | ||
15 | |||
16 | })(function(UI) { | ||
17 | |||
18 | "use strict"; | ||
19 | |||
20 | var Animations = UI.slideshow.animations; | ||
21 | |||
22 | UI.$.extend(UI.slideshow.animations, { | ||
23 | 'slice': function(current, next, dir, fromfx) { | ||
24 | |||
25 | if (!current.data('cover')) { | ||
26 | return Animations.fade.apply(this, arguments); | ||
27 | } | ||
28 | |||
29 | var d = UI.$.Deferred(); | ||
30 | |||
31 | var sliceWidth = Math.ceil(this.element.width() / this.options.slices), | ||
32 | bgimage = next.data('cover').css('background-image'), | ||
33 | ghost = UI.$('<li></li>').css({ | ||
34 | top : 0, | ||
35 | left : 0, | ||
36 | width : this.container.width(), | ||
37 | height : this.container.height(), | ||
38 | opacity: 1, | ||
39 | zIndex : 15 | ||
40 | }), | ||
41 | ghostWidth = ghost.width(), | ||
42 | ghostHeight = ghost.height(), | ||
43 | pos = fromfx == 'slice-up' ? ghostHeight:'0', | ||
44 | bar; | ||
45 | |||
46 | for (var i = 0; i < this.options.slices; i++) { | ||
47 | |||
48 | if (fromfx == 'slice-up-down') { | ||
49 | pos = ((i % 2) + 2) % 2==0 ? '0':ghostHeight; | ||
50 | } | ||
51 | |||
52 | var width = (i == this.options.slices-1) ? sliceWidth : sliceWidth, | ||
53 | clipto = ('rect(0px, '+(width*(i+1))+'px, '+ghostHeight+'px, '+(sliceWidth*i)+'px)'), | ||
54 | clipfrom; | ||
55 | |||
56 | //slice-down - default | ||
57 | clipfrom = ('rect(0px, '+(width*(i+1))+'px, 0px, '+(sliceWidth*i)+'px)'); | ||
58 | |||
59 | if (fromfx == 'slice-up' || (fromfx == 'slice-up-down' && ((i % 2) + 2) % 2==0 )) { | ||
60 | clipfrom = ('rect('+ghostHeight+'px, '+(width*(i+1))+'px, '+ghostHeight+'px, '+(sliceWidth*i)+'px)'); | ||
61 | } | ||
62 | |||
63 | bar = UI.$('<div class="uk-cover-background"></div>').css({ | ||
64 | 'position' : 'absolute', | ||
65 | 'top' : 0, | ||
66 | 'left' : 0, | ||
67 | 'width' : ghostWidth, | ||
68 | 'height' : ghostHeight, | ||
69 | 'background-image' : bgimage, | ||
70 | 'clip' : clipfrom, | ||
71 | 'opacity' : 0, | ||
72 | 'transition' : 'all '+this.options.duration+'ms ease-in-out '+(i*60)+'ms', | ||
73 | '-webkit-transition' : 'all '+this.options.duration+'ms ease-in-out '+(i*60)+'ms' | ||
74 | |||
75 | }).data('clip', clipto); | ||
76 | |||
77 | ghost.append(bar); | ||
78 | } | ||
79 | |||
80 | this.container.append(ghost); | ||
81 | |||
82 | ghost.children().last().on(UI.support.transition.end, function() { | ||
83 | |||
84 | setTimeout(ghost.remove.bind(ghost), 0); | ||
85 | |||
86 | d.resolve(); | ||
87 | }); | ||
88 | |||
89 | ghost.width(); | ||
90 | |||
91 | ghost.children().each(function() { | ||
92 | var bar = UI.$(this); | ||
93 | |||
94 | bar.css({ | ||
95 | 'clip': bar.data('clip'), | ||
96 | 'opacity': 1 | ||
97 | }); | ||
98 | }); | ||
99 | |||
100 | return d.promise(); | ||
101 | }, | ||
102 | |||
103 | 'slice-up': function(current, next, dir) { | ||
104 | return Animations.slice.apply(this, [current, next, dir, 'slice-up']); | ||
105 | }, | ||
106 | |||
107 | 'slice-down': function(current, next, dir) { | ||
108 | return Animations.slice.apply(this, [current, next, dir, 'slice-down']); | ||
109 | }, | ||
110 | |||
111 | 'slice-up-down': function(current, next, dir) { | ||
112 | return Animations.slice.apply(this, [current, next, dir, 'slice-up-down']); | ||
113 | }, | ||
114 | |||
115 | 'fold': function(current, next, dir) { | ||
116 | |||
117 | if (!next.data('cover')) { | ||
118 | return Animations.fade.apply(this, arguments); | ||
119 | } | ||
120 | |||
121 | var d = UI.$.Deferred(); | ||
122 | |||
123 | var sliceWidth = Math.ceil(this.element.width() / this.options.slices), | ||
124 | bgimage = next.data('cover').css('background-image'), | ||
125 | ghost = UI.$('<li></li>').css({ | ||
126 | width : next.width(), | ||
127 | height : next.height(), | ||
128 | opacity: 1, | ||
129 | zIndex : 15 | ||
130 | }), | ||
131 | ghostWidth = next.width(), | ||
132 | ghostHeight = next.height(), | ||
133 | bar; | ||
134 | |||
135 | for (var i = 0; i < this.options.slices; i++) { | ||
136 | |||
137 | bar = UI.$('<div class="uk-cover-background"></div>').css({ | ||
138 | 'position' : 'absolute', | ||
139 | 'top' : 0, | ||
140 | 'left' : 0, | ||
141 | 'width' : ghostWidth, | ||
142 | 'height' : ghostHeight, | ||
143 | 'background-image' : bgimage, | ||
144 | 'transform-origin' : (sliceWidth*i)+'px 0 0', | ||
145 | 'clip' : ('rect(0px, '+(sliceWidth*(i+1))+'px, '+ghostHeight+'px, '+(sliceWidth*i)+'px)'), | ||
146 | 'opacity' : 0, | ||
147 | 'transform' : 'scaleX(0.000001)', | ||
148 | 'transition' : 'all '+this.options.duration+'ms ease-in-out '+(100+i*60)+'ms', | ||
149 | '-webkit-transition' : 'all '+this.options.duration+'ms ease-in-out '+(100+i*60)+'ms' | ||
150 | }); | ||
151 | |||
152 | ghost.prepend(bar); | ||
153 | } | ||
154 | |||
155 | this.container.append(ghost); | ||
156 | |||
157 | ghost.width(); | ||
158 | |||
159 | ghost.children().first().on(UI.support.transition.end, function() { | ||
160 | |||
161 | setTimeout(ghost.remove.bind(ghost), 0); | ||
162 | |||
163 | d.resolve(); | ||
164 | }).end().css({ | ||
165 | 'transform': 'scaleX(1)', | ||
166 | 'opacity': 1 | ||
167 | }); | ||
168 | |||
169 | return d.promise(); | ||
170 | }, | ||
171 | |||
172 | 'puzzle': function(current, next, dir) { | ||
173 | |||
174 | if (!next.data('cover')) { | ||
175 | return Animations.fade.apply(this, arguments); | ||
176 | } | ||
177 | |||
178 | var d = UI.$.Deferred(), $this = this; | ||
179 | |||
180 | var boxCols = Math.round(this.options.slices/2), | ||
181 | boxWidth = Math.round(next.width()/boxCols), | ||
182 | boxRows = Math.round(next.height()/boxWidth), | ||
183 | boxHeight = Math.round(next.height()/boxRows)+1, | ||
184 | bgimage = next.data('cover').css('background-image'), | ||
185 | ghost = UI.$('<li></li>').css({ | ||
186 | width : this.container.width(), | ||
187 | height : this.container.height(), | ||
188 | opacity : 1, | ||
189 | zIndex : 15 | ||
190 | }), | ||
191 | ghostWidth = this.container.width(), | ||
192 | ghostHeight = this.container.height(), | ||
193 | box, rect, width; | ||
194 | |||
195 | for (var rows = 0; rows < boxRows; rows++) { | ||
196 | |||
197 | for (var cols = 0; cols < boxCols; cols++) { | ||
198 | |||
199 | width = (cols == boxCols-1) ? (boxWidth + 2) : boxWidth; | ||
200 | |||
201 | rect = [ | ||
202 | (boxHeight * rows) +'px', // top | ||
203 | (width * (cols+1)) +'px', // right | ||
204 | (boxHeight * (rows + 1)) +'px', // bottom | ||
205 | (boxWidth * cols) +'px' // left | ||
206 | ]; | ||
207 | |||
208 | box = UI.$('<div class="uk-cover-background"></div>').css({ | ||
209 | 'position' : 'absolute', | ||
210 | 'top' : 0, | ||
211 | 'left' : 0, | ||
212 | 'opacity' : 0, | ||
213 | 'width' : ghostWidth, | ||
214 | 'height' : ghostHeight, | ||
215 | 'background-image' : bgimage, | ||
216 | 'clip' : ('rect('+rect.join(',')+')'), | ||
217 | '-webkit-transform' : 'translateZ(0)', // fixes webkit opacity flickering bug | ||
218 | 'transform' : 'translateZ(0)' // fixes moz opacity flickering bug | ||
219 | }); | ||
220 | |||
221 | ghost.append(box); | ||
222 | } | ||
223 | } | ||
224 | |||
225 | this.container.append(ghost); | ||
226 | |||
227 | var boxes = shuffle(ghost.children()); | ||
228 | |||
229 | boxes.each(function(i) { | ||
230 | UI.$(this).css({ | ||
231 | 'transition': 'all '+$this.options.duration+'ms ease-in-out '+(50+i*25)+'ms', | ||
232 | '-webkit-transition': 'all '+$this.options.duration+'ms ease-in-out '+(50+i*25)+'ms' | ||
233 | }); | ||
234 | }).last().on(UI.support.transition.end, function() { | ||
235 | |||
236 | setTimeout(ghost.remove.bind(ghost), 0); | ||
237 | |||
238 | d.resolve(); | ||
239 | }); | ||
240 | |||
241 | ghost.width(); | ||
242 | |||
243 | boxes.css({'opacity': 1}); | ||
244 | |||
245 | return d.promise(); | ||
246 | }, | ||
247 | |||
248 | 'boxes': function(current, next, dir, fromfx) { | ||
249 | |||
250 | if (!next.data('cover')) { | ||
251 | return Animations.fade.apply(this, arguments); | ||
252 | } | ||
253 | |||
254 | var d = UI.$.Deferred(); | ||
255 | |||
256 | var boxCols = Math.round(this.options.slices/2), | ||
257 | boxWidth = Math.round(next.width()/boxCols), | ||
258 | boxRows = Math.round(next.height()/boxWidth), | ||
259 | boxHeight = Math.round(next.height()/boxRows)+1, | ||
260 | bgimage = next.data('cover').css('background-image'), | ||
261 | ghost = UI.$('<li></li>').css({ | ||
262 | width : next.width(), | ||
263 | height : next.height(), | ||
264 | opacity : 1, | ||
265 | zIndex : 15 | ||
266 | }), | ||
267 | ghostWidth = next.width(), | ||
268 | ghostHeight = next.height(), | ||
269 | box, rect, width, cols; | ||
270 | |||
271 | for (var rows = 0; rows < boxRows; rows++) { | ||
272 | |||
273 | for (cols = 0; cols < boxCols; cols++) { | ||
274 | |||
275 | width = (cols == boxCols-1) ? (boxWidth + 2) : boxWidth; | ||
276 | |||
277 | rect = [ | ||
278 | (boxHeight * rows) +'px', // top | ||
279 | (width * (cols+1)) +'px', // right | ||
280 | (boxHeight * (rows + 1)) +'px', // bottom | ||
281 | (boxWidth * cols) +'px' // left | ||
282 | ]; | ||
283 | |||
284 | box = UI.$('<div class="uk-cover-background"></div>').css({ | ||
285 | 'position' : 'absolute', | ||
286 | 'top' : 0, | ||
287 | 'left' : 0, | ||
288 | 'opacity' : 1, | ||
289 | 'width' : ghostWidth, | ||
290 | 'height' : ghostHeight, | ||
291 | 'background-image' : bgimage, | ||
292 | 'transform-origin' : rect[3]+' '+rect[0]+' 0', | ||
293 | 'clip' : ('rect('+rect.join(',')+')'), | ||
294 | '-webkit-transform' : 'scale(0.0000000000000001)', | ||
295 | 'transform' : 'scale(0.0000000000000001)' | ||
296 | }); | ||
297 | |||
298 | ghost.append(box); | ||
299 | } | ||
300 | } | ||
301 | |||
302 | this.container.append(ghost); | ||
303 | |||
304 | var rowIndex = 0, colIndex = 0, timeBuff = 0, box2Darr = [[]], boxes = ghost.children(), prevCol; | ||
305 | |||
306 | if (fromfx == 'boxes-reverse') { | ||
307 | boxes = [].reverse.apply(boxes); | ||
308 | } | ||
309 | |||
310 | boxes.each(function() { | ||
311 | |||
312 | box2Darr[rowIndex][colIndex] = UI.$(this); | ||
313 | colIndex++; | ||
314 | |||
315 | if(colIndex == boxCols) { | ||
316 | rowIndex++; | ||
317 | colIndex = 0; | ||
318 | box2Darr[rowIndex] = []; | ||
319 | } | ||
320 | }); | ||
321 | |||
322 | for (cols = 0, prevCol = 0; cols < (boxCols * boxRows); cols++) { | ||
323 | |||
324 | prevCol = cols; | ||
325 | |||
326 | for (var row = 0; row < boxRows; row++) { | ||
327 | |||
328 | if (prevCol >= 0 && prevCol < boxCols) { | ||
329 | |||
330 | box2Darr[row][prevCol].css({ | ||
331 | 'transition': 'all '+this.options.duration+'ms linear '+(50+timeBuff)+'ms', | ||
332 | '-webkit-transition': 'all '+this.options.duration+'ms linear '+(50+timeBuff)+'ms' | ||
333 | }); | ||
334 | } | ||
335 | prevCol--; | ||
336 | } | ||
337 | timeBuff += 100; | ||
338 | } | ||
339 | |||
340 | boxes.last().on(UI.support.transition.end, function() { | ||
341 | |||
342 | setTimeout(ghost.remove.bind(ghost), 0); | ||
343 | |||
344 | d.resolve(); | ||
345 | }); | ||
346 | |||
347 | ghost.width(); | ||
348 | |||
349 | boxes.css({ | ||
350 | '-webkit-transform': 'scale(1)', | ||
351 | 'transform': 'scale(1)' | ||
352 | }); | ||
353 | |||
354 | return d.promise(); | ||
355 | }, | ||
356 | |||
357 | 'boxes-reverse': function(current, next, dir) { | ||
358 | return Animations.boxes.apply(this, [current, next, dir, 'boxes-reverse']); | ||
359 | }, | ||
360 | |||
361 | 'random-fx': function(){ | ||
362 | |||
363 | var animations = ['slice-up', 'fold', 'puzzle', 'slice-down', 'boxes', 'slice-up-down', 'boxes-reverse']; | ||
364 | |||
365 | this.fxIndex = (this.fxIndex === undefined ? -1 : this.fxIndex) + 1; | ||
366 | |||
367 | if (!animations[this.fxIndex]) this.fxIndex = 0; | ||
368 | |||
369 | return Animations[animations[this.fxIndex]].apply(this, arguments); | ||
370 | } | ||
371 | }); | ||
372 | |||
373 | |||
374 | // helper functions | ||
375 | |||
376 | // Shuffle an array | ||
377 | var shuffle = function(arr) { | ||
378 | for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x) {} | ||
379 | return arr; | ||
380 | }; | ||
381 | |||
382 | return UI.slideshow.animations; | ||
383 | }); | ||