1/** 2 * jquery.gridrotator.js v1.1.0 3 * http://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2012, Codrops 9 * http://www.codrops.com 10 */ 11;( function( $, window, undefined ) { 12 13 'use strict'; 14 15 /* 16 * debouncedresize: special jQuery event that happens once after a window resize 17 * 18 * latest version and complete README available on Github: 19 * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js 20 * 21 * Copyright 2011 @louis_remi 22 * Licensed under the MIT license. 23 */ 24 var $event = $.event, 25 $special, 26 resizeTimeout; 27 28 $special = $event.special.debouncedresize = { 29 setup: function() { 30 $( this ).on( "resize", $special.handler ); 31 }, 32 teardown: function() { 33 $( this ).off( "resize", $special.handler ); 34 }, 35 handler: function( event, execAsap ) { 36 // Save the context 37 var context = this, 38 args = arguments, 39 dispatch = function() { 40 // set correct event type 41 event.type = "debouncedresize"; 42 $event.dispatch.apply( context, args ); 43 }; 44 45 if ( resizeTimeout ) { 46 clearTimeout( resizeTimeout ); 47 } 48 49 execAsap ? 50 dispatch() : 51 resizeTimeout = setTimeout( dispatch, $special.threshold ); 52 }, 53 threshold: 100 54 }; 55 56 // http://www.hardcode.nl/subcategory_1/article_317-array-shuffle-function 57 Array.prototype.shuffle = function() { 58 var i=this.length,p,t; 59 while (i--) { 60 p = Math.floor(Math.random()*i); 61 t = this[i]; 62 this[i]=this[p]; 63 this[p]=t; 64 } 65 return this; 66 }; 67 68 // HTML5 PageVisibility API 69 // http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ 70 // by Joe Marini (@joemarini) 71 function getHiddenProp(){ 72 var prefixes = ['webkit','moz','ms','o']; 73 74 // if 'hidden' is natively supported just return it 75 if ('hidden' in document) return 'hidden'; 76 77 // otherwise loop over all the known prefixes until we find one 78 for (var i = 0; i < prefixes.length; i++){ 79 if ((prefixes[i] + 'Hidden') in document) 80 return prefixes[i] + 'Hidden'; 81 } 82 83 // otherwise it's not supported 84 return null; 85 } 86 function isHidden() { 87 var prop = getHiddenProp(); 88 if (!prop) return false; 89 90 return document[prop]; 91 } 92 93 function isEmpty( obj ) { 94 return Object.keys(obj).length === 0; 95 } 96 97 // global 98 var $window = $( window ), 99 Modernizr = window.Modernizr; 100 101 $.GridRotator = function( options, element ) { 102 103 this.$el = $( element ); 104 if( Modernizr.backgroundsize ) { 105 106 var self = this; 107 this.$el.addClass( 'ri-grid-loading' ); 108 this._init( options ); 109 110 } 111 112 }; 113 114 // the options 115 $.GridRotator.defaults = { 116 // number of rows 117 rows : 4, 118 // number of columns 119 columns : 10, 120 w1024 : { rows : 3, columns : 8 }, 121 w768 : {rows : 3,columns : 7 }, 122 w480 : {rows : 3,columns : 5 }, 123 w320 : {rows : 2,columns : 4 }, 124 w240 : {rows : 2,columns : 3 }, 125 // step: number of items that are replaced at the same time 126 // random || [some number] 127 // note: for performance issues, the number "can't" be > options.maxStep 128 step : 'random', 129 // change it as you wish.. 130 maxStep : 3, 131 // prevent user to click the items 132 preventClick : true, 133 // animation type 134 // showHide || fadeInOut || 135 // slideLeft || slideRight || slideTop || slideBottom || 136 // rotateBottom || rotateLeft || rotateRight || rotateTop || 137 // scale || 138 // rotate3d || 139 // rotateLeftScale || rotateRightScale || rotateTopScale || rotateBottomScale || 140 // random 141 animType : 'random', 142 // animation speed 143 animSpeed : 800, 144 // animation easings 145 animEasingOut : 'linear', 146 animEasingIn: 'linear', 147 // the item(s) will be replaced every 3 seconds 148 // note: for performance issues, the time "can't" be < 300 ms 149 interval : 3000, 150 // if false the animations will not start 151 // use false if onhover is true for example 152 slideshow : true, 153 // if true the items will switch when hovered 154 onhover : false, 155 // ids of elements that shouldn't change 156 nochange : [] 157 }; 158 159 $.GridRotator.prototype = { 160 161 _init : function( options ) { 162 163 // options 164 this.options = $.extend( true, {}, $.GridRotator.defaults, options ); 165 // cache some elements + variables 166 this._config(); 167 168 }, 169 _config : function() { 170 171 var self = this, 172 transEndEventNames = { 173 'WebkitTransition' : 'webkitTransitionEnd', 174 'MozTransition' : 'transitionend', 175 'OTransition' : 'oTransitionEnd', 176 'msTransition' : 'MSTransitionEnd', 177 'transition' : 'transitionend' 178 }; 179 180 // support CSS transitions and 3d transforms 181 this.supportTransitions = Modernizr.csstransitions; 182 this.supportTransforms3D = Modernizr.csstransforms3d; 183 184 this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.gridrotator'; 185 186 // all animation types for the random option 187 this.animTypes = this.supportTransforms3D ? [ 188 'fadeInOut', 189 'slideLeft', 190 'slideRight', 191 'slideTop', 192 'slideBottom', 193 'rotateLeft', 194 'rotateRight', 195 'rotateTop', 196 'rotateBottom', 197 'scale', 198 'rotate3d', 199 'rotateLeftScale', 200 'rotateRightScale', 201 'rotateTopScale', 202 'rotateBottomScale' ] : 203 [ 'fadeInOut', 'slideLeft', 'slideRight', 'slideTop', 'slideBottom' ]; 204 205 this.animType = this.options.animType; 206 207 if( this.animType !== 'random' && !this.supportTransforms3D && $.inArray( this.animType, this.animTypes ) === -1 && this.animType !== 'showHide' ) { 208 209 // fallback to 'fadeInOut' if user sets a type which is not supported 210 this.animType = 'fadeInOut'; 211 212 } 213 214 this.animTypesTotal = this.animTypes.length; 215 216 // the <ul> where the items are placed 217 this.$list = this.$el.children( 'ul' ); 218 // remove images and add background-image to anchors 219 // preload the images before 220 var loaded = 0,
221 $imgs = this.$list.find( 'img' ), 222 count = $imgs.length; 223 224 $imgs.each( function() { 225 226 var $img = $( this ), src = $img.attr( 'src' ); 227 228 $( '<img/>' ).load( function() { 229 230 ++loaded; 231 $img.parent().css( 'background-image', 'url(' + src + ')' ); 232 233 if( loaded === count ) { 234 235 $imgs.remove(); 236 self.$el.removeClass( 'ri-grid-loading' ); 237 // the items 238 self.$items = self.$list.children( 'li' ); 239 // make a copy of the items 240 self.$itemsCache = self.$items.clone(); 241 // total number of items 242 self.itemsTotal = self.$items.length; 243 // the items that will be out of the grid 244 // actually the item's child (anchor element) 245 self.outItems= []; 246 self._layout( function() { 247 self._initEvents(); 248 } ); 249 // replace [options.step] items after [options.interval] time 250 // the items that go out are randomly chosen, while the ones that get in 251 // follow a "First In First Out" logic 252 self._start(); 253 254 } 255 256 } ).attr( 'src', src ) 257 258 } ); 259 260 }, 261 _layout : function( callback ) { 262 263 var self = this; 264 265 // sets the grid dimentions based on the container's width 266 this._setGridDim(); 267 268 // reset 269 this.$list.empty(); 270 this.$items = this.$itemsCache.clone().appendTo( this.$list ); 271 272 var $outItems = this.$items.filter( ':gt(' + ( this.showTotal - 1 ) + ')' ), 273 $outAItems = $outItems.children( 'a' ); 274 275 this.outItems.length = 0; 276 277 $outAItems.each( function( i ) { 278 self.outItems.push( $( this ) ); 279 } ); 280 281 $outItems.remove(); 282 283 // container's width 284 var containerWidth = ( document.defaultView ) ? parseInt( document.defaultView.getComputedStyle( this.$el.get( 0 ), null ).width ) : this.$el.width(), 285 // item's width 286 itemWidth = Math.floor( containerWidth / this.columns ), 287 // calculate gap 288 gapWidth = containerWidth - ( this.columns * Math.floor( itemWidth ) ); 289 290 for( var i = 0; i < this.rows; ++i ) { 291 292 for( var j = 0; j < this.columns; ++j ) { 293 294 var idx = this.columns * i + j, 295 $item = this.$items.eq( idx ); 296 297 $item.css( { 298 width : j < Math.floor( gapWidth ) ? itemWidth + 1 : itemWidth, 299 height : itemWidth 300 } ); 301 302 if( $.inArray( idx, this.options.nochange ) !== -1 ) { 303 $item.addClass( 'ri-nochange' ).data( 'nochange', true ); 304 } 305 306 } 307 308 } 309 310 if( this.options.preventClick ) { 311 312 this.$items.children().css( 'cursor', 'default' ).on( 'click.gridrotator', false ); 313 314 } 315 316 if( callback ) { 317 callback.call(); 318 } 319 320 }, 321 // set the grid rows and columns 322 _setGridDim : function() { 323 324 // container's width 325 var c_w = this.$el.width(); 326 327 // we will choose the number of rows/columns according to the container's width and the values set in the plugin options 328 switch( true ) { 329 case ( c_w < 240 ) : this.rows = this.options.w240.rows; this.columns = this.options.w240.columns; break; 330 case ( c_w < 320 ) : this.rows = this.options.w320.rows; this.columns = this.options.w320.columns; break; 331 case ( c_w < 480 ) : this.rows = this.options.w480.rows; this.columns = this.options.w480.columns; break; 332 case ( c_w < 768 ) : this.rows = this.options.w768.rows; this.columns = this.options.w768.columns; break; 333 case ( c_w < 1024 ) : this.rows = this.options.w1024.rows; this.columns = this.options.w1024.columns; break; 334 default : this.rows = this.options.rows; this.columns = this.options.columns; break; 335 } 336 337 this.showTotal = this.rows * this.columns; 338 339 }, 340 // init window resize event 341 _initEvents : function() { 342 343 var self = this; 344 345 $window.on( 'debouncedresize.gridrotator', function() { 346 self._layout(); 347 } ); 348 349 // use the property name to generate the prefixed event name 350 var visProp = getHiddenProp(); 351 352 // HTML5 PageVisibility API 353 // http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ 354 // by Joe Marini (@joemarini) 355 if (visProp) { 356 357 var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange'; 358 document.addEventListener(evtname, function() { self._visChange(); } ); 359 360 } 361 362 if( !Modernizr.touch && this.options.onhover ) { 363 364 self.$items.on( 'mouseenter.gridrotator', function() { 365 366 var $item = $( this ); 367 if( !$item.data( 'active' ) && !$item.data( 'hovered' ) && !$item.data( 'nochange' ) ) { 368 $item.data( 'hovered', true ); 369 self._replace( $item ); 370 } 371 372 } ).on( 'mouseleave.gridrotator', function() { 373 374 $( this ).data( 'hovered', false ); 375 376 } ); 377 378 } 379 380 }, 381 _visChange : function() { 382 383 isHidden() ? clearTimeout( this.playtimeout ) : this._start(); 384 385 }, 386 // start rotating elements 387 _start : function() { 388 389 if( this.showTotal < this.itemsTotal && this.options.slideshow ) { 390 this._showNext(); 391 } 392 393 }, 394 // get which type of animation 395 _getAnimType : function() { 396 397 return this.animType === 'random' ? this.animTypes[ Math.floor( Math.random() * this.animTypesTotal ) ] : this.animType; 398 399 }, 400 // get css properties for the transition effect 401 _getAnimProperties : function( $out ) { 402 403 var startInProp = {}, startOutProp = {}, endInProp = {}, endOutProp = {},
404 animType = this._getAnimType(), speed, delay = 0; 405 406 switch( animType ) { 407 408 case 'showHide' : 409 410 speed = 0; 411 endOutProp.opacity = 0; 412 break; 413 414 case 'fadeInOut' : 415 416 endOutProp.opacity = 0; 417 break; 418 419 case 'slideLeft' : 420 421 startInProp.left = $out.width(); 422 endInProp.left = 0; 423 endOutProp.left = -$out.width(); 424 break; 425 426 case 'slideRight' : 427 428 startInProp.left = -$out.width(); 429 endInProp.left = 0; 430 endOutProp.left = $out.width(); 431 break; 432 433 case 'slideTop' : 434 435 startInProp.top = $out.height(); 436 endInProp.top = 0; 437 endOutProp.top = -$out.height(); 438 break; 439 440 case 'slideBottom' : 441 442 startInProp.top = -$out.height(); 443 endInProp.top = 0; 444 endOutProp.top = $out.height(); 445 break; 446 447 case 'rotateLeft' : 448 449 speed = this.options.animSpeed / 2; 450 startInProp.transform = 'rotateY(90deg)'; 451 endInProp.transform = 'rotateY(0deg)'; 452 delay = speed; 453 endOutProp.transform = 'rotateY(-90deg)'; 454 break; 455 456 case 'rotateRight' : 457 458 speed = this.options.animSpeed / 2; 459 startInProp.transform = 'rotateY(-90deg)'; 460 endInProp.transform = 'rotateY(0deg)';
461 delay = speed; 462 endOutProp.transform = 'rotateY(90deg)'; 463 break; 464 465 case 'rotateTop' : 466 467 speed = this.options.animSpeed / 2; 468 startInProp.transform= 'rotateX(90deg)'; 469 endInProp.transform = 'rotateX(0deg)'; 470 delay = speed; 471 endOutProp.transform = 'rotateX(-90deg)'; 472 break; 473 474 case 'rotateBottom' : 475 476 speed = this.options.animSpeed / 2; 477 startInProp.transform = 'rotateX(-90deg)'; 478 endInProp.transform = 'rotateX(0deg)'; 479 delay = speed; 480 endOutProp.transform = 'rotateX(90deg)'; 481 break; 482 483 case 'scale' : 484 485 speed = this.options.animSpeed / 2; 486 startInProp.transform = 'scale(0)'; 487 startOutProp.transform = 'scale(1)'; 488 endInProp.transform = 'scale(1)'; 489 delay = speed; 490 endOutProp.transform = 'scale(0)'; 491 break; 492 493 case 'rotateLeftScale' : 494 495 startOutProp.transform = 'scale(1)'; 496 speed = this.options.animSpeed / 2; 497 startInProp.transform = 'scale(0.3) rotateY(90deg)'; 498 endInProp.transform = 'scale(1) rotateY(0deg)';
499 delay = speed; 500 endOutProp.transform = 'scale(0.3) rotateY(-90deg)'; 501 break; 502 503 case 'rotateRightScale' : 504 505 startOutProp.transform = 'scale(1)'; 506 speed = this.options.animSpeed / 2; 507 startInProp.transform = 'scale(0.3) rotateY(-90deg)'; 508 endInProp.transform = 'scale(1) rotateY(0deg)'; 509 delay = speed; 510 endOutProp.transform = 'scale(0.3) rotateY(90deg)'; 511 break; 512 513 case 'rotateTopScale' : 514 515 startOutProp.transform = 'scale(1)'; 516 speed = this.options.animSpeed / 2; 517 startInProp.transform = 'scale(0.3) rotateX(90deg)'; 518 endInProp.transform = 'scale(1) rotateX(0deg)'; 519 delay = speed; 520 endOutProp.transform = 'scale(0.3) rotateX(-90deg)'; 521 break; 522 523 case 'rotateBottomScale' : 524 525 startOutProp.transform = 'scale(1)'; 526 speed = this.options.animSpeed / 2; 527 startInProp.transform = 'scale(0.3) rotateX(-90deg)'; 528 endInProp.transform = 'scale(1) rotateX(0deg)'; 529 delay = speed; 530 endOutProp.transform = 'scale(0.3) rotateX(90deg)'; 531 break; 532 533 case 'rotate3d' : 534 535 speed = this.options.animSpeed / 2; 536 startInProp.transform = 'rotate3d( 1, 1, 0, 90deg )'; 537 endInProp.transform = 'rotate3d( 1, 1, 0, 0deg )';
538 delay = speed; 539 endOutProp.transform = 'rotate3d( 1, 1, 0, -90deg )'; 540 break; 541 542 } 543 544 return { 545 startInProp : startInProp, 546 startOutProp : startOutProp, 547 endInProp : endInProp, 548 endOutProp : endOutProp, 549 delay : delay, 550 animSpeed : speed != undefined ? speed : this.options.animSpeed 551 }; 552 553 }, 554 // show next [option.step] elements 555 _showNext : function( time ) { 556 557 var self = this; 558 559 clearTimeout( this.playtimeout ); 560 561 this.playtimeout = setTimeout( function() { 562 563 var step = self.options.step, max= self.options.maxStep, min = 1; 564 565 if( max > self.showTotal ) { 566 max = self.showTotal; 567 } 568 569 // number of items to swith at this point of time 570 var nmbOut = step === 'random' ? Math.floor( Math.random() * max + min ) : Math.min( Math.abs( step ) , max ) , 571 // array with random indexes. These will be the indexes of the items we will replace 572 randArr = self._getRandom( nmbOut, self.showTotal ); 573 574 for( var i = 0; i < nmbOut; ++i ) { 575 576 // element to go out 577 var $out = self.$items.eq( randArr[ i ] ); 578 579 // if element is active, which means it is currently animating, 580 // then we need to get different positions.. 581 if( $out.data( 'active' ) || $out.data( 'nochange' ) ) { 582 583 // one of the items is active, call again.. 584 self._showNext( 1 ); 585 return false; 586 587 } 588 589 self._replace( $out ); 590 591 } 592 593 // again and again.. 594 self._showNext(); 595 596 }, time || Math.max( Math.abs( this.options.interval ) , 300 ) ); 597 598 }, 599 _replace : function( $out ) { 600 601 $out.data( 'active', true ); 602 603 var self = this, 604 $outA = $out.children( 'a:last' ), 605 newElProp = { 606 width : $outA.width(), 607 height : $outA.height() 608 }; 609 610 // element stays active 611 $out.data( 'active', true ); 612 613 // get the element (anchor) that will go in (first one inserted in this.outItems) 614 var $inA = this.outItems.shift(); 615 616 // save element that went out 617 this.outItems.push( $outA.clone().css( 'transition', 'none' ) ); 618 619 // prepend in element 620 $inA.css( newElProp ).prependTo( $out ); 621 622 var animProp = this._getAnimProperties( $outA ); 623 624 $inA.css( animProp.startInProp ); 625 $outA.css( animProp.startOutProp ); 626 627 this._setTransition( $inA, 'all', animProp.animSpeed, animProp.delay, this.options.animEasingIn ); 628 this._setTransition( $outA, 'all', animProp.animSpeed, 0, this.options.animEasingOut ); 629 630 this._applyTransition( $inA, animProp.endInProp, animProp.animSpeed, function() { 631 632 var $el = $( this ), 633 t = animProp.animSpeed === self.options.animSpeed && isEmpty( animProp.endInProp ) ? animProp.animSpeed : 0; 634 635 setTimeout( function() { 636 637 if( self.supportTransitions ) { 638 $el.off( self.transEndEventName ); 639 } 640 641 $el.next().remove(); 642 $el.parent().data( 'active', false ); 643 644 }, t ); 645 646 }, animProp.animSpeed === 0 || isEmpty( animProp.endInProp ) ); 647 this._applyTransition( $outA, animProp.endOutProp, animProp.animSpeed ); 648 649 }, 650 _getRandom : function( cnt, limit ) { 651 652 var randArray = []; 653 654 for( var i = 0; i < limit; ++i ) { 655 randArray.push( i ) 656 } 657 658 return randArray.shuffle().slice( 0, cnt ); 659 660 }, 661 _setTransition : function( el, prop, speed, delay, easing ) { 662 663 setTimeout( function() { 664 el.css( 'transition', prop + ' ' + speed + 'ms ' + delay + 'ms ' + easing ); 665 }, 25 ); 666 667 }, 668 _applyTransition : function( el, styleCSS, speed, fncomplete, force ) { 669 670 var self = this; 671 setTimeout( function() { 672 $.fn.applyStyle = self.supportTransitions ? $.fn.css : $.fn.animate; 673 674 if( fncomplete && self.supportTransitions ) { 675 676 el.on( self.transEndEventName, fncomplete ); 677 678 if( force ) { 679 fncomplete.call( el ); 680 } 681 682 } 683 684 fncomplete = fncomplete || function() { return false; }; 685 686 el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms', complete : fncomplete } ) ); 687 }, 25 ); 688 689 } 690 691 }; 692 693 var logError = function( message ) { 694 695 if ( window.console ) { 696 697 window.console.error( message ); 698 699 } 700 701 }; 702 703 $.fn.gridrotator = function( options ) { 704 705 var instance = $.data( this, 'gridrotator' ); 706 707 if ( typeof options === 'string' ) { 708 709 var args = Array.prototype.slice.call( arguments, 1 ); 710 711 this.each(function() { 712 713 if ( !instance ) { 714 715 logError( "cannot call methods on gridrotator prior to initialization; " + 716 "attempted to call method '" + options + "'" ); 717 return; 718 719 } 720 721 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 722 723 logError( "no such method '" + options + "' for gridrotator instance" ); 724 return; 725 726 } 727 728 instance[ options ].apply( instance, args ); 729 730 }); 731 732 } 733 else { 734 735 this.each(function() { 736 737 if ( instance ) { 738 739 instance._init(); 740 741 } 742 else { 743 744 instance = $.data( this, 'gridrotator', new $.GridRotator( options, this ) ); 745 746 } 747 748 }); 749 750 } 751 752 return instance; 753 754 }; 755 756} )( jQuery, window );
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.