WordPress/wp-content/themes/twentyfourteen/js/theme.js

128 lines
4.6 KiB
JavaScript
Raw Normal View History

( function( $ ) {
$( document ).ready( function() {
var $primaryNaviClone,
$secondaryNaviClone,
$masthead = $( 'header#masthead' ),
$secondaryTop = $( 'div#secondary-top' ),
$mobileNavigations = $( 'div#mobile-navigations'),
$socialLinksWrapper = $( 'div.social-links-wrapper' ),
$searchBoxWrapper = $( 'div.search-box-wrapper' ),
$searchToggle = $( 'div.search-toggle' ),
$socialLinksToggle = $( 'div.social-links-toggle' ),
timeout = false;
// Toggle function.
function menuToggle() {
$( 'span#nav-toggle' ).toggleClass( 'active' );
$masthead.find( 'div#mobile-navigations' ).toggleClass( 'hide' );
}
// Click event for toggle the social links
$socialLinksToggle.click( function() {
$( this ).toggleClass( 'active' );
$socialLinksWrapper.toggleClass( 'hide' );
// if .search-box-wrapper is visible hide it
if ( ! $searchBoxWrapper.hasClass( 'hide' ) ) {
$searchBoxWrapper.addClass( 'hide' );
}
if ( $searchToggle.hasClass( 'active' ) ) {
$searchToggle.removeClass( 'active' );
}
} );
// Click event for toggle the search
$searchToggle.click( function() {
$( this ).toggleClass( 'active' );
$searchBoxWrapper.toggleClass( 'hide' );
// if .social-links-wrapper is visible hide it
if ( ! $socialLinksWrapper.hasClass( 'hide' ) ) {
$socialLinksWrapper.addClass( 'hide' );
}
if ( $socialLinksToggle.hasClass( 'active' ) ) {
$socialLinksToggle.removeClass( 'active' );
}
} );
// DOM manupilations for mobile header
function mobileHeader() {
// Check if the toggler exists. If not add it.
if ( ! $( 'span#nav-toggle' ).length )
$( '<span id="nav-toggle" class="genericon" />' ).appendTo( $masthead );
// Clone and detach the primary navigation for use later
$primaryNaviClone = $masthead.find( 'nav.primary-navigation' ).detach();
// Clone and detach the secondary navigation for use later
$secondaryNaviClone = $secondaryTop.find( 'nav.secondary-navigation' ).detach();
// Prepend the primary navigation clone to #mobile-navigations and remove the class and add an id
$primaryNaviClone.prependTo( $mobileNavigations ).removeClass( 'primary-navigation' ).addClass( 'mobile-navigation' ).attr( 'id', 'primary-mobile-navigation' );
// Append the secondary navigation clone to #mobile-navigations and remove the class and add an id
$secondaryNaviClone.appendTo( $mobileNavigations ).removeClass( 'secondary-navigation' ).addClass( 'mobile-navigation' ).attr( 'id', 'secondary-mobile-navigation' );
// Remove the click event first and bind it after to make sure it's invoked once.
$( 'span#nav-toggle' ).off( 'click', menuToggle ).click( menuToggle );
};
// DOM manupilations for desktop header
function normalHeader() {
// Check if the toggler exists. If it does remove it.
if ( $( 'span#nav-toggle').length )
$( 'span#nav-toggle' ).remove();
// Clone and detach the primary mobile navigation for use later
$primaryNaviClone = $mobileNavigations.find( '#primary-mobile-navigation' ).detach();
// Clone and detach the secondary mobile navigation for use later
$secondaryNaviClone = $mobileNavigations.find( '#secondary-mobile-navigation' ).detach();
// Append the secondary navigation clone to #mobile-navigations and remove the class and add an id
$primaryNaviClone.appendTo( '.header-main' ).removeClass( 'mobile-navigation' ).removeAttr( 'id' ).addClass( 'primary-navigation' );
// Append the secondary navigation clone to #mobile-navigations and remove the class and add an id
$secondaryNaviClone.appendTo( $secondaryTop ).removeClass( 'mobile-navigation' ).removeAttr( 'id' ).addClass( 'secondary-navigation' );
};
// Check viewport width when user resizes the browser window.
$( window ).resize( function() {
if ( false !== timeout )
clearTimeout( timeout );
timeout = setTimeout( function() {
if ( $( window ).width() < 770 ) {
mobileHeader();
} else {
normalHeader();
}
}, 100 );
} ).resize();
// Sticky header.
var $mastheadOffset = -1,
$toolbarOffset = $( 'body' ).is( '.admin-bar' ) ? 32 : 0,
$maindiv = $( 'div#main' );
$( window ).on( 'scroll', false, function() {
if ( $mastheadOffset < 0 )
$mastheadOffset = $masthead.offset().top - $toolbarOffset;
if ( ( window.scrollY >= $mastheadOffset ) && ( $( window ).width() > 769 ) ) {
$masthead.addClass( 'masthead-fixed' );
$maindiv.css( {
marginTop: $masthead.height()
} );
} else {
$masthead.removeClass( 'masthead-fixed' );
$maindiv.css( {
marginTop: 0
} );
}
} );
} );
} )( jQuery );