diff -r 346c88efed21 -r 5e2f62d02dcd wp/wp-content/themes/twentyfourteen/js/slider.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/wp/wp-content/themes/twentyfourteen/js/slider.js Tue Jun 09 03:35:32 2015 +0200 @@ -0,0 +1,598 @@ +/* + * Twenty Fourteen Featured Content Slider + * + * Adapted from FlexSlider v2.2.0, copyright 2012 WooThemes + * @link http://www.woothemes.com/flexslider/ + */ +/* global DocumentTouch:true,setImmediate:true,featuredSliderDefaults:true,MSGesture:true */ +( function( $ ) { + // FeaturedSlider: object instance. + $.featuredslider = function( el, options ) { + var slider = $( el ), + msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture, + touch = ( ( 'ontouchstart' in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch ), // MSFT specific. + eventType = 'click touchend MSPointerUp', + watchedEvent = '', + watchedEventClearTimer, + methods = {}, + namespace; + + // Make variables public. + slider.vars = $.extend( {}, $.featuredslider.defaults, options ); + + namespace = slider.vars.namespace, + + // Store a reference to the slider object. + $.data( el, 'featuredslider', slider ); + + // Private slider methods. + methods = { + init: function() { + slider.animating = false; + slider.currentSlide = 0; + slider.animatingTo = slider.currentSlide; + slider.atEnd = ( slider.currentSlide === 0 || slider.currentSlide === slider.last ); + slider.containerSelector = slider.vars.selector.substr( 0, slider.vars.selector.search( ' ' ) ); + slider.slides = $( slider.vars.selector, slider ); + slider.container = $( slider.containerSelector, slider ); + slider.count = slider.slides.length; + slider.prop = 'marginLeft'; + slider.isRtl = $( 'body' ).hasClass( 'rtl' ); + slider.args = {}; + // TOUCH + slider.transitions = ( function() { + var obj = document.createElement( 'div' ), + props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'], + i; + + for ( i in props ) { + if ( obj.style[ props[i] ] !== undefined ) { + slider.pfx = props[i].replace( 'Perspective', '' ).toLowerCase(); + slider.prop = '-' + slider.pfx + '-transform'; + return true; + } + } + return false; + }() ); + // CONTROLSCONTAINER + if ( slider.vars.controlsContainer !== '' ) { + slider.controlsContainer = $( slider.vars.controlsContainer ).length > 0 && $( slider.vars.controlsContainer ); + } + + slider.doMath(); + + // INIT + slider.setup( 'init' ); + + // CONTROLNAV + methods.controlNav.setup(); + + // DIRECTIONNAV + methods.directionNav.setup(); + + // KEYBOARD + if ( $( slider.containerSelector ).length === 1 ) { + $( document ).bind( 'keyup', function( event ) { + var keycode = event.keyCode, + target = false; + if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) { + if ( keycode === 39 ) { + target = slider.getTarget( 'next' ); + } else if ( keycode === 37 ) { + target = slider.getTarget( 'prev' ); + } + + slider.featureAnimate( target ); + } + } ); + } + + // TOUCH + if ( touch ) { + methods.touch(); + } + + $( window ).bind( 'resize orientationchange focus', methods.resize ); + + slider.find( 'img' ).attr( 'draggable', 'false' ); + }, + + controlNav: { + setup: function() { + methods.controlNav.setupPaging(); + }, + setupPaging: function() { + var type = 'control-paging', + j = 1, + item, + slide, + i; + + slider.controlNavScaffold = $( '
    ' ); + + if ( slider.pagingCount > 1 ) { + for ( i = 0; i < slider.pagingCount; i++ ) { + slide = slider.slides.eq( i ); + item = '' + j + ''; + slider.controlNavScaffold.append( '
  1. ' + item + '
  2. ' ); + j++; + } + } + + // CONTROLSCONTAINER + ( slider.controlsContainer ) ? $( slider.controlsContainer ).append( slider.controlNavScaffold ) : slider.append( slider.controlNavScaffold ); + methods.controlNav.set(); + + methods.controlNav.active(); + + slider.controlNavScaffold.delegate( 'a, img', eventType, function( event ) { + event.preventDefault(); + + if ( watchedEvent === '' || watchedEvent === event.type ) { + var $this = $( this ), + target = slider.controlNav.index( $this ); + + if ( ! $this.hasClass( namespace + 'active' ) ) { + slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev'; + slider.featureAnimate( target ); + } + } + + // Set up flags to prevent event duplication. + if ( watchedEvent === '' ) { + watchedEvent = event.type; + } + + methods.setToClearWatchedEvent(); + } ); + }, + set: function() { + var selector = 'a'; + slider.controlNav = $( '.' + namespace + 'control-nav li ' + selector, ( slider.controlsContainer ) ? slider.controlsContainer : slider ); + }, + active: function() { + slider.controlNav.removeClass( namespace + 'active' ).eq( slider.animatingTo ).addClass( namespace + 'active' ); + }, + update: function( action, pos ) { + if ( slider.pagingCount > 1 && action === 'add' ) { + slider.controlNavScaffold.append( $( '
  3. ' + slider.count + '
  4. ' ) ); + } else if ( slider.pagingCount === 1 ) { + slider.controlNavScaffold.find( 'li' ).remove(); + } else { + slider.controlNav.eq( pos ).closest( 'li' ).remove(); + } + methods.controlNav.set(); + ( slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length ) ? slider.update( pos, action ) : methods.controlNav.active(); + } + }, + + directionNav: { + setup: function() { + var directionNavScaffold = $( '' ); + + // CONTROLSCONTAINER + if ( slider.controlsContainer ) { + $( slider.controlsContainer ).append( directionNavScaffold ); + slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider.controlsContainer ); + } else { + slider.append( directionNavScaffold ); + slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider ); + } + + methods.directionNav.update(); + + slider.directionNav.bind( eventType, function( event ) { + event.preventDefault(); + var target; + + if ( watchedEvent === '' || watchedEvent === event.type ) { + target = ( $( this ).hasClass( namespace + 'next' ) ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); + slider.featureAnimate( target ); + } + + // Set up flags to prevent event duplication. + if ( watchedEvent === '' ) { + watchedEvent = event.type; + } + + methods.setToClearWatchedEvent(); + } ); + }, + update: function() { + var disabledClass = namespace + 'disabled'; + if ( slider.pagingCount === 1 ) { + slider.directionNav.addClass( disabledClass ).attr( 'tabindex', '-1' ); + } else { + slider.directionNav.removeClass( disabledClass ).removeAttr( 'tabindex' ); + } + } + }, + + touch: function() { + var startX, + startY, + offset, + cwidth, + dx, + startT, + scrolling = false, + localX = 0, + localY = 0, + accDx = 0; + + if ( ! msGesture ) { + el.addEventListener( 'touchstart', onTouchStart, false ); + } else { + el.style.msTouchAction = 'none'; + el._gesture = new MSGesture(); // MSFT specific. + el._gesture.target = el; + el.addEventListener( 'MSPointerDown', onMSPointerDown, false ); + el._slider = slider; + el.addEventListener( 'MSGestureChange', onMSGestureChange, false ); + el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false ); + } + + function onTouchStart( e ) { + if ( slider.animating ) { + e.preventDefault(); + } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) { + cwidth = slider.w; + startT = Number( new Date() ); + + // Local vars for X and Y points. + localX = e.touches[0].pageX; + localY = e.touches[0].pageY; + + offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth; + if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) { + offset = 0; + } + + startX = localX; + startY = localY; + + el.addEventListener( 'touchmove', onTouchMove, false ); + el.addEventListener( 'touchend', onTouchEnd, false ); + } + } + + function onTouchMove( e ) { + // Local vars for X and Y points. + localX = e.touches[0].pageX; + localY = e.touches[0].pageY; + + dx = startX - localX; + scrolling = Math.abs( dx ) < Math.abs( localY - startY ); + + if ( ! scrolling ) { + e.preventDefault(); + if ( slider.transitions ) { + slider.setProps( offset + dx, 'setTouch' ); + } + } + } + + function onTouchEnd() { + // Finish the touch by undoing the touch session. + el.removeEventListener( 'touchmove', onTouchMove, false ); + + if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) { + var updateDx = dx, + target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); + + slider.featureAnimate( target ); + } + el.removeEventListener( 'touchend', onTouchEnd, false ); + + startX = null; + startY = null; + dx = null; + offset = null; + } + + function onMSPointerDown( e ) { + e.stopPropagation(); + if ( slider.animating ) { + e.preventDefault(); + } else { + el._gesture.addPointer( e.pointerId ); + accDx = 0; + cwidth = slider.w; + startT = Number( new Date() ); + offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth; + if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) { + offset = 0; + } + } + } + + function onMSGestureChange( e ) { + e.stopPropagation(); + var slider = e.target._slider, + transX, + transY; + if ( ! slider ) { + return; + } + + transX = -e.translationX, + transY = -e.translationY; + + // Accumulate translations. + accDx = accDx + transX; + dx = accDx; + scrolling = Math.abs( accDx ) < Math.abs( -transY ); + + if ( e.detail === e.MSGESTURE_FLAG_INERTIA ) { + setImmediate( function () { // MSFT specific. + el._gesture.stop(); + } ); + + return; + } + + if ( ! scrolling || Number( new Date() ) - startT > 500 ) { + e.preventDefault(); + if ( slider.transitions ) { + slider.setProps( offset + dx, 'setTouch' ); + } + } + } + + function onMSGestureEnd( e ) { + e.stopPropagation(); + var slider = e.target._slider, + updateDx, + target; + if ( ! slider ) { + return; + } + + if ( slider.animatingTo === slider.currentSlide && ! scrolling && dx !== null ) { + updateDx = dx, + target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' ); + + slider.featureAnimate( target ); + } + + startX = null; + startY = null; + dx = null; + offset = null; + accDx = 0; + } + }, + + resize: function() { + if ( ! slider.animating && slider.is( ':visible' ) ) { + slider.doMath(); + + // SMOOTH HEIGHT + methods.smoothHeight(); + slider.newSlides.width( slider.computedW ); + slider.setProps( slider.computedW, 'setTotal' ); + } + }, + + smoothHeight: function( dur ) { + var $obj = slider.viewport; + ( dur ) ? $obj.animate( { 'height': slider.slides.eq( slider.animatingTo ).height() }, dur ) : $obj.height( slider.slides.eq( slider.animatingTo ).height() ); + }, + + setToClearWatchedEvent: function() { + clearTimeout( watchedEventClearTimer ); + watchedEventClearTimer = setTimeout( function() { + watchedEvent = ''; + }, 3000 ); + } + }; + + // Public methods. + slider.featureAnimate = function( target ) { + if ( target !== slider.currentSlide ) { + slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev'; + } + + if ( ! slider.animating && slider.is( ':visible' ) ) { + slider.animating = true; + slider.animatingTo = target; + + // CONTROLNAV + methods.controlNav.active(); + + slider.slides.removeClass( namespace + 'active-slide' ).eq( target ).addClass( namespace + 'active-slide' ); + + slider.atEnd = target === 0 || target === slider.last; + + // DIRECTIONNAV + methods.directionNav.update(); + + var dimension = slider.computedW, + slideString; + + if ( slider.currentSlide === 0 && target === slider.count - 1 && slider.direction !== 'next' ) { + slideString = 0; + } else if ( slider.currentSlide === slider.last && target === 0 && slider.direction !== 'prev' ) { + slideString = ( slider.count + 1 ) * dimension; + } else { + slideString = ( target + slider.cloneOffset ) * dimension; + } + slider.setProps( slideString, '', slider.vars.animationSpeed ); + if ( slider.transitions ) { + if ( ! slider.atEnd ) { + slider.animating = false; + slider.currentSlide = slider.animatingTo; + } + slider.container.unbind( 'webkitTransitionEnd transitionend' ); + slider.container.bind( 'webkitTransitionEnd transitionend', function() { + slider.wrapup( dimension ); + } ); + } else { + slider.container.animate( slider.args, slider.vars.animationSpeed, 'swing', function() { + slider.wrapup( dimension ); + } ); + } + + // SMOOTH HEIGHT + methods.smoothHeight( slider.vars.animationSpeed ); + } + }; + + slider.wrapup = function( dimension ) { + if ( slider.currentSlide === 0 && slider.animatingTo === slider.last ) { + slider.setProps( dimension, 'jumpEnd' ); + } else if ( slider.currentSlide === slider.last && slider.animatingTo === 0 ) { + slider.setProps( dimension, 'jumpStart' ); + } + slider.animating = false; + slider.currentSlide = slider.animatingTo; + }; + + slider.getTarget = function( dir ) { + slider.direction = dir; + + // Swap for RTL. + if ( slider.isRtl ) { + dir = 'next' === dir ? 'prev' : 'next'; + } + + if ( dir === 'next' ) { + return ( slider.currentSlide === slider.last ) ? 0 : slider.currentSlide + 1; + } else { + return ( slider.currentSlide === 0 ) ? slider.last : slider.currentSlide - 1; + } + }; + + slider.setProps = function( pos, special, dur ) { + var target = ( function() { + var posCalc = ( function() { + switch ( special ) { + case 'setTotal': return ( slider.currentSlide + slider.cloneOffset ) * pos; + case 'setTouch': return pos; + case 'jumpEnd': return slider.count * pos; + case 'jumpStart': return pos; + default: return pos; + } + }() ); + + return ( posCalc * -1 ) + 'px'; + }() ); + + if ( slider.transitions ) { + target = 'translate3d(' + target + ',0,0 )'; + dur = ( dur !== undefined ) ? ( dur / 1000 ) + 's' : '0s'; + slider.container.css( '-' + slider.pfx + '-transition-duration', dur ); + } + + slider.args[slider.prop] = target; + if ( slider.transitions || dur === undefined ) { + slider.container.css( slider.args ); + } + }; + + slider.setup = function( type ) { + var sliderOffset; + + if ( type === 'init' ) { + slider.viewport = $( '
    ' ).css( { 'overflow': 'hidden', 'position': 'relative' } ).appendTo( slider ).append( slider.container ); + slider.cloneCount = 0; + slider.cloneOffset = 0; + } + slider.cloneCount = 2; + slider.cloneOffset = 1; + // Clear out old clones. + if ( type !== 'init' ) { + slider.container.find( '.clone' ).remove(); + } + + slider.container.append( slider.slides.first().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) ).prepend( slider.slides.last().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) ); + slider.newSlides = $( slider.vars.selector, slider ); + + sliderOffset = slider.currentSlide + slider.cloneOffset; + slider.container.width( ( slider.count + slider.cloneCount ) * 200 + '%' ); + slider.setProps( sliderOffset * slider.computedW, 'init' ); + setTimeout( function() { + slider.doMath(); + slider.newSlides.css( { 'width': slider.computedW, 'float': 'left', 'display': 'block' } ); + // SMOOTH HEIGHT + methods.smoothHeight(); + }, ( type === 'init' ) ? 100 : 0 ); + + slider.slides.removeClass( namespace + 'active-slide' ).eq( slider.currentSlide ).addClass( namespace + 'active-slide' ); + }; + + slider.doMath = function() { + var slide = slider.slides.first(); + + slider.w = ( slider.viewport === undefined ) ? slider.width() : slider.viewport.width(); + slider.h = slide.height(); + slider.boxPadding = slide.outerWidth() - slide.width(); + + slider.itemW = slider.w; + slider.pagingCount = slider.count; + slider.last = slider.count - 1; + slider.computedW = slider.itemW - slider.boxPadding; + }; + + slider.update = function( pos, action ) { + slider.doMath(); + + // Update currentSlide and slider.animatingTo if necessary. + if ( pos < slider.currentSlide ) { + slider.currentSlide += 1; + } else if ( pos <= slider.currentSlide && pos !== 0 ) { + slider.currentSlide -= 1; + } + slider.animatingTo = slider.currentSlide; + + // Update controlNav. + if ( action === 'add' || slider.pagingCount > slider.controlNav.length ) { + methods.controlNav.update( 'add' ); + } else if ( action === 'remove' || slider.pagingCount < slider.controlNav.length ) { + if ( slider.currentSlide > slider.last ) { + slider.currentSlide -= 1; + slider.animatingTo -= 1; + } + methods.controlNav.update( 'remove', slider.last ); + } + // Update directionNav. + methods.directionNav.update(); + }; + + // FeaturedSlider: initialize. + methods.init(); + }; + + // Default settings. + $.featuredslider.defaults = { + namespace: 'slider-', // String: prefix string attached to the class of every element generated by the plugin. + selector: '.slides > li', // String: selector, must match a simple pattern. + animationSpeed: 600, // Integer: Set the speed of animations, in milliseconds. + controlsContainer: '', // jQuery Object/Selector: container navigation to append elements. + + // Text labels. + prevText: featuredSliderDefaults.prevText, // String: Set the text for the "previous" directionNav item. + nextText: featuredSliderDefaults.nextText // String: Set the text for the "next" directionNav item. + }; + + // FeaturedSlider: plugin function. + $.fn.featuredslider = function( options ) { + if ( options === undefined ) { + options = {}; + } + + if ( typeof options === 'object' ) { + return this.each( function() { + var $this = $( this ), + selector = ( options.selector ) ? options.selector : '.slides > li', + $slides = $this.find( selector ); + + if ( $slides.length === 1 || $slides.length === 0 ) { + $slides.fadeIn( 400 ); + } else if ( $this.data( 'featuredslider' ) === undefined ) { + new $.featuredslider( this, options ); + } + } ); + } + }; +} )( jQuery );