slider.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  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. // Make variables public.
  20. slider.vars = $.extend( {}, $.featuredslider.defaults, options );
  21. namespace = slider.vars.namespace,
  22. // Store a reference to the slider object.
  23. $.data( el, 'featuredslider', slider );
  24. // Private slider methods.
  25. methods = {
  26. init: function() {
  27. slider.animating = false;
  28. slider.currentSlide = 0;
  29. slider.animatingTo = slider.currentSlide;
  30. slider.atEnd = ( slider.currentSlide === 0 || slider.currentSlide === slider.last );
  31. slider.containerSelector = slider.vars.selector.substr( 0, slider.vars.selector.search( ' ' ) );
  32. slider.slides = $( slider.vars.selector, slider );
  33. slider.container = $( slider.containerSelector, slider );
  34. slider.count = slider.slides.length;
  35. slider.prop = 'marginLeft';
  36. slider.isRtl = $( 'body' ).hasClass( 'rtl' );
  37. slider.args = {};
  38. // TOUCH
  39. slider.transitions = ( function() {
  40. var obj = document.createElement( 'div' ),
  41. props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'],
  42. i;
  43. for ( i in props ) {
  44. if ( obj.style[ props[i] ] !== undefined ) {
  45. slider.pfx = props[i].replace( 'Perspective', '' ).toLowerCase();
  46. slider.prop = '-' + slider.pfx + '-transform';
  47. return true;
  48. }
  49. }
  50. return false;
  51. }() );
  52. // CONTROLSCONTAINER
  53. if ( slider.vars.controlsContainer !== '' ) {
  54. slider.controlsContainer = $( slider.vars.controlsContainer ).length > 0 && $( slider.vars.controlsContainer );
  55. }
  56. slider.doMath();
  57. // INIT
  58. slider.setup( 'init' );
  59. // CONTROLNAV
  60. methods.controlNav.setup();
  61. // DIRECTIONNAV
  62. methods.directionNav.setup();
  63. // KEYBOARD
  64. if ( $( slider.containerSelector ).length === 1 ) {
  65. $( document ).bind( 'keyup', function( event ) {
  66. var keycode = event.keyCode,
  67. target = false;
  68. if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) {
  69. if ( keycode === 39 ) {
  70. target = slider.getTarget( 'next' );
  71. } else if ( keycode === 37 ) {
  72. target = slider.getTarget( 'prev' );
  73. }
  74. slider.featureAnimate( target );
  75. }
  76. } );
  77. }
  78. // TOUCH
  79. if ( touch ) {
  80. methods.touch();
  81. }
  82. $( window ).bind( 'resize orientationchange focus', methods.resize );
  83. slider.find( 'img' ).attr( 'draggable', 'false' );
  84. },
  85. controlNav: {
  86. setup: function() {
  87. methods.controlNav.setupPaging();
  88. },
  89. setupPaging: function() {
  90. var type = 'control-paging',
  91. j = 1,
  92. item,
  93. slide,
  94. i;
  95. slider.controlNavScaffold = $( '<ol class="' + namespace + 'control-nav ' + namespace + type + '"></ol>' );
  96. if ( slider.pagingCount > 1 ) {
  97. for ( i = 0; i < slider.pagingCount; i++ ) {
  98. slide = slider.slides.eq( i );
  99. item = '<a>' + j + '</a>';
  100. slider.controlNavScaffold.append( '<li>' + item + '</li>' );
  101. j++;
  102. }
  103. }
  104. // CONTROLSCONTAINER
  105. ( slider.controlsContainer ) ? $( slider.controlsContainer ).append( slider.controlNavScaffold ) : slider.append( slider.controlNavScaffold );
  106. methods.controlNav.set();
  107. methods.controlNav.active();
  108. slider.controlNavScaffold.delegate( 'a, img', eventType, function( event ) {
  109. event.preventDefault();
  110. if ( watchedEvent === '' || watchedEvent === event.type ) {
  111. var $this = $( this ),
  112. target = slider.controlNav.index( $this );
  113. if ( ! $this.hasClass( namespace + 'active' ) ) {
  114. slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
  115. slider.featureAnimate( target );
  116. }
  117. }
  118. // Set up flags to prevent event duplication.
  119. if ( watchedEvent === '' ) {
  120. watchedEvent = event.type;
  121. }
  122. methods.setToClearWatchedEvent();
  123. } );
  124. },
  125. set: function() {
  126. var selector = 'a';
  127. slider.controlNav = $( '.' + namespace + 'control-nav li ' + selector, ( slider.controlsContainer ) ? slider.controlsContainer : slider );
  128. },
  129. active: function() {
  130. slider.controlNav.removeClass( namespace + 'active' ).eq( slider.animatingTo ).addClass( namespace + 'active' );
  131. },
  132. update: function( action, pos ) {
  133. if ( slider.pagingCount > 1 && action === 'add' ) {
  134. slider.controlNavScaffold.append( $( '<li><a>' + slider.count + '</a></li>' ) );
  135. } else if ( slider.pagingCount === 1 ) {
  136. slider.controlNavScaffold.find( 'li' ).remove();
  137. } else {
  138. slider.controlNav.eq( pos ).closest( 'li' ).remove();
  139. }
  140. methods.controlNav.set();
  141. ( slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length ) ? slider.update( pos, action ) : methods.controlNav.active();
  142. }
  143. },
  144. directionNav: {
  145. setup: function() {
  146. 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>' );
  147. // CONTROLSCONTAINER
  148. if ( slider.controlsContainer ) {
  149. $( slider.controlsContainer ).append( directionNavScaffold );
  150. slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider.controlsContainer );
  151. } else {
  152. slider.append( directionNavScaffold );
  153. slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider );
  154. }
  155. methods.directionNav.update();
  156. slider.directionNav.bind( eventType, function( event ) {
  157. event.preventDefault();
  158. var target;
  159. if ( watchedEvent === '' || watchedEvent === event.type ) {
  160. target = ( $( this ).hasClass( namespace + 'next' ) ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
  161. slider.featureAnimate( target );
  162. }
  163. // Set up flags to prevent event duplication.
  164. if ( watchedEvent === '' ) {
  165. watchedEvent = event.type;
  166. }
  167. methods.setToClearWatchedEvent();
  168. } );
  169. },
  170. update: function() {
  171. var disabledClass = namespace + 'disabled';
  172. if ( slider.pagingCount === 1 ) {
  173. slider.directionNav.addClass( disabledClass ).attr( 'tabindex', '-1' );
  174. } else {
  175. slider.directionNav.removeClass( disabledClass ).removeAttr( 'tabindex' );
  176. }
  177. }
  178. },
  179. touch: function() {
  180. var startX,
  181. startY,
  182. offset,
  183. cwidth,
  184. dx,
  185. startT,
  186. scrolling = false,
  187. localX = 0,
  188. localY = 0,
  189. accDx = 0;
  190. if ( ! msGesture ) {
  191. el.addEventListener( 'touchstart', onTouchStart, false );
  192. } else {
  193. el.style.msTouchAction = 'none';
  194. el._gesture = new MSGesture(); // MSFT specific.
  195. el._gesture.target = el;
  196. el.addEventListener( 'MSPointerDown', onMSPointerDown, false );
  197. el._slider = slider;
  198. el.addEventListener( 'MSGestureChange', onMSGestureChange, false );
  199. el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false );
  200. }
  201. function onTouchStart( e ) {
  202. if ( slider.animating ) {
  203. e.preventDefault();
  204. } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
  205. cwidth = slider.w;
  206. startT = Number( new Date() );
  207. // Local vars for X and Y points.
  208. localX = e.touches[0].pageX;
  209. localY = e.touches[0].pageY;
  210. offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
  211. if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
  212. offset = 0;
  213. }
  214. startX = localX;
  215. startY = localY;
  216. el.addEventListener( 'touchmove', onTouchMove, false );
  217. el.addEventListener( 'touchend', onTouchEnd, false );
  218. }
  219. }
  220. function onTouchMove( e ) {
  221. // Local vars for X and Y points.
  222. localX = e.touches[0].pageX;
  223. localY = e.touches[0].pageY;
  224. dx = startX - localX;
  225. scrolling = Math.abs( dx ) < Math.abs( localY - startY );
  226. if ( ! scrolling ) {
  227. e.preventDefault();
  228. if ( slider.transitions ) {
  229. slider.setProps( offset + dx, 'setTouch' );
  230. }
  231. }
  232. }
  233. function onTouchEnd() {
  234. // Finish the touch by undoing the touch session.
  235. el.removeEventListener( 'touchmove', onTouchMove, false );
  236. if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) {
  237. var updateDx = dx,
  238. target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
  239. slider.featureAnimate( target );
  240. }
  241. el.removeEventListener( 'touchend', onTouchEnd, false );
  242. startX = null;
  243. startY = null;
  244. dx = null;
  245. offset = null;
  246. }
  247. function onMSPointerDown( e ) {
  248. e.stopPropagation();
  249. if ( slider.animating ) {
  250. e.preventDefault();
  251. } else {
  252. el._gesture.addPointer( e.pointerId );
  253. accDx = 0;
  254. cwidth = slider.w;
  255. startT = Number( new Date() );
  256. offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
  257. if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
  258. offset = 0;
  259. }
  260. }
  261. }
  262. function onMSGestureChange( e ) {
  263. e.stopPropagation();
  264. var slider = e.target._slider,
  265. transX,
  266. transY;
  267. if ( ! slider ) {
  268. return;
  269. }
  270. transX = -e.translationX,
  271. transY = -e.translationY;
  272. // Accumulate translations.
  273. accDx = accDx + transX;
  274. dx = accDx;
  275. scrolling = Math.abs( accDx ) < Math.abs( -transY );
  276. if ( e.detail === e.MSGESTURE_FLAG_INERTIA ) {
  277. setImmediate( function () { // MSFT specific.
  278. el._gesture.stop();
  279. } );
  280. return;
  281. }
  282. if ( ! scrolling || Number( new Date() ) - startT > 500 ) {
  283. e.preventDefault();
  284. if ( slider.transitions ) {
  285. slider.setProps( offset + dx, 'setTouch' );
  286. }
  287. }
  288. }
  289. function onMSGestureEnd( e ) {
  290. e.stopPropagation();
  291. var slider = e.target._slider,
  292. updateDx,
  293. target;
  294. if ( ! slider ) {
  295. return;
  296. }
  297. if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) {
  298. updateDx = dx,
  299. target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
  300. slider.featureAnimate( target );
  301. }
  302. startX = null;
  303. startY = null;
  304. dx = null;
  305. offset = null;
  306. accDx = 0;
  307. }
  308. },
  309. resize: function() {
  310. if ( ! slider.animating && slider.is( ':visible' ) ) {
  311. slider.doMath();
  312. // SMOOTH HEIGHT
  313. methods.smoothHeight();
  314. slider.newSlides.width( slider.computedW );
  315. slider.setProps( slider.computedW, 'setTotal' );
  316. }
  317. },
  318. smoothHeight: function( dur ) {
  319. var $obj = slider.viewport;
  320. ( dur ) ? $obj.animate( { 'height': slider.slides.eq( slider.animatingTo ).height() }, dur ) : $obj.height( slider.slides.eq( slider.animatingTo ).height() );
  321. },
  322. setToClearWatchedEvent: function() {
  323. clearTimeout( watchedEventClearTimer );
  324. watchedEventClearTimer = setTimeout( function() {
  325. watchedEvent = '';
  326. }, 3000 );
  327. }
  328. };
  329. // Public methods.
  330. slider.featureAnimate = function( target ) {
  331. if ( target !== slider.currentSlide ) {
  332. slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
  333. }
  334. if ( ! slider.animating && slider.is( ':visible' ) ) {
  335. slider.animating = true;
  336. slider.animatingTo = target;
  337. // CONTROLNAV
  338. methods.controlNav.active();
  339. slider.slides.removeClass( namespace + 'active-slide' ).eq( target ).addClass( namespace + 'active-slide' );
  340. slider.atEnd = target === 0 || target === slider.last;
  341. // DIRECTIONNAV
  342. methods.directionNav.update();
  343. var dimension = slider.computedW,
  344. slideString;
  345. if ( slider.currentSlide === 0 && target === slider.count - 1 && slider.direction !== 'next' ) {
  346. slideString = 0;
  347. } else if ( slider.currentSlide === slider.last && target === 0 && slider.direction !== 'prev' ) {
  348. slideString = ( slider.count + 1 ) * dimension;
  349. } else {
  350. slideString = ( target + slider.cloneOffset ) * dimension;
  351. }
  352. slider.setProps( slideString, '', slider.vars.animationSpeed );
  353. if ( slider.transitions ) {
  354. if ( ! slider.atEnd ) {
  355. slider.animating = false;
  356. slider.currentSlide = slider.animatingTo;
  357. }
  358. slider.container.unbind( 'webkitTransitionEnd transitionend' );
  359. slider.container.bind( 'webkitTransitionEnd transitionend', function() {
  360. slider.wrapup( dimension );
  361. } );
  362. } else {
  363. slider.container.animate( slider.args, slider.vars.animationSpeed, 'swing', function() {
  364. slider.wrapup( dimension );
  365. } );
  366. }
  367. // SMOOTH HEIGHT
  368. methods.smoothHeight( slider.vars.animationSpeed );
  369. }
  370. };
  371. slider.wrapup = function( dimension ) {
  372. if ( slider.currentSlide === 0 && slider.animatingTo === slider.last ) {
  373. slider.setProps( dimension, 'jumpEnd' );
  374. } else if ( slider.currentSlide === slider.last && slider.animatingTo === 0 ) {
  375. slider.setProps( dimension, 'jumpStart' );
  376. }
  377. slider.animating = false;
  378. slider.currentSlide = slider.animatingTo;
  379. };
  380. slider.getTarget = function( dir ) {
  381. slider.direction = dir;
  382. // Swap for RTL.
  383. if ( slider.isRtl ) {
  384. dir = 'next' === dir ? 'prev' : 'next';
  385. }
  386. if ( dir === 'next' ) {
  387. return ( slider.currentSlide === slider.last ) ? 0 : slider.currentSlide + 1;
  388. } else {
  389. return ( slider.currentSlide === 0 ) ? slider.last : slider.currentSlide - 1;
  390. }
  391. };
  392. slider.setProps = function( pos, special, dur ) {
  393. var target = ( function() {
  394. var posCalc = ( function() {
  395. switch ( special ) {
  396. case 'setTotal': return ( slider.currentSlide + slider.cloneOffset ) * pos;
  397. case 'setTouch': return pos;
  398. case 'jumpEnd': return slider.count * pos;
  399. case 'jumpStart': return pos;
  400. default: return pos;
  401. }
  402. }() );
  403. return ( posCalc * -1 ) + 'px';
  404. }() );
  405. if ( slider.transitions ) {
  406. target = 'translate3d(' + target + ',0,0 )';
  407. dur = ( dur !== undefined ) ? ( dur / 1000 ) + 's' : '0s';
  408. slider.container.css( '-' + slider.pfx + '-transition-duration', dur );
  409. }
  410. slider.args[slider.prop] = target;
  411. if ( slider.transitions || dur === undefined ) {
  412. slider.container.css( slider.args );
  413. }
  414. };
  415. slider.setup = function( type ) {
  416. var sliderOffset;
  417. if ( type === 'init' ) {
  418. slider.viewport = $( '<div class="' + namespace + 'viewport"></div>' ).css( { 'overflow': 'hidden', 'position': 'relative' } ).appendTo( slider ).append( slider.container );
  419. slider.cloneCount = 0;
  420. slider.cloneOffset = 0;
  421. }
  422. slider.cloneCount = 2;
  423. slider.cloneOffset = 1;
  424. // Clear out old clones.
  425. if ( type !== 'init' ) {
  426. slider.container.find( '.clone' ).remove();
  427. }
  428. slider.container.append( slider.slides.first().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) ).prepend( slider.slides.last().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) );
  429. slider.newSlides = $( slider.vars.selector, slider );
  430. sliderOffset = slider.currentSlide + slider.cloneOffset;
  431. slider.container.width( ( slider.count + slider.cloneCount ) * 200 + '%' );
  432. slider.setProps( sliderOffset * slider.computedW, 'init' );
  433. setTimeout( function() {
  434. slider.doMath();
  435. slider.newSlides.css( { 'width': slider.computedW, 'float': 'left', 'display': 'block' } );
  436. // SMOOTH HEIGHT
  437. methods.smoothHeight();
  438. }, ( type === 'init' ) ? 100 : 0 );
  439. slider.slides.removeClass( namespace + 'active-slide' ).eq( slider.currentSlide ).addClass( namespace + 'active-slide' );
  440. };
  441. slider.doMath = function() {
  442. var slide = slider.slides.first();
  443. slider.w = ( slider.viewport===undefined ) ? slider.width() : slider.viewport.width();
  444. slider.h = slide.height();
  445. slider.boxPadding = slide.outerWidth() - slide.width();
  446. slider.itemW = slider.w;
  447. slider.pagingCount = slider.count;
  448. slider.last = slider.count - 1;
  449. slider.computedW = slider.itemW - slider.boxPadding;
  450. };
  451. slider.update = function( pos, action ) {
  452. slider.doMath();
  453. // Update currentSlide and slider.animatingTo if necessary.
  454. if ( pos < slider.currentSlide ) {
  455. slider.currentSlide += 1;
  456. } else if ( pos <= slider.currentSlide && pos !== 0 ) {
  457. slider.currentSlide -= 1;
  458. }
  459. slider.animatingTo = slider.currentSlide;
  460. // Update controlNav.
  461. if ( action === 'add' || slider.pagingCount > slider.controlNav.length ) {
  462. methods.controlNav.update( 'add' );
  463. } else if ( action === 'remove' || slider.pagingCount < slider.controlNav.length ) {
  464. if ( slider.currentSlide > slider.last ) {
  465. slider.currentSlide -= 1;
  466. slider.animatingTo -= 1;
  467. }
  468. methods.controlNav.update( 'remove', slider.last );
  469. }
  470. // Update directionNav.
  471. methods.directionNav.update();
  472. };
  473. // FeaturedSlider: initialize.
  474. methods.init();
  475. };
  476. // Default settings.
  477. $.featuredslider.defaults = {
  478. namespace: 'slider-', // String: prefix string attached to the class of every element generated by the plugin.
  479. selector: '.slides > li', // String: selector, must match a simple pattern.
  480. animationSpeed: 600, // Integer: Set the speed of animations, in milliseconds.
  481. controlsContainer: '', // jQuery Object/Selector: container navigation to append elements.
  482. // Text labels.
  483. prevText: featuredSliderDefaults.prevText, // String: Set the text for the "previous" directionNav item.
  484. nextText: featuredSliderDefaults.nextText // String: Set the text for the "next" directionNav item.
  485. };
  486. // FeaturedSlider: plugin function.
  487. $.fn.featuredslider = function( options ) {
  488. if ( options === undefined ) {
  489. options = {};
  490. }
  491. if ( typeof options === 'object' ) {
  492. return this.each( function() {
  493. var $this = $( this ),
  494. selector = ( options.selector ) ? options.selector : '.slides > li',
  495. $slides = $this.find( selector );
  496. if ( $slides.length === 1 || $slides.length === 0 ) {
  497. $slides.fadeIn( 400 );
  498. } else if ( $this.data( 'featuredslider' ) === undefined ) {
  499. new $.featuredslider( this, options );
  500. }
  501. } );
  502. }
  503. };
  504. } )( jQuery );