2 * Twenty Fourteen Featured Content Slider
4 * Adapted from FlexSlider v2.2.0, copyright 2012 WooThemes
5 * @link http://www.woothemes.com/flexslider/
7 /* global DocumentTouch:true,setImmediate:true,featuredSliderDefaults:true,MSGesture:true */
9 // FeaturedSlider: object instance.
10 $.featuredslider = function( el, options ) {
12 msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
13 touch = ( ( 'ontouchstart' in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch ), // MSFT specific.
14 eventType = 'click touchend MSPointerUp',
16 watchedEventClearTimer,
20 // Make variables public.
21 slider.vars = $.extend( {}, $.featuredslider.defaults, options );
23 namespace = slider.vars.namespace,
25 // Store a reference to the slider object.
26 $.data( el, 'featuredslider', slider );
28 // Private slider methods.
31 slider.animating = false;
32 slider.currentSlide = 0;
33 slider.animatingTo = slider.currentSlide;
34 slider.atEnd = ( slider.currentSlide === 0 || slider.currentSlide === slider.last );
35 slider.containerSelector = slider.vars.selector.substr( 0, slider.vars.selector.search( ' ' ) );
36 slider.slides = $( slider.vars.selector, slider );
37 slider.container = $( slider.containerSelector, slider );
38 slider.count = slider.slides.length;
39 slider.prop = 'marginLeft';
40 slider.isRtl = $( 'body' ).hasClass( 'rtl' );
43 slider.transitions = ( function() {
44 var obj = document.createElement( 'div' ),
45 props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'],
49 if ( obj.style[ props[i] ] !== undefined ) {
50 slider.pfx = props[i].replace( 'Perspective', '' ).toLowerCase();
51 slider.prop = '-' + slider.pfx + '-transform';
58 if ( slider.vars.controlsContainer !== '' ) {
59 slider.controlsContainer = $( slider.vars.controlsContainer ).length > 0 && $( slider.vars.controlsContainer );
65 slider.setup( 'init' );
68 methods.controlNav.setup();
71 methods.directionNav.setup();
74 if ( $( slider.containerSelector ).length === 1 ) {
75 $( document ).bind( 'keyup', function( event ) {
76 var keycode = event.keyCode,
78 if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) {
79 if ( keycode === 39 ) {
80 target = slider.getTarget( 'next' );
81 } else if ( keycode === 37 ) {
82 target = slider.getTarget( 'prev' );
85 slider.featureAnimate( target );
95 $( window ).bind( 'resize orientationchange focus', methods.resize );
97 slider.find( 'img' ).attr( 'draggable', 'false' );
102 methods.controlNav.setupPaging();
104 setupPaging: function() {
105 var type = 'control-paging',
111 slider.controlNavScaffold = $( '<ol class="' + namespace + 'control-nav ' + namespace + type + '"></ol>' );
113 if ( slider.pagingCount > 1 ) {
114 for ( i = 0; i < slider.pagingCount; i++ ) {
115 slide = slider.slides.eq( i );
116 item = '<a>' + j + '</a>';
117 slider.controlNavScaffold.append( '<li>' + item + '</li>' );
123 ( slider.controlsContainer ) ? $( slider.controlsContainer ).append( slider.controlNavScaffold ) : slider.append( slider.controlNavScaffold );
124 methods.controlNav.set();
126 methods.controlNav.active();
128 slider.controlNavScaffold.delegate( 'a, img', eventType, function( event ) {
129 event.preventDefault();
131 if ( watchedEvent === '' || watchedEvent === event.type ) {
132 var $this = $( this ),
133 target = slider.controlNav.index( $this );
135 if ( ! $this.hasClass( namespace + 'active' ) ) {
136 slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
137 slider.featureAnimate( target );
141 // Set up flags to prevent event duplication.
142 if ( watchedEvent === '' ) {
143 watchedEvent = event.type;
146 methods.setToClearWatchedEvent();
151 slider.controlNav = $( '.' + namespace + 'control-nav li ' + selector, ( slider.controlsContainer ) ? slider.controlsContainer : slider );
154 slider.controlNav.removeClass( namespace + 'active' ).eq( slider.animatingTo ).addClass( namespace + 'active' );
156 update: function( action, pos ) {
157 if ( slider.pagingCount > 1 && action === 'add' ) {
158 slider.controlNavScaffold.append( $( '<li><a>' + slider.count + '</a></li>' ) );
159 } else if ( slider.pagingCount === 1 ) {
160 slider.controlNavScaffold.find( 'li' ).remove();
162 slider.controlNav.eq( pos ).closest( 'li' ).remove();
164 methods.controlNav.set();
165 ( slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length ) ? slider.update( pos, action ) : methods.controlNav.active();
171 var directionNavScaffold = $( '<ul class="' + namespace + 'direction-nav"><li><a class="' + namespace + 'prev" href="#">' + slider.vars.prevText + '</a></li><li><a class="' + namespace + 'next" href="#">' + slider.vars.nextText + '</a></li></ul>' );
174 if ( slider.controlsContainer ) {
175 $( slider.controlsContainer ).append( directionNavScaffold );
176 slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider.controlsContainer );
178 slider.append( directionNavScaffold );
179 slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider );
182 methods.directionNav.update();
184 slider.directionNav.bind( eventType, function( event ) {
185 event.preventDefault();
188 if ( watchedEvent === '' || watchedEvent === event.type ) {
189 target = ( $( this ).hasClass( namespace + 'next' ) ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
190 slider.featureAnimate( target );
193 // Set up flags to prevent event duplication.
194 if ( watchedEvent === '' ) {
195 watchedEvent = event.type;
198 methods.setToClearWatchedEvent();
202 var disabledClass = namespace + 'disabled';
203 if ( slider.pagingCount === 1 ) {
204 slider.directionNav.addClass( disabledClass ).attr( 'tabindex', '-1' );
206 slider.directionNav.removeClass( disabledClass ).removeAttr( 'tabindex' );
224 el.addEventListener( 'touchstart', onTouchStart, false );
226 el.style.msTouchAction = 'none';
227 el._gesture = new MSGesture(); // MSFT specific.
228 el._gesture.target = el;
229 el.addEventListener( 'MSPointerDown', onMSPointerDown, false );
231 el.addEventListener( 'MSGestureChange', onMSGestureChange, false );
232 el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false );
235 function onTouchStart( e ) {
236 if ( slider.animating ) {
238 } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
240 startT = Number( new Date() );
242 // Local vars for X and Y points.
243 localX = e.touches[0].pageX;
244 localY = e.touches[0].pageY;
246 offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
247 if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
254 el.addEventListener( 'touchmove', onTouchMove, false );
255 el.addEventListener( 'touchend', onTouchEnd, false );
259 function onTouchMove( e ) {
260 // Local vars for X and Y points.
261 localX = e.touches[0].pageX;
262 localY = e.touches[0].pageY;
264 dx = startX - localX;
265 scrolling = Math.abs( dx ) < Math.abs( localY - startY );
269 if ( slider.transitions ) {
270 slider.setProps( offset + dx, 'setTouch' );
275 function onTouchEnd() {
276 // Finish the touch by undoing the touch session.
277 el.removeEventListener( 'touchmove', onTouchMove, false );
279 if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) {
281 target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
283 slider.featureAnimate( target );
285 el.removeEventListener( 'touchend', onTouchEnd, false );
293 function onMSPointerDown( e ) {
295 if ( slider.animating ) {
298 el._gesture.addPointer( e.pointerId );
301 startT = Number( new Date() );
302 offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
303 if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
309 function onMSGestureChange( e ) {
311 var slider = e.target._slider,
318 transX = -e.translationX,
319 transY = -e.translationY;
321 // Accumulate translations.
322 accDx = accDx + transX;
324 scrolling = Math.abs( accDx ) < Math.abs( -transY );
326 if ( e.detail === e.MSGESTURE_FLAG_INERTIA ) {
327 setImmediate( function () { // MSFT specific.
334 if ( ! scrolling || Number( new Date() ) - startT > 500 ) {
336 if ( slider.transitions ) {
337 slider.setProps( offset + dx, 'setTouch' );
342 function onMSGestureEnd( e ) {
344 var slider = e.target._slider,
351 if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) {
353 target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
355 slider.featureAnimate( target );
367 if ( ! slider.animating && slider.is( ':visible' ) ) {
371 methods.smoothHeight();
372 slider.newSlides.width( slider.computedW );
373 slider.setProps( slider.computedW, 'setTotal' );
377 smoothHeight: function( dur ) {
378 var $obj = slider.viewport;
379 ( dur ) ? $obj.animate( { 'height': slider.slides.eq( slider.animatingTo ).height() }, dur ) : $obj.height( slider.slides.eq( slider.animatingTo ).height() );
382 setToClearWatchedEvent: function() {
383 clearTimeout( watchedEventClearTimer );
384 watchedEventClearTimer = setTimeout( function() {
391 slider.featureAnimate = function( target ) {
392 if ( target !== slider.currentSlide ) {
393 slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
396 if ( ! slider.animating && slider.is( ':visible' ) ) {
397 slider.animating = true;
398 slider.animatingTo = target;
401 methods.controlNav.active();
403 slider.slides.removeClass( namespace + 'active-slide' ).eq( target ).addClass( namespace + 'active-slide' );
405 slider.atEnd = target === 0 || target === slider.last;
408 methods.directionNav.update();
410 var dimension = slider.computedW,
413 if ( slider.currentSlide === 0 && target === slider.count - 1 && slider.direction !== 'next' ) {
415 } else if ( slider.currentSlide === slider.last && target === 0 && slider.direction !== 'prev' ) {
416 slideString = ( slider.count + 1 ) * dimension;
418 slideString = ( target + slider.cloneOffset ) * dimension;
420 slider.setProps( slideString, '', slider.vars.animationSpeed );
421 if ( slider.transitions ) {
422 if ( ! slider.atEnd ) {
423 slider.animating = false;
424 slider.currentSlide = slider.animatingTo;
426 slider.container.unbind( 'webkitTransitionEnd transitionend' );
427 slider.container.bind( 'webkitTransitionEnd transitionend', function() {
428 slider.wrapup( dimension );
431 slider.container.animate( slider.args, slider.vars.animationSpeed, 'swing', function() {
432 slider.wrapup( dimension );
437 methods.smoothHeight( slider.vars.animationSpeed );
441 slider.wrapup = function( dimension ) {
442 if ( slider.currentSlide === 0 && slider.animatingTo === slider.last ) {
443 slider.setProps( dimension, 'jumpEnd' );
444 } else if ( slider.currentSlide === slider.last && slider.animatingTo === 0 ) {
445 slider.setProps( dimension, 'jumpStart' );
447 slider.animating = false;
448 slider.currentSlide = slider.animatingTo;
451 slider.getTarget = function( dir ) {
452 slider.direction = dir;
455 if ( slider.isRtl ) {
456 dir = 'next' === dir ? 'prev' : 'next';
459 if ( dir === 'next' ) {
460 return ( slider.currentSlide === slider.last ) ? 0 : slider.currentSlide + 1;
462 return ( slider.currentSlide === 0 ) ? slider.last : slider.currentSlide - 1;
466 slider.setProps = function( pos, special, dur ) {
467 var target = ( function() {
468 var posCalc = ( function() {
470 case 'setTotal': return ( slider.currentSlide + slider.cloneOffset ) * pos;
471 case 'setTouch': return pos;
472 case 'jumpEnd': return slider.count * pos;
473 case 'jumpStart': return pos;
478 return ( posCalc * -1 ) + 'px';
481 if ( slider.transitions ) {
482 target = 'translate3d(' + target + ',0,0 )';
483 dur = ( dur !== undefined ) ? ( dur / 1000 ) + 's' : '0s';
484 slider.container.css( '-' + slider.pfx + '-transition-duration', dur );
487 slider.args[slider.prop] = target;
488 if ( slider.transitions || dur === undefined ) {
489 slider.container.css( slider.args );
493 slider.setup = function( type ) {
496 if ( type === 'init' ) {
497 slider.viewport = $( '<div class="' + namespace + 'viewport"></div>' ).css( { 'overflow': 'hidden', 'position': 'relative' } ).appendTo( slider ).append( slider.container );
498 slider.cloneCount = 0;
499 slider.cloneOffset = 0;
501 slider.cloneCount = 2;
502 slider.cloneOffset = 1;
503 // Clear out old clones.
504 if ( type !== 'init' ) {
505 slider.container.find( '.clone' ).remove();
508 slider.container.append( slider.slides.first().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) ).prepend( slider.slides.last().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) );
509 slider.newSlides = $( slider.vars.selector, slider );
511 sliderOffset = slider.currentSlide + slider.cloneOffset;
512 slider.container.width( ( slider.count + slider.cloneCount ) * 200 + '%' );
513 slider.setProps( sliderOffset * slider.computedW, 'init' );
514 setTimeout( function() {
516 slider.newSlides.css( { 'width': slider.computedW, 'float': 'left', 'display': 'block' } );
518 methods.smoothHeight();
519 }, ( type === 'init' ) ? 100 : 0 );
521 slider.slides.removeClass( namespace + 'active-slide' ).eq( slider.currentSlide ).addClass( namespace + 'active-slide' );
524 slider.doMath = function() {
525 var slide = slider.slides.first();
527 slider.w = ( slider.viewport===undefined ) ? slider.width() : slider.viewport.width();
528 slider.h = slide.height();
529 slider.boxPadding = slide.outerWidth() - slide.width();
531 slider.itemW = slider.w;
532 slider.pagingCount = slider.count;
533 slider.last = slider.count - 1;
534 slider.computedW = slider.itemW - slider.boxPadding;
537 slider.update = function( pos, action ) {
540 // Update currentSlide and slider.animatingTo if necessary.
541 if ( pos < slider.currentSlide ) {
542 slider.currentSlide += 1;
543 } else if ( pos <= slider.currentSlide && pos !== 0 ) {
544 slider.currentSlide -= 1;
546 slider.animatingTo = slider.currentSlide;
548 // Update controlNav.
549 if ( action === 'add' || slider.pagingCount > slider.controlNav.length ) {
550 methods.controlNav.update( 'add' );
551 } else if ( action === 'remove' || slider.pagingCount < slider.controlNav.length ) {
552 if ( slider.currentSlide > slider.last ) {
553 slider.currentSlide -= 1;
554 slider.animatingTo -= 1;
556 methods.controlNav.update( 'remove', slider.last );
558 // Update directionNav.
559 methods.directionNav.update();
562 // FeaturedSlider: initialize.
567 $.featuredslider.defaults = {
568 namespace: 'slider-', // String: prefix string attached to the class of every element generated by the plugin.
569 selector: '.slides > li', // String: selector, must match a simple pattern.
570 animationSpeed: 600, // Integer: Set the speed of animations, in milliseconds.
571 controlsContainer: '', // jQuery Object/Selector: container navigation to append elements.
574 prevText: featuredSliderDefaults.prevText, // String: Set the text for the "previous" directionNav item.
575 nextText: featuredSliderDefaults.nextText // String: Set the text for the "next" directionNav item.
578 // FeaturedSlider: plugin function.
579 $.fn.featuredslider = function( options ) {
580 if ( options === undefined ) {
584 if ( typeof options === 'object' ) {
585 return this.each( function() {
586 var $this = $( this ),
587 selector = ( options.selector ) ? options.selector : '.slides > li',
588 $slides = $this.find( selector );
590 if ( $slides.length === 1 || $slides.length === 0 ) {
591 $slides.fadeIn( 400 );
592 } else if ( $this.data( 'featuredslider' ) === undefined ) {
593 new $.featuredslider( this, options );