[Summary view] [Print] [Text view]

   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 );