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