2014-10-14 15:48:19 -04:00
|
|
|
/* global screenReaderText */
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
/**
|
2014-11-04 15:26:23 -05:00
|
|
|
* Theme functions file.
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
*
|
|
|
|
* Contains handlers for navigation and widget area.
|
|
|
|
*/
|
|
|
|
|
|
|
|
( function( $ ) {
|
2014-12-10 18:02:23 -05:00
|
|
|
var $body, $window, $sidebar, adminbarOffset, top = false,
|
|
|
|
bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
|
2015-03-06 12:34:26 -05:00
|
|
|
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
|
2015-06-16 18:18:24 -04:00
|
|
|
secondary, button;
|
|
|
|
|
2015-07-29 14:13:24 -04:00
|
|
|
function initMainNavigation( container ) {
|
2015-06-16 18:18:24 -04:00
|
|
|
// Add dropdown toggle that display child menu items.
|
2015-07-29 14:13:24 -04:00
|
|
|
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
|
2015-06-16 18:18:24 -04:00
|
|
|
|
|
|
|
// Toggle buttons and submenu items with active children menu items.
|
2015-07-29 14:13:24 -04:00
|
|
|
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
|
|
|
|
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
|
2015-06-16 18:18:24 -04:00
|
|
|
|
2015-07-29 14:13:24 -04:00
|
|
|
container.find( '.dropdown-toggle' ).click( function( e ) {
|
2015-06-16 18:18:24 -04:00
|
|
|
var _this = $( this );
|
|
|
|
e.preventDefault();
|
|
|
|
_this.toggleClass( 'toggle-on' );
|
|
|
|
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
|
|
|
|
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
|
|
|
|
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
|
|
|
|
} );
|
|
|
|
}
|
2015-07-29 14:13:24 -04:00
|
|
|
initMainNavigation( $( '.main-navigation' ) );
|
|
|
|
|
|
|
|
// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
|
|
|
|
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
|
|
|
|
if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
|
|
|
|
initMainNavigation( params.newContainer );
|
|
|
|
|
|
|
|
// Re-sync expanded states from oldContainer.
|
|
|
|
params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
|
|
|
|
var containerId = $( this ).parent().prop( 'id' );
|
|
|
|
$( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
|
2015-03-06 12:34:26 -05:00
|
|
|
secondary = $( '#secondary' );
|
|
|
|
button = $( '.site-branding' ).find( '.secondary-toggle' );
|
|
|
|
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
// Enable menu toggle for small screens.
|
|
|
|
( function() {
|
2015-03-06 12:34:26 -05:00
|
|
|
var menu, widgets, social;
|
2016-03-15 17:33:28 -04:00
|
|
|
if ( ! secondary.length || ! button.length ) {
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2014-11-19 13:23:21 -05:00
|
|
|
// Hide button if there are no widgets and the menus are missing or empty.
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
menu = secondary.find( '.nav-menu' );
|
|
|
|
widgets = secondary.find( '#widget-area' );
|
|
|
|
social = secondary.find( '#social-navigation' );
|
2016-03-15 17:33:28 -04:00
|
|
|
if ( ! widgets.length && ! social.length && ( ! menu.length || ! menu.children().length ) ) {
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
button.hide();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
button.on( 'click.twentyfifteen', function() {
|
|
|
|
secondary.toggleClass( 'toggled-on' );
|
|
|
|
secondary.trigger( 'resize' );
|
|
|
|
$( this ).toggleClass( 'toggled-on' );
|
2015-03-06 12:34:26 -05:00
|
|
|
if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
|
|
|
|
$( this ).attr( 'aria-expanded', 'true' );
|
|
|
|
secondary.attr( 'aria-expanded', 'true' );
|
|
|
|
} else {
|
|
|
|
$( this ).attr( 'aria-expanded', 'false' );
|
|
|
|
secondary.attr( 'aria-expanded', 'false' );
|
|
|
|
}
|
Importing Twenty Fifteen, first pass at our new default theme for 2015, set for 4.1.
It's good for posts, it's good for pages, it might be good for you. Development will occur in trunk. Have at it.
Props matt, iandstewart, iamtakashi, obenland, cainm, kristastevens, karmatosed, chellycat, lancewillett, kwight, davidakennedy. See #29799
Built from https://develop.svn.wordpress.org/trunk@29892
git-svn-id: http://core.svn.wordpress.org/trunk@29648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-14 15:28:18 -04:00
|
|
|
} );
|
|
|
|
} )();
|
2014-10-26 11:04:21 -04:00
|
|
|
|
2015-03-18 14:31:26 -04:00
|
|
|
/**
|
|
|
|
* @summary Add or remove ARIA attributes.
|
|
|
|
* Uses jQuery's width() function to determine the size of the window and add
|
|
|
|
* the default ARIA attributes for the menu toggle if it's visible.
|
|
|
|
* @since Twenty Fifteen 1.1
|
|
|
|
*/
|
2015-03-06 12:34:26 -05:00
|
|
|
function onResizeARIA() {
|
|
|
|
if ( 955 > $window.width() ) {
|
|
|
|
button.attr( 'aria-expanded', 'false' );
|
|
|
|
secondary.attr( 'aria-expanded', 'false' );
|
|
|
|
button.attr( 'aria-controls', 'secondary' );
|
|
|
|
} else {
|
|
|
|
button.removeAttr( 'aria-expanded' );
|
|
|
|
secondary.removeAttr( 'aria-expanded' );
|
|
|
|
button.removeAttr( 'aria-controls' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-11-19 13:23:21 -05:00
|
|
|
// Sidebar scrolling.
|
|
|
|
function resize() {
|
2015-03-30 18:49:27 -04:00
|
|
|
windowWidth = $window.width();
|
2014-10-26 11:04:21 -04:00
|
|
|
|
2014-12-10 08:31:22 -05:00
|
|
|
if ( 955 > windowWidth ) {
|
2014-11-19 13:23:21 -05:00
|
|
|
top = bottom = false;
|
|
|
|
$sidebar.removeAttr( 'style' );
|
2014-10-26 11:04:21 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-11-19 13:23:21 -05:00
|
|
|
function scroll() {
|
|
|
|
var windowPos = $window.scrollTop();
|
|
|
|
|
2014-12-12 18:59:22 -05:00
|
|
|
if ( 955 > windowWidth ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-03-30 18:49:27 -04:00
|
|
|
sidebarHeight = $sidebar.height();
|
|
|
|
windowHeight = $window.height();
|
|
|
|
bodyHeight = $body.height();
|
|
|
|
|
2014-12-12 18:59:22 -05:00
|
|
|
if ( sidebarHeight + adminbarOffset > windowHeight ) {
|
|
|
|
if ( windowPos > lastWindowPos ) {
|
|
|
|
if ( top ) {
|
|
|
|
top = false;
|
|
|
|
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
|
|
|
|
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
|
|
|
|
} else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
|
|
|
|
bottom = true;
|
|
|
|
$sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
|
|
|
|
}
|
|
|
|
} else if ( windowPos < lastWindowPos ) {
|
|
|
|
if ( bottom ) {
|
|
|
|
bottom = false;
|
2014-11-19 13:23:21 -05:00
|
|
|
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
|
|
|
|
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
|
2014-12-12 18:59:22 -05:00
|
|
|
} else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
|
|
|
|
top = true;
|
|
|
|
$sidebar.attr( 'style', 'position: fixed;' );
|
2014-11-19 13:23:21 -05:00
|
|
|
}
|
2014-12-12 18:59:22 -05:00
|
|
|
} else {
|
|
|
|
top = bottom = false;
|
|
|
|
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
|
|
|
|
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
|
2014-11-19 13:23:21 -05:00
|
|
|
}
|
2014-12-12 18:59:22 -05:00
|
|
|
} else if ( ! top ) {
|
|
|
|
top = true;
|
|
|
|
$sidebar.attr( 'style', 'position: fixed;' );
|
2014-11-19 13:23:21 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
lastWindowPos = windowPos;
|
2014-10-26 11:04:21 -04:00
|
|
|
}
|
|
|
|
|
2014-11-19 13:23:21 -05:00
|
|
|
function resizeAndScroll() {
|
|
|
|
resize();
|
|
|
|
scroll();
|
|
|
|
}
|
2014-11-12 22:09:22 -05:00
|
|
|
|
|
|
|
$( document ).ready( function() {
|
2014-12-10 18:02:23 -05:00
|
|
|
$body = $( document.body );
|
2014-11-19 13:23:21 -05:00
|
|
|
$window = $( window );
|
2014-12-10 18:02:23 -05:00
|
|
|
$sidebar = $( '#sidebar' ).first();
|
2014-11-19 13:23:21 -05:00
|
|
|
adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
|
2014-11-12 22:09:22 -05:00
|
|
|
|
|
|
|
$window
|
2014-11-19 13:23:21 -05:00
|
|
|
.on( 'scroll.twentyfifteen', scroll )
|
2015-03-06 12:34:26 -05:00
|
|
|
.on( 'load.twentyfifteen', onResizeARIA )
|
2014-11-19 13:23:21 -05:00
|
|
|
.on( 'resize.twentyfifteen', function() {
|
|
|
|
clearTimeout( resizeTimer );
|
|
|
|
resizeTimer = setTimeout( resizeAndScroll, 500 );
|
2015-03-06 12:34:26 -05:00
|
|
|
onResizeARIA();
|
2014-11-19 13:23:21 -05:00
|
|
|
} );
|
2015-03-06 12:34:26 -05:00
|
|
|
$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
|
2014-11-19 13:23:21 -05:00
|
|
|
|
|
|
|
resizeAndScroll();
|
|
|
|
|
|
|
|
for ( var i = 1; i < 6; i++ ) {
|
|
|
|
setTimeout( resizeAndScroll, 100 * i );
|
|
|
|
}
|
2014-11-12 22:09:22 -05:00
|
|
|
} );
|
2014-10-26 11:04:21 -04:00
|
|
|
|
2014-11-25 01:12:22 -05:00
|
|
|
} )( jQuery );
|