Twenty Fourteen: fix two usability issues with touch events on mobile devices with the Featured Content slider:

* Try to avoid the slight delay when swiping from one slide to the next.
 * Fix bug where second to last slide was animating like it was the last.

Fixes #26191.

git-svn-id: https://develop.svn.wordpress.org/trunk@26665 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Lance Willett 2013-12-05 08:20:03 +00:00
parent 006045395c
commit c38599ff03
2 changed files with 14 additions and 9 deletions

View File

@ -255,7 +255,7 @@ function twentyfourteen_scripts() {
}
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131109', true );
wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131205', true );
wp_localize_script( 'twentyfourteen-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'twentyfourteen' ),
'nextText' => __( 'Next', 'twentyfourteen' )

View File

@ -39,6 +39,7 @@
slider.prop = 'marginLeft';
slider.isRtl = $( 'body' ).hasClass( 'rtl' );
slider.args = {};
slider.limit = 0;
// TOUCH
slider.transitions = ( function() {
var obj = document.createElement( 'div' ),
@ -76,9 +77,9 @@
var keycode = event.keyCode,
target = false;
if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) {
if (keycode === 39){
if ( keycode === 39 ) {
target = slider.getTarget( 'next' );
} else if (keycode === 37) {
} else if ( keycode === 37 ) {
target = slider.getTarget( 'prev' );
}
@ -243,8 +244,11 @@
localX = e.touches[0].pageX;
localY = e.touches[0].pageY;
offset = ( slider.animatingTo === slider.last ) ? 0 :
( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth;
offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
offset = 0;
}
startX = localX;
startY = localY;
@ -261,9 +265,7 @@
dx = startX - localX;
scrolling = Math.abs( dx ) < Math.abs( localY - startY );
var fxms = 500;
if ( ! scrolling || Number( new Date() ) - startT > fxms ) {
if ( ! scrolling ) {
e.preventDefault();
if ( slider.transitions ) {
slider.setProps( offset + dx, 'setTouch' );
@ -298,7 +300,10 @@
accDx = 0;
cwidth = slider.w;
startT = Number( new Date() );
offset = ( slider.animatingTo === slider.last ) ? 0 : ( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth;
offset = ( slider.currentSlide + slider.cloneOffset ) * cwidth;
if ( slider.animatingTo === slider.last && slider.direction !== 'next' ) {
offset = 0;
}
}
}