1/* 2 * Twenty Fourteen Featured Content Slider 3 * 4 * Adapted from FlexSlider v2.2.0, copyright 2012 WooThemes 5 * @link http://www.woothemes.com/flexslider/ 6 */ 7/* global DocumentTouch:true,setImmediate:true,featuredSliderDefaults:true,MSGesture:true */ 8( function( $ ) { 9 // FeaturedSlider: object instance. 10 $.featuredslider = function( el, options ) { 11 var slider = $( el ), 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', 15 watchedEvent = '', 16 watchedEventClearTimer, 17 methods = {}, 18 namespace; 19 20 // Make variables public. 21 slider.vars = $.extend( {}, $.featuredslider.defaults, options ); 22 23 namespace = slider.vars.namespace, 24 25 // Store a reference to the slider object. 26 $.data( el, 'featuredslider', slider ); 27 28 // Private slider methods. 29 methods = { 30 init: function() { 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' ); 41 slider.args = {}; 42 // TOUCH 43 slider.transitions = ( function() { 44 var obj = document.createElement( 'div' ), 45 props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'], 46 i; 47 48 for ( i in props ) { 49 if ( obj.style[ props[i] ] !== undefined ) { 50 slider.pfx = props[i].replace( 'Perspective', '' ).toLowerCase(); 51 slider.prop = '-' + slider.pfx + '-transform'; 52 return true; 53 } 54 } 55 return false; 56 }() ); 57 // CONTROLSCONTAINER 58 if ( slider.vars.controlsContainer !== '' ) { 59 slider.controlsContainer = $( slider.vars.controlsContainer ).length > 0 && $( slider.vars.controlsContainer ); 60 } 61 62 slider.doMath(); 63 64 // INIT 65 slider.setup( 'init' ); 66 67 // CONTROLNAV 68 methods.controlNav.setup(); 69 70 // DIRECTIONNAV 71 methods.directionNav.setup(); 72 73 // KEYBOARD 74 if ( $( slider.containerSelector ).length === 1 ) { 75 $( document ).bind( 'keyup', function( event ) { 76 var keycode = event.keyCode, 77 target = false;
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' ); 83 } 84 85 slider.featureAnimate( target ); 86 } 87 } ); 88 } 89 90 // TOUCH 91 if ( touch ) { 92 methods.touch(); 93 } 94 95 $( window ).bind( 'resize orientationchange focus', methods.resize ); 96 97 slider.find( 'img' ).attr( 'draggable', 'false' ); 98 }, 99 100 controlNav: { 101 setup: function() { 102 methods.controlNav.setupPaging(); 103 }, 104 setupPaging: function() { 105 var type = 'control-paging', 106 j = 1, 107 item, 108 slide, 109 i; 110 111 slider.controlNavScaffold = $( '<ol class="' + namespace + 'control-nav ' + namespace + type + '"></ol>' ); 112 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>' ); 118 j++; 119 } 120 } 121 122 // CONTROLSCONTAINER 123 ( slider.controlsContainer ) ? $( slider.controlsContainer ).append( slider.controlNavScaffold ) : slider.append( slider.controlNavScaffold ); 124 methods.controlNav.set(); 125 126 methods.controlNav.active(); 127 128 slider.controlNavScaffold.delegate( 'a, img', eventType, function( event ) { 129 event.preventDefault(); 130 131 if ( watchedEvent === '' || watchedEvent === event.type ) { 132 var $this = $( this ), 133 target = slider.controlNav.index( $this ); 134 135 if ( ! $this.hasClass( namespace + 'active' ) ) { 136 slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev'; 137 slider.featureAnimate( target ); 138 } 139 } 140 141 // Set up flags to prevent event duplication. 142 if ( watchedEvent === '' ) { 143 watchedEvent = event.type; 144 } 145 146 methods.setToClearWatchedEvent(); 147 } ); 148 }, 149 set: function() { 150 var selector = 'a'; 151 slider.controlNav = $( '.' + namespace + 'control-nav li ' + selector, ( slider.controlsContainer ) ? slider.controlsContainer : slider ); 152 }, 153 active: function() { 154 slider.controlNav.removeClass( namespace + 'active' ).eq( slider.animatingTo ).addClass( namespace + 'active' ); 155 }, 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(); 161 } else { 162 slider.controlNav.eq( pos ).closest( 'li' ).remove(); 163 } 164 methods.controlNav.set(); 165 ( slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length ) ? slider.update( pos, action ) : methods.controlNav.active(); 166 } 167 }, 168 169 directionNav: { 170 setup: function() { 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>' ); 172 173 // CONTROLSCONTAINER 174 if ( slider.controlsContainer ) { 175 $( slider.controlsContainer ).append( directionNavScaffold ); 176 slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider.controlsContainer ); 177 } else { 178 slider.append( directionNavScaffold ); 179 slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider ); 180 } 181 182 methods.directionNav.update(); 183 184 slider.directionNav.bind( eventType, function( event ) { 185 event.preventDefault(); 186 var target; 187 188 if ( watchedEvent === '' || watchedEvent === event.type ) { 189 target = ( $( this ).hasClass( namespace + 'next' ) ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); 190 slider.featureAnimate( target ); 191 } 192 193 // Set up flags to prevent event duplication. 194 if ( watchedEvent === '' ) { 195 watchedEvent = event.type; 196 } 197 198 methods.setToClearWatchedEvent(); 199 } ); 200 }, 201 update: function() { 202 var disabledClass = namespace + 'disabled'; 203 if ( slider.pagingCount === 1 ) { 204 slider.directionNav.addClass( disabledClass ).attr( 'tabindex', '-1' ); 205 } else { 206 slider.directionNav.removeClass( disabledClass ).removeAttr( 'tabindex' ); 207 } 208 } 209 }, 210 211 touch: function() { 212 var startX, 213 startY, 214 offset, 215 cwidth, 216 dx, 217 startT, 218 scrolling = false, 219 localX = 0, 220 localY = 0, 221 accDx = 0; 222 223 if ( ! msGesture ) { 224 el.addEventListener( 'touchstart', onTouchStart, false ); 225 } else {
226 el.style.msTouchAction = 'none'; 227 el._gesture = new MSGesture(); // MSFT specific. 228 el._gesture.target = el; 229 el.addEventListener( 'MSPointerDown', onMSPointerDown, false ); 230 el._slider = slider; 231 el.addEventListener( 'MSGestureChange', onMSGestureChange, false ); 232 el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false ); 233 } 234 235 function onTouchStart( e ) { 236 if ( slider.animating ) { 237 e.preventDefault(); 238 } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) { 239 cwidth = slider.w; 240 startT = Number( new Date() ); 241 242 // Local vars for X and Y points. 243 localX = e.touches[0].pageX; 244 localY = e.touches[0].pageY; 245 246 offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth; 247 if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) { 248 offset = 0; 249 } 250 251 startX = localX; 252 startY = localY; 253 254 el.addEventListener( 'touchmove', onTouchMove, false ); 255 el.addEventListener( 'touchend', onTouchEnd, false ); 256 } 257 } 258 259 function onTouchMove( e ) { 260 // Local vars for X and Y points. 261 localX = e.touches[0].pageX; 262 localY = e.touches[0].pageY; 263 264 dx = startX - localX; 265 scrolling = Math.abs( dx ) < Math.abs( localY - startY ); 266 267 if ( ! scrolling ) { 268 e.preventDefault(); 269 if ( slider.transitions ) { 270 slider.setProps( offset + dx, 'setTouch' ); 271 } 272 } 273 } 274 275 function onTouchEnd() { 276 // Finish the touch by undoing the touch session. 277 el.removeEventListener( 'touchmove', onTouchMove, false ); 278 279 if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) { 280 var updateDx = dx, 281 target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); 282 283 slider.featureAnimate( target ); 284 } 285 el.removeEventListener( 'touchend', onTouchEnd, false ); 286 287 startX = null; 288 startY = null; 289 dx = null; 290 offset = null; 291 } 292 293 function onMSPointerDown( e ) { 294 e.stopPropagation(); 295 if ( slider.animating ) { 296 e.preventDefault(); 297 } else { 298 el._gesture.addPointer( e.pointerId ); 299 accDx = 0; 300 cwidth = slider.w; 301 startT = Number( new Date() ); 302 offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth; 303 if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) { 304 offset = 0; 305 } 306 } 307 } 308 309 function onMSGestureChange( e ) { 310 e.stopPropagation(); 311 var slider = e.target._slider, 312 transX, 313 transY; 314 if ( ! slider ) { 315 return; 316 } 317 318 transX = -e.translationX, 319 transY = -e.translationY; 320 321 // Accumulate translations. 322 accDx = accDx + transX; 323 dx = accDx; 324 scrolling = Math.abs( accDx ) < Math.abs( -transY ); 325 326 if ( e.detail === e.MSGESTURE_FLAG_INERTIA ) { 327 setImmediate( function () { // MSFT specific. 328 el._gesture.stop(); 329 } ); 330 331 return; 332 } 333 334 if ( ! scrolling || Number( new Date() ) - startT > 500 ) { 335 e.preventDefault(); 336 if ( slider.transitions ) { 337 slider.setProps( offset + dx, 'setTouch' ); 338 } 339 } 340 } 341 342 function onMSGestureEnd( e ) { 343 e.stopPropagation(); 344 var slider = e.target._slider, 345 updateDx, 346 target; 347 if ( ! slider ) { 348 return; 349 } 350 351 if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) { 352 updateDx = dx, 353 target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); 354 355 slider.featureAnimate( target ); 356 } 357 358 startX = null; 359 startY = null; 360 dx = null; 361 offset = null; 362 accDx = 0; 363 } 364 }, 365 366 resize: function() { 367 if ( ! slider.animating && slider.is( ':visible' ) ) { 368 slider.doMath(); 369 370 // SMOOTH HEIGHT 371 methods.smoothHeight(); 372 slider.newSlides.width( slider.computedW ); 373 slider.setProps( slider.computedW, 'setTotal' ); 374 } 375 }, 376 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() ); 380 }, 381 382 setToClearWatchedEvent: function() { 383 clearTimeout( watchedEventClearTimer ); 384 watchedEventClearTimer = setTimeout( function() { 385 watchedEvent = ''; 386 }, 3000 ); 387 } 388 }; 389 390 // Public methods. 391 slider.featureAnimate = function( target ) { 392 if ( target !== slider.currentSlide ) { 393 slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev'; 394 } 395 396 if ( ! slider.animating && slider.is( ':visible' ) ) { 397 slider.animating = true; 398 slider.animatingTo = target; 399 400 // CONTROLNAV 401 methods.controlNav.active(); 402 403 slider.slides.removeClass( namespace + 'active-slide' ).eq( target ).addClass( namespace + 'active-slide' ); 404 405 slider.atEnd = target === 0 || target === slider.last; 406 407 // DIRECTIONNAV
408 methods.directionNav.update(); 409 410 var dimension = slider.computedW, 411 slideString; 412 413 if ( slider.currentSlide === 0 && target === slider.count - 1 && slider.direction !== 'next' ) { 414 slideString = 0; 415 } else if ( slider.currentSlide === slider.last && target === 0 && slider.direction !== 'prev' ) { 416 slideString = ( slider.count + 1 ) * dimension; 417 } else { 418 slideString = ( target + slider.cloneOffset ) * dimension; 419 } 420 slider.setProps( slideString, '', slider.vars.animationSpeed ); 421 if ( slider.transitions ) { 422 if ( ! slider.atEnd ) { 423 slider.animating = false; 424 slider.currentSlide = slider.animatingTo; 425 } 426 slider.container.unbind( 'webkitTransitionEnd transitionend' ); 427 slider.container.bind( 'webkitTransitionEnd transitionend', function() { 428 slider.wrapup( dimension ); 429 } ); 430 } else { 431 slider.container.animate( slider.args, slider.vars.animationSpeed, 'swing', function() { 432 slider.wrapup( dimension ); 433 } ); 434 } 435 436 // SMOOTH HEIGHT 437 methods.smoothHeight( slider.vars.animationSpeed ); 438 } 439 }; 440 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' ); 446 } 447 slider.animating = false; 448 slider.currentSlide = slider.animatingTo; 449 }; 450 451 slider.getTarget = function( dir ) { 452 slider.direction = dir; 453 454 // Swap for RTL. 455 if ( slider.isRtl ) { 456 dir = 'next' === dir ? 'prev' : 'next'; 457 } 458 459 if ( dir === 'next' ) { 460 return ( slider.currentSlide === slider.last ) ? 0 : slider.currentSlide + 1; 461 } else { 462 return ( slider.currentSlide === 0 ) ? slider.last : slider.currentSlide - 1; 463 } 464 }; 465 466 slider.setProps = function( pos, special, dur ) { 467 var target = ( function() { 468 var posCalc = ( function() { 469 switch ( special ) { 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; 474 default: return pos; 475 } 476 }() ); 477 478 return ( posCalc * -1 ) + 'px'; 479 }() ); 480 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 ); 485 } 486 487 slider.args[slider.prop] = target; 488 if ( slider.transitions || dur === undefined ) { 489 slider.container.css( slider.args ); 490 } 491 }; 492 493 slider.setup = function( type ) { 494 var sliderOffset; 495 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; 500 } 501 slider.cloneCount = 2; 502 slider.cloneOffset = 1; 503 // Clear out old clones. 504 if ( type !== 'init' ) { 505 slider.container.find( '.clone' ).remove(); 506 } 507 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 ); 510 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() { 515 slider.doMath(); 516 slider.newSlides.css( { 'width': slider.computedW, 'float': 'left', 'display': 'block' } ); 517 // SMOOTH HEIGHT 518 methods.smoothHeight(); 519 }, ( type === 'init' ) ? 100 : 0 ); 520 521 slider.slides.removeClass( namespace + 'active-slide' ).eq( slider.currentSlide ).addClass( namespace + 'active-slide' ); 522 }; 523 524 slider.doMath = function() { 525 var slide = slider.slides.first(); 526 527 slider.w = ( slider.viewport === undefined ) ? slider.width() : slider.viewport.width(); 528 slider.h = slide.height(); 529 slider.boxPadding = slide.outerWidth() - slide.width(); 530 531 slider.itemW = slider.w; 532 slider.pagingCount = slider.count; 533 slider.last = slider.count - 1; 534 slider.computedW = slider.itemW - slider.boxPadding; 535 }; 536 537 slider.update = function( pos, action ) { 538 slider.doMath(); 539 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; 545 } 546 slider.animatingTo = slider.currentSlide; 547 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; 555 } 556 methods.controlNav.update( 'remove', slider.last ); 557 } 558 // Update directionNav.
559 methods.directionNav.update(); 560 }; 561 562 // FeaturedSlider: initialize. 563 methods.init(); 564 }; 565 566 // Default settings. 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. 572 573 // Text labels. 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. 576 }; 577 578 // FeaturedSlider: plugin function. 579 $.fn.featuredslider = function( options ) { 580 if ( options === undefined ) { 581 options = {}; 582 } 583 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 ); 589 590 if ( $slides.length === 1 || $slides.length === 0 ) { 591 $slides.fadeIn( 400 ); 592 } else if ( $this.data( 'featuredslider' ) === undefined ) { 593 new $.featuredslider( this, options ); 594 } 595 } ); 596 } 597 }; 598} )( jQuery );
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.