From 93b93b103ff1ec2721b06386c1f5601ce9ca432c Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Tue, 29 Oct 2013 16:28:11 +0000 Subject: [PATCH] Twenty Fourteen: implement an alternate "slider" view for home page featured content. Props iamtakashi for the design and implementation. Slider JavaScript code adapted from FlexSlider v2.2.0 props WooThemes and mbmufffin. See #25550. git-svn-id: https://develop.svn.wordpress.org/trunk@25979 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentyfourteen/content-featured-post.php | 46 +- .../twentyfourteen/featured-content.php | 4 +- .../themes/twentyfourteen/functions.php | 16 +- .../themes/twentyfourteen/inc/customizer.php | 23 + .../themes/twentyfourteen/inc/widgets.php | 8 +- .../themes/twentyfourteen/js/functions.js | 34 +- .../themes/twentyfourteen/js/slider.js | 572 ++++++++++++++++++ .../themes/twentyfourteen/sidebar.php | 26 +- .../themes/twentyfourteen/style.css | 332 +++++++--- 9 files changed, 911 insertions(+), 150 deletions(-) create mode 100644 src/wp-content/themes/twentyfourteen/js/slider.js diff --git a/src/wp-content/themes/twentyfourteen/content-featured-post.php b/src/wp-content/themes/twentyfourteen/content-featured-post.php index 23115ac8d5..c832608592 100644 --- a/src/wp-content/themes/twentyfourteen/content-featured-post.php +++ b/src/wp-content/themes/twentyfourteen/content-featured-post.php @@ -9,38 +9,24 @@ ?>
> - - " rel=""> + get_the_ID(), - 'post_type' => 'attachment', - 'post_mime_type' => 'image', - 'orderby' => 'menu_order', - 'order' => 'ASC', - 'numberposts' => 1, - ) ); - - if ( $images ) : - $image = array_shift( $images ); - echo wp_get_attachment_image( $image->ID, 'post-thumbnail-grid' ); - endif; - endif; - ?> + else + the_post_thumbnail( 'post-thumbnail-slider' ); + endif; + ?> -
-
- -
- -
- +
+ +
+ +
+ - ', '' ); ?> -
-
+ ','' ); ?> +
diff --git a/src/wp-content/themes/twentyfourteen/featured-content.php b/src/wp-content/themes/twentyfourteen/featured-content.php index 50b816cf2d..0746d15770 100644 --- a/src/wp-content/themes/twentyfourteen/featured-content.php +++ b/src/wp-content/themes/twentyfourteen/featured-content.php @@ -11,7 +11,7 @@ ?>
- +
- +
diff --git a/src/wp-content/themes/twentyfourteen/functions.php b/src/wp-content/themes/twentyfourteen/functions.php index 0f862b5b7c..f72141eca4 100644 --- a/src/wp-content/themes/twentyfourteen/functions.php +++ b/src/wp-content/themes/twentyfourteen/functions.php @@ -68,6 +68,7 @@ function twentyfourteen_setup() { add_theme_support( 'post-thumbnails' ); // Add several sizes for Post Thumbnails. + add_image_size( 'post-thumbnail-slider', 1038, 576, true ); add_image_size( 'post-thumbnail-grid', 672, 372, true ); add_image_size( 'post-thumbnail', 672, 0 ); @@ -219,9 +220,8 @@ function twentyfourteen_font_url() { * @return void */ function twentyfourteen_scripts() { - // Add Lato font, used in the main stylesheet. - wp_enqueue_style( 'twentyfourteen-lato' ); + wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null ); // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), '3.0' ); @@ -238,10 +238,10 @@ function twentyfourteen_scripts() { if ( is_active_sidebar( 'sidebar-3' ) ) wp_enqueue_script( 'jquery-masonry' ); - wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true ); + if ( 'slider' == get_theme_mod( 'featured_content_layout' ) ) + wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131028', true ); - // Add Lato font used in the main stylesheet. - wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null ); + wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true ); } add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' ); @@ -365,6 +365,7 @@ endif; * 4. Full-width content layout. * 5. Presence of footer widgets. * 6. Single views. + * 7. Featured content layout. * * @since Twenty Fourteen 1.0 * @@ -395,6 +396,11 @@ function twentyfourteen_body_classes( $classes ) { if ( is_singular() ) $classes[] = 'singular'; + if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) + $classes[] = 'slider'; + elseif ( is_front_page() ) + $classes[] = 'grid'; + return $classes; } add_filter( 'body_class', 'twentyfourteen_body_classes' ); diff --git a/src/wp-content/themes/twentyfourteen/inc/customizer.php b/src/wp-content/themes/twentyfourteen/inc/customizer.php index fd5b4461ff..25af88e5ba 100644 --- a/src/wp-content/themes/twentyfourteen/inc/customizer.php +++ b/src/wp-content/themes/twentyfourteen/inc/customizer.php @@ -30,6 +30,29 @@ function twentyfourteen_customize_register( $wp_customize ) { 'section' => 'colors', 'settings' => 'accent_color', ) ) ); + + // Add the featured content section. + $wp_customize->add_section( 'featured_content', array( + 'title' => __( 'Featured Content', 'twentyfourteen' ), + 'priority' => 120, + ) ); + + // Add the featured content layout setting and control. + $wp_customize->add_setting( 'featured_content_layout', array( + 'default' => 'grid', + 'type' => 'theme_mod', + 'capability' => 'edit_theme_options', + ) ); + + $wp_customize->add_control( 'featured_content_layout', array( + 'label' => __( 'Layout', 'twentyfourteen' ), + 'section' => 'featured_content', + 'type' => 'select', + 'choices' => array( + 'grid' => __( 'Grid', 'twentyfourteen' ), + 'slider' => __( 'Slider', 'twentyfourteen' ), + ), + ) ); } add_action( 'customize_register', 'twentyfourteen_customize_register' ); diff --git a/src/wp-content/themes/twentyfourteen/inc/widgets.php b/src/wp-content/themes/twentyfourteen/inc/widgets.php index a51430b9d6..7970e3b647 100644 --- a/src/wp-content/themes/twentyfourteen/inc/widgets.php +++ b/src/wp-content/themes/twentyfourteen/inc/widgets.php @@ -157,15 +157,15 @@ class Twenty_Fourteen_Ephemera_Widget extends WP_Widget { $total_images = count( $images ); if ( has_post_thumbnail() ) : - $featured_image = get_the_post_thumbnail( get_the_ID(), 'featured-thumbnail-formatted' ); + $post_thumbnail = get_the_post_thumbnail( get_the_ID(), 'post-thumbnail' ); elseif ( $total_images > 0 ) : $image = array_shift( $images ); - $featured_image = wp_get_attachment_image( $image, 'featured-thumbnail-formatted' ); + $post_thumbnail = wp_get_attachment_image( $image, 'post-thumbnail' ); endif; - if ( ! empty ( $featured_image ) ) : + if ( ! empty ( $post_thumbnail ) ) : ?> - + diff --git a/src/wp-content/themes/twentyfourteen/js/functions.js b/src/wp-content/themes/twentyfourteen/js/functions.js index b840cd1d36..e87433b0b7 100644 --- a/src/wp-content/themes/twentyfourteen/js/functions.js +++ b/src/wp-content/themes/twentyfourteen/js/functions.js @@ -2,9 +2,7 @@ var body = $( 'body' ), _window = $( window ); - /** - * Enables menu toggle for small screens. - */ + // Enable menu toggle for small screens. ( function() { var nav = $( '#primary-navigation' ), button, menu; if ( ! nav ) @@ -26,7 +24,7 @@ } ); } )(); - /** + /* * Makes "skip to content" link work correctly in IE9 and Chrome for better * accessibility. * @@ -44,9 +42,7 @@ } ); $( function() { - /** - * Search toggle. - */ + // Search toggle. $( '.search-toggle' ).on( 'click.twentyfourteen', function() { var that = $( this ), wrapper = $( '.search-box-wrapper' ); @@ -58,7 +54,7 @@ wrapper.find( '.search-field' ).focus(); } ); - /** + /* * Fixed navbar. * * The callback on the scroll event is only added if there is a header @@ -76,17 +72,13 @@ } ); } - /** - * Focus styles for primary menu. - */ + // Focus styles for primary menu. $( '.primary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { $( this ).parents().toggleClass( 'focus' ); } ); } ); - /** - * Arranges footer widgets vertically. - */ + // Arrange footer widgets vertically. if ( $.isFunction( $.fn.masonry ) ) { $( '#footer-sidebar' ).masonry( { itemSelector: '.widget', @@ -97,5 +89,15 @@ isResizable: true, isRTL: $( 'body' ).is( '.rtl' ) } ); - } -} )( jQuery ); \ No newline at end of file + }; + + // Initialize Featured Content slider. + _window.load( function() { + if ( body.is( '.slider' ) ) { + $( '.featured-content' ).featuredslider( { + selector: '.featured-content-inner > article', + controlsContainer: '.featured-content' + } ); + } + } ); +} )( jQuery ); diff --git a/src/wp-content/themes/twentyfourteen/js/slider.js b/src/wp-content/themes/twentyfourteen/js/slider.js new file mode 100644 index 0000000000..0a3d39b089 --- /dev/null +++ b/src/wp-content/themes/twentyfourteen/js/slider.js @@ -0,0 +1,572 @@ +/* + * Twenty Fourteen Featured Content Slider + * + * Adapted from FlexSlider v2.2.0, copyright 2012 WooThemes + * @link http://www.woothemes.com/flexslider/ + */ + +( function( $ ) { + // FeaturedSlider: object instance. + $.featuredslider = function( el, options ) { + var slider = $( el ); + + // Make variables public. + slider.vars = $.extend( {}, $.featuredslider.defaults, options ); + + var namespace = slider.vars.namespace, + msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture, + touch = ( ( 'ontouchstart' in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch ), + eventType = 'click touchend MSPointerUp', + watchedEvent = '', + watchedEventClearTimer, + methods = {}, + focused = true; + + // 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.args = {}; + // TOUCH + slider.transitions = ( function() { + var obj = document.createElement( 'div' ), + props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective']; + for ( var 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; + if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) { + var target = ( keycode === 39 ) ? slider.getTarget( 'next' ) : ( keycode === 37 ) ? slider.getTarget( 'prev' ) : false; + 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; + + slider.controlNavScaffold = $( '
    ' ); + + if ( slider.pagingCount > 1 ) { + for ( var 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( $( '
  2. ' + slider.count + '
    3. ' ) ); + } 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 ); + + 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.animatingTo === slider.last ) ? 0 : + ( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth; + 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 ); + + var fxms = 500; + + if ( ! scrolling || Number( new Date() ) - startT > fxms ) { + e.preventDefault(); + if ( slider.transitions ) { + slider.setProps( offset + dx, 'setTouch' ); + } + } + } + + function onTouchEnd( e ) { + // 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; + } + } else { + el.style.msTouchAction = 'none'; + el._gesture = new MSGesture(); + el._gesture.target = el; + el.addEventListener( 'MSPointerDown', onMSPointerDown, false ); + el._slider = slider; + el.addEventListener( 'MSGestureChange', onMSGestureChange, false ); + el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false ); + + 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.animatingTo === slider.last ) ? 0 : ( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth; + } + } + + function onMSGestureChange( e ) { + e.stopPropagation(); + var slider = e.target._slider; + if ( ! slider ) + return; + + var 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 () { + 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; + if ( ! slider ) + return; + + if ( slider.animatingTo === slider.currentSlide && ! scrolling && ! ( dx === null ) ) { + var 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, + margin, slideString, calcNext; + + 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; + 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 posCheck = ( pos ) ? pos : slider.itemW * slider.animatingTo, + 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, arr; + + 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(); + }; + + // Ensure the slider isn't focused if the window loses focus. + $( window ).blur( function ( e ) { + focused = false; + } ).focus( function ( e ) { + focused = true; + } ); + + // 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: @todo allow translation + prevText: 'Previous', // String: Set the text for the "previous" directionNav item. + nextText: 'Next' // 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 ); diff --git a/src/wp-content/themes/twentyfourteen/sidebar.php b/src/wp-content/themes/twentyfourteen/sidebar.php index d156fe9d62..3f64cfa877 100644 --- a/src/wp-content/themes/twentyfourteen/sidebar.php +++ b/src/wp-content/themes/twentyfourteen/sidebar.php @@ -8,20 +8,18 @@ */ ?>
    -
    - -

    - + +

    + - - - -
    + + + +
    diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css index 6c98907af1..ea8d3dd2b6 100644 --- a/src/wp-content/themes/twentyfourteen/style.css +++ b/src/wp-content/themes/twentyfourteen/style.css @@ -556,12 +556,7 @@ img[class*="attachment-"], img.size-full, img.size-large, -img.wp-post-image { - height: auto; - max-width: 100%; -} - -.attachment-featured-featured img, +img.wp-post-image, .post-thumbnail img { height: auto; max-width: 100%; @@ -708,6 +703,8 @@ img.wp-smiley { .footer-sidebar:after, .hentry:before, .hentry:after, +.slider-direction-nav:before, +.slider-direction-nav:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, @@ -719,6 +716,7 @@ img.wp-smiley { .clear:after, .footer-sidebar:after, .hentry:after, +.slider-direction-nav:after, [class*="content"]:after, [class*="site"]:after { clear: both; @@ -732,6 +730,7 @@ img.wp-smiley { .contributor-posts-link:before, .menu-toggle:before, .search-toggle:before, +.slider-direction-nav a:before, .widget_twentyfourteen_ephemera .widget-title:before { -webkit-font-smoothing: antialiased; display: inline-block; @@ -780,14 +779,14 @@ span + .edit-link:before, } .site-header { - background-color: #000; max-width: 1260px; position: relative; width: 100%; - z-index: 3; + z-index: 4; } .header-main { + background-color: #000; min-height: 48px; padding: 0 10px; } @@ -812,7 +811,7 @@ span + .edit-link:before, cursor: pointer; float: right; height: 48px; - margin-right: 38px; + margin-right: 48px; text-align: center; width: 48px; } @@ -845,10 +844,10 @@ span + .edit-link:before, .search-box .search-field { background-color: #fff; float: right; - font-size: 13px; + font-size: 16px; margin: 12px 10px; - padding: 3px 2px 3px 6px; - width: 240px; + padding: 1px 2px 2px 6px; + width: 300px; } @@ -929,7 +928,7 @@ span + .edit-link:before, .secondary-navigation { border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; - margin: 48px 0 0; + margin: 48px 0; } .secondary-navigation a { @@ -1006,7 +1005,7 @@ span + .edit-link:before, float: none; height: auto; margin: 0; - min-height: 180px; + min-height: 192px; position: relative; width: 100%; z-index: 0; @@ -1978,6 +1977,7 @@ a.post-thumbnail:hover { #secondary { background-color: #000; border-top: 1px solid #000; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); clear: both; color: rgba(255, 255, 255, 0.55); font-size: 14px; @@ -1998,6 +1998,9 @@ a.post-thumbnail:hover { .primary-sidebar { padding-top: 48px; } +.secondary-navigation + .primary-sidebar { + padding-top: 0; +} .footer-sidebar a, .primary-sidebar a { @@ -2079,7 +2082,7 @@ a.post-thumbnail:hover { .widget-area input[type="reset"], .widget-area input[type="submit"] { font-size: 11px; - padding: 6px 24px; + padding: 6px 15px; } .widget-area input[type="email"], @@ -2446,7 +2449,6 @@ a.post-thumbnail:hover { } .footer-sidebar { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-top: 48px; } @@ -2455,6 +2457,10 @@ a.post-thumbnail:hover { padding: 15px 10px; } +#supplementary + .site-info { + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + .site-info a { color: rgba(255, 255, 255, 0.75); } @@ -2474,35 +2480,47 @@ a.post-thumbnail:hover { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + position: relative; width: 100%; } +.featured-content-inner { + overflow: hidden; +} + .featured-content .hentry { color: #fff; margin: 0; + max-width: 100%; width: 100%; } -.attachment-featured-featured { - background-color: #000; +.featured-content .post-thumbnail, +.featured-content .post-thumbnail:hover { + background: transparent; +} + +.featured-content .post-thumbnail { display: block; - overflow: hidden; + min-height: 0; + position: relative; + padding-top: 55.357142857%; } -.attachment-featured-featured:hover img { - opacity: 0.85; +.featured-content .post-thumbnail img { + left: 0; + position: absolute; + top: 0; } -.featured-content .entry-wrap { +.featured-content .entry-header { background-color: #000; - border-color: #000; - border-style: solid; - border-width: 12px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 96px; overflow: hidden; + padding: 24px 10px; } .featured-content a { @@ -2533,20 +2551,132 @@ a.post-thumbnail:hover { } +/* Slider */ + +.slider .featured-content .hentry { + display: none; + -webkit-backface-visibility: hidden; + position: relative; +} + +.slider .featured-content .post-thumbnail { + padding-top: 55.49132947%; +} + +.slider-control-paging { + background-color: #000; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + list-style: none; + margin: -24px 0 0 0; + position: relative; + width: 100%; + z-index: 3; +} + +.slider-control-paging li { + float: left; + margin: 2px 4px 2px 0; +} + +.slider-control-paging li:last-child { + margin-right: 0; +} + +.slider-control-paging a { + cursor: pointer; + display: block; + height: 44px; + position: relative; + text-indent: -999em; + width: 44px; +} + +.slider-control-paging a:before { + background-color: #4d4d4d; + content: ""; + height: 12px; + left: 10px; + position: absolute; + top: 16px; + width: 12px; +} + +.slider-control-paging a:hover:before { + background-color: #24890d; +} + +.slider-control-paging a.slider-active:before { + background-color: #41a62a; +} + +.slider-direction-nav { + clear: both; + list-style: none; + margin: 0; + position: relative; + width: 100%; + z-index: 3; +} + +.slider-direction-nav li { + border-color: #fff; + border-style: solid; + border-width: 2px 1px 0 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + text-align: center; + width: 50%; +} + +.slider-direction-nav li:last-child { + border-width: 2px 0 0 1px; +} + +.slider-direction-nav a { + background-color: #000; + display: block; + font-size: 0; + height: 46px; +} + +.slider-direction-nav a:hover { + background-color: #24890d; +} + +.slider-direction-nav a:before { + content: "\f430"; + color: #fff; + font-size: 32px; + line-height: 46px; +} + +.slider-direction-nav a.slider-next:before { + content: "\f429"; +} + +.slider-direction-nav .slider-disabled { + display: none; +} + /** * 10.0 Media Queries * ----------------------------------------------------------------------------- */ @media screen and (max-width: 400px) { - .list-view .post-thumbnail { + .list-view .site-content .post-thumbnail { background: none; min-height: 0; width: auto; z-index: 2; } - .list-view .post-thumbnail img { + .list-view .site-content .post-thumbnail img { float: left; margin: 0 10px 3px 0; width: 84px; @@ -2745,6 +2875,10 @@ a.post-thumbnail:hover { } @media screen and (min-width: 673px) { + .header-main { + padding: 0 0 0 30px; + } + .content-area { float: left; padding-top: 36px; @@ -2795,6 +2929,11 @@ a.post-thumbnail:hover { padding-left: 30px; } + #secondary, + #supplementary { + padding: 0 30px; + } + .content-sidebar { border: 0; float: right; @@ -2803,29 +2942,74 @@ a.post-thumbnail:hover { width: 33.33333333%; } - .featured-content .hentry { + .grid .featured-content .hentry { float: left; width: 50%; } - .featured-content .hentry:nth-child( 2n+1 ) { + .grid .featured-content .hentry:nth-child( 2n+1 ) { clear: both; } - .featured-content .entry-wrap { + .grid .featured-content .entry-header { + border-color: #000; + border-style: solid; + border-width: 12px 10px; height: 96px; + padding: 0; } - .attachment-featured-featured { - height: 186px; + .slider .featured-content .entry-title { + font-size: 22px; + line-height: 1.0909090909; + } + + .slider .featured-content .entry-header { + bottom: 0; + min-height: inherit; + padding: 24px 30px 48px; + position: absolute; + width: 50%; + z-index: 3; + } + + .slider-control-paging { + background: transparent; + margin-top: -48px; + padding-left: 20px; + width: 50%; + } + + .slider-direction-nav { + clear: none; + float: right; + margin-top: -48px; + width: 98px; + } + + .slider-direction-nav li { + border: none; + padding: 0 1px; 0 0; + } + + .slider-direction-nav li:last-child { + padding: 0 0 0 1px; + } + + .slider-direction-nav a { + height: 48px; + } + + .slider-direction-nav a:before { + line-height: 48px; + } + + .site-info { + padding: 15px 30px; } } @media screen and (min-width: 782px) { - .header-main { - padding: 0 0 0 30px; - } - .search-toggle { margin-right: 0; } @@ -2945,10 +3129,6 @@ a.post-thumbnail:hover { .primary-navigation li .current-menu-ancestor > a { background-color: #000; } - - .attachment-featured-featured { - height: 213px; - } } @media screen and (min-width: 810px) { @@ -2992,10 +3172,6 @@ a.post-thumbnail:hover { .contributor-summary { float: left; } - - .attachment-featured-featured { - height: 224px; - } } @media screen and (min-width: 870px) { @@ -3057,10 +3233,6 @@ a.post-thumbnail:hover { .featured-content { margin-bottom: -24px; } - - .attachment-featured-featured { - height: 241px; - } } @media screen and (min-width: 1008px) { @@ -3101,14 +3273,13 @@ a.post-thumbnail:hover { #secondary { background-color: transparent; - border-top: 0; + border: 0; clear: none; float: left; font-size: 11px; line-height: 1.6363636363; margin: 0 0 0 -100%; min-height: 100vh; - padding: 0 30px; width: 122px; } @@ -3145,7 +3316,7 @@ a.post-thumbnail:hover { .secondary-navigation { border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 11px; - margin: 0 0 48px; + margin-top: 0; } .secondary-navigation ul, @@ -3203,10 +3374,6 @@ a.post-thumbnail:hover { width: 25%; } - .site-info { - padding: 15px 30px; - } - .front-page-content-wrapper { float: left; } @@ -3215,25 +3382,21 @@ a.post-thumbnail:hover { padding-left: 182px; } - .featured-content .hentry { + .grid .featured-content .hentry { width: 33.3333333%; } - .featured-content .hentry:nth-child( 2n+1 ) { + .grid .featured-content .hentry:nth-child( 2n+1 ) { clear: none; } - .featured-content .hentry:nth-child( 3n+1 ) { + .grid .featured-content .hentry:nth-child( 3n+1 ) { clear: both; } - .featured-content .entry-wrap { + .grid .featured-content .entry-header { height: 120px; } - - .attachment-featured-featured { - height: 152px; - } } @media screen and (min-width: 1040px) { @@ -3273,10 +3436,6 @@ a.post-thumbnail:hover { padding-right: 30px; padding-left: 30px; } - - .attachment-featured-featured { - height: 158px; - } } @media screen and (min-width: 1080px) { @@ -3301,6 +3460,33 @@ a.post-thumbnail:hover { .secondary-navigation ul ul { left: 162px; } + + .slider .featured-content .entry-title { + font-size: 33px; + } + + .slider .featured-content .entry-header, + .slider-control-paging { + width: 534px; + } + + .slider-control-paging { + padding-left: 24px; + } + + .slider-control-paging li { + margin: 12px 12px 12px 0 + } + + .slider-control-paging a { + height: 24px; + width: 24px; + } + + .slider-control-paging a:before { + left: 6px; + top: 6px; + } } @media screen and (min-width: 1110px) { @@ -3317,10 +3503,6 @@ a.post-thumbnail:hover { padding-right: 30px; padding-left: 30px; } - - .attachment-featured-featured { - height: 164px; - } } @media screen and (min-width: 1218px) { @@ -3349,10 +3531,6 @@ a.post-thumbnail:hover { .full-width .site-content footer.entry-meta { margin-right: auto; } - - .attachment-featured-featured { - height: 184px; - } } @media screen and (min-width: 1260px) { @@ -3369,8 +3547,4 @@ a.post-thumbnail:hover { .site-content blockquote.alignright { margin-right: -18%; } - - .attachment-featured-featured { - height: 192px; - } } \ No newline at end of file