summaryrefslogtreecommitdiff
path: root/js/components/slideshow-fx.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/slideshow-fx.js')
-rwxr-xr-xjs/components/slideshow-fx.js383
1 files changed, 0 insertions, 383 deletions
diff --git a/js/components/slideshow-fx.js b/js/components/slideshow-fx.js
deleted file mode 100755
index d180509..0000000
--- a/js/components/slideshow-fx.js
+++ /dev/null
@@ -1,383 +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-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});
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-17 09:45:08 +0000