https://grupobotao.com/Plugins/ItemSlider/js/jquery.catslider.js

1;( function( $, window, undefined ) {
2
3	'use strict';
4
5	$.CatSlider = function( options, element ) {
6		this.$el = $( element );
7		this._init( options );
8	};
9
10	$.CatSlider.prototype = {
11
12		_init : function( options ) {
13
14			// the categories (ul)
15			this.$categories = this.$el.children( 'ul' );
16			// the navigation
17			this.$navcategories = this.$el.find( 'nav > a' );
18			var animEndEventNames = {
19				'WebkitAnimation' : 'webkitAnimationEnd',
20				'OAnimation' : 'oAnimationEnd',
21				'msAnimation' : 'MSAnimationEnd',
22				'animation' : 'animationend'
23			};
24			// animation end event name
25			this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
26			// animations and transforms support
27			this.support = Modernizr.csstransforms && Modernizr.cssanimations;
28			// if currently animating
29			this.isAnimating = false;
30			// current category
31			this.current = 0;
32			var $currcat = this.$categories.eq( 0 );
33			if( !this.support ) {
34				this.$categories.hide();
35				$currcat.show();
36			}
37			else {
38				$currcat.addClass( 'mi-current' );
39			}
40			// current nav category
41			this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
42			// initialize the events
43			this._initEvents();
44
45		},
46		_initEvents : function() {
47
48			var self = this;
49			this.$navcategories.on( 'click.catslider', function() {
50				self.showCategory( $( this ).index() );
51				return false;
52			} );
53
54			// reset on window resize..
55			$( window ).on( 'resize', function() {
56				self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
57				self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0 ).addClass( 'mi-selected' );
58				self.current = 0;
59			} );
60
61		},
62		showCategory : function( catidx ) {
63
64			if( catidx === this.current || this.isAnimating ) {
65				return false;
66			}
67			this.isAnimating = true;
68			// update selected navigation
69			this.$navcategories.eq( this.current ).removeClass( 'mi-selected' ).end().eq( catidx ).addClass( 'mi-selected' );
70
71			var dir = catidx > this.current ? 'right' : 'left',
72				toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
73				fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
74				// current category
75				$currcat = this.$categories.eq( this.current ),
76				// new category
77				$newcat = this.$categories.eq( catidx ),
78				$newcatchild = $newcat.children(),
79				lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
80				self = this;
81
82			if( this.support ) {
83
84				$currcat.removeClass().addClass( toClass );
85				
86				setTimeout( function() {
87
88					$newcat.removeClass().addClass( fromClass );
89					$newcatchild.eq( lastEnter ).on( self.animEndEventName, function() {
90
91						$( this ).off( self.animEndEventName );
92						$newcat.addClass( 'mi-current' );
93						self.current = catidx;
94						var $this = $( this );
95						// solve chrome bug
96						self.forceRedraw( $this.get(0) );
97						self.isAnimating = false;
98
99					} );
100
101				}, $newcatchild.length * 90 );
102
103			}
104			else {
105
106				$currcat.hide();
107				$newcat.show();
108				this.current = catidx;
109				this.isAnimating = false;
110
111			}
112
113		},
114		// based on http://stackoverflow.com/a/8840703/989439
115		forceRedraw : function(element) {
116			if (!element) { return; }
117			var n = document.createTextNode(' '),
118				position = element.style.position;
119			element.appendChild(n);
120			element.style.position = 'relative';
121			setTimeout(function(){
122				element.style.position = position;
123				n.parentNode.removeChild(n);
124			}, 25);
125		}
126
127	}
128
129	$.fn.catslider = function( options ) {
130		var instance = $.data( this, 'catslider' );
131		if ( typeof options === 'string' ) {
132			var args = Array.prototype.slice.call( arguments, 1 );
133			this.each(function() {
134				instance[ options ].apply( instance, args );
135			});
136		}
137		else {
138			this.each(function() {
139				instance ? instance._init() : instance = $.data( this, 'catslider', new $.CatSlider( options, this ) );
140			});
141		}
142		return instance;
143	};
144
145} )( jQuery, window );