Skip to content

Remove jQuery in the frontend for Twenty Fifteen. #1682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adamsilverstein wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Remove jQuery in the frontend for Twenty Fifteen. #1682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d2b096
Remove jQuery in the frontend for Twenty Fifteen.
Sep 16, 2021
0749ae2
Merge branch 'master' into remove/jquery-2015
Feb 17, 2022
aa1df7d
Address code review feedback, simplify JS.
Feb 17, 2022
8304919
Update script version.
Feb 17, 2022
c3b7046
Fix JS error.
Feb 17, 2022
0563f5d
Merge branch 'trunk' into remove/jquery-2015
Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/wp-content/themes/twentyfifteen/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,10 +458,10 @@ function twentyfifteen_scripts() {
}

if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141210' );
wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array(), '20210916' );
}

wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20171218', true );
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array(), '20220217', true );
wp_localize_script(
'twentyfifteen-script',
'screenReaderText',
Expand Down
174 changes: 95 additions & 79 deletions src/wp-content/themes/twentyfifteen/js/functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,130 +5,146 @@
* Contains handlers for navigation and widget area.
*/

( function( $ ) {
var $body, $window, $sidebar, resizeTimer,
secondary, button;
( function() {
var sidebar, resizeTimer, secondary, button;

function initMainNavigation( container ) {
if ( ! container ) {
return;
}

// Add dropdown toggle that display child menu items.
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
container.querySelectorAll( '.menu-item-has-children > a' ).forEach( function( menuLink ) {
var dropdownToggle = document.createElement( 'button' );
dropdownToggle.className = 'dropdown-toggle';
dropdownToggle.setAttribute( 'aria-expanded', 'false' );
dropdownToggle.innerHTML = screenReaderText.expand;
Comment thread
adamsilverstein marked this conversation as resolved.
menuLink.parentElement.insertBefore( dropdownToggle, menuLink.nextElementSibling );
} );

// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );

container.find( '.dropdown-toggle' ).on( 'click', function( e ) {
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 );
container.querySelectorAll( '.current-menu-ancestor > button, .current-menu-ancestor > .sub-menu' ).forEach( function( subItem ) {
subItem.classList.add( 'toggle-on' );
} );

container.querySelectorAll( '.dropdown-toggle' ).forEach( function( dropdownToggle ) {
dropdownToggle.addEventListener( 'click', function( e ) {
e.preventDefault();
this.classList.toggle( 'toggle-on' );
if ( this.nextElementSibling && this.nextElementSibling.matches( '.children, .sub-menu' ) ) {
this.nextElementSibling.classList.toggle( 'toggled-on' );
}
this.setAttribute( 'aria-expanded', this.getAttribute( 'aria-expanded' ) === 'false' ? 'true' : 'false' );

@sgomes sgomes Feb 9, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
this.setAttribute( 'aria-expanded', this.getAttribute( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
dropdownToggle.setAttribute( 'aria-expanded', dropdownToggle.getAttribute( 'aria-expanded' ) === 'false' ? 'true' : 'false' );

@felixarntz felixarntz Feb 17, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above, I'm not sure we should make this change.

this.innerHTML = this.innerHTML === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand;

@sgomes sgomes Feb 9, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
this.innerHTML = this.innerHTML === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand;
dropdownToggle.textContent = dropdownToggle.textContent === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand;

... assuming that screenReaderText.expand / screenReaderText.collapse only ever contain text and no HTML.

@felixarntz felixarntz Feb 17, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above, it has to support HTML.

} );
} );
}
initMainNavigation( $( '.main-navigation' ) );
initMainNavigation( document.querySelector( '.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' );
});
}
});
// This is only relevant for the Customize preview where jQuery is expected to be loaded.
if ( window.jQuery ) {
var $ = window.jQuery;
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
if ( params.wpNavMenuArgs.theme_location === 'primary' ) {
// Extract the raw DOM element from the jQuery wrapper here.
initMainNavigation( params.newContainer[0] );

// 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' );
});
}
});
}

secondary = $( '#secondary' );
button = $( '.site-branding' ).find( '.secondary-toggle' );
secondary = document.getElementById( 'secondary' );
button = document.querySelector( '.site-branding .secondary-toggle' );

// Enable menu toggle for small screens.
( function() {
var menu, widgets, social;
if ( ! secondary.length || ! button.length ) {
if ( ! secondary || ! button ) {
return;
}

// Hide button if there are no widgets and the menus are missing or empty.
menu = secondary.find( '.nav-menu' );
widgets = secondary.find( '#widget-area' );
social = secondary.find( '#social-navigation' );
if ( ! widgets.length && ! social.length && ( ! menu.length || ! menu.children().length ) ) {
button.hide();
menu = secondary.querySelector( '.nav-menu' );
widgets = secondary.querySelector( '#widget-area' );
social = secondary.querySelector( '#social-navigation' );
if ( ! widgets && ! social && ( ! menu || ! menu.children.length ) ) {
button.style.display = 'none';
return;
}

button.on( 'click.twentyfifteen', function() {
secondary.toggleClass( 'toggled-on' );
secondary.trigger( 'resize' );
$( this ).toggleClass( 'toggled-on' );
if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
$( this ).attr( 'aria-expanded', 'true' );
secondary.attr( 'aria-expanded', 'true' );
button.addEventListener( 'click', function() {
Comment thread
adamsilverstein marked this conversation as resolved.
secondary.classList.toggle( 'toggled-on' );
window.dispatchEvent( new Event( 'resize' ) );
Comment thread
felixarntz marked this conversation as resolved.
this.classList.toggle( 'toggled-on' );
if ( -1 !== this.classList.contains( 'toggled-on' ) && -1 !== secondary.classList.contains( 'toggled-on' ) ) {
this.setAttribute( 'aria-expanded', 'true' );
secondary.setAttribute( 'aria-expanded', 'true' );
} else {
$( this ).attr( 'aria-expanded', 'false' );
secondary.attr( 'aria-expanded', 'false' );
this.setAttribute( 'aria-expanded', 'false' );
secondary.setAttribute( 'aria-expanded', 'false' );
}
} );
} )();

/**
* 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.
* 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
*/
function onResizeARIA() {
if ( 955 > $window.width() ) {
button.attr( 'aria-expanded', 'false' );
secondary.attr( 'aria-expanded', 'false' );
button.attr( 'aria-controls', 'secondary' );
if ( document.documentElement.clientWidth < 955 ) {
button.setAttribute( 'aria-expanded', 'false' );
secondary.setAttribute( 'aria-expanded', 'false' );
button.setAttribute( 'aria-controls', 'secondary' );
} else {
button.removeAttr( 'aria-expanded' );
secondary.removeAttr( 'aria-expanded' );
button.removeAttr( 'aria-controls' );
button.removeAttribute( 'aria-expanded' );
secondary.removeAttribute( 'aria-expanded' );
button.removeAttribute( 'aria-controls' );
}
}

// Sidebar scrolling.
function resizeAndScroll() {
var windowPos = $window.scrollTop(),
windowHeight = $window.height(),
sidebarHeight = $sidebar.height(),
bodyHeight = $body.height();

if( 955 < $window.width() && bodyHeight > sidebarHeight && ( windowPos + windowHeight ) >= sidebarHeight ) {
$sidebar.css({
position: 'fixed',
bottom: sidebarHeight > windowHeight ? 0 : 'auto'
});
var windowPos = document.documentElement.scrollTop,
windowHeight = document.documentElement.clientHeight,
sidebarHeight = sidebar.clientHeight,
bodyHeight = document.body.clientHeight;

if( document.documentElement.clientWidth > 955 && bodyHeight > sidebarHeight && ( windowPos + windowHeight ) >= sidebarHeight ) {
sidebar.style.position = 'fixed';
sidebar.style.bottom = sidebarHeight > windowHeight ? 0 : 'auto';
} else {
$sidebar.css('position', 'relative');
sidebar.style.position = 'relative';
}
}

$( function() {
$body = $( document.body );
$window = $( window );
$sidebar = $( '#sidebar' ).first();

$window
.on( 'scroll.twentyfifteen', resizeAndScroll )
.on( 'load.twentyfifteen', onResizeARIA )
.on( 'resize.twentyfifteen', function() {
clearTimeout( resizeTimer );
resizeTimer = setTimeout( resizeAndScroll, 500 );
onResizeARIA();
} );
$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
( function() {
sidebar = document.getElementById( 'sidebar' );

window.addEventListener( 'scroll', resizeAndScroll );
window.addEventListener( 'load', onResizeARIA );
window.addEventListener( 'resize', function() {
clearTimeout( resizeTimer );
resizeTimer = setTimeout( resizeAndScroll, 500 );
onResizeARIA();
} );
sidebar.getElementsByTagName( 'button' ).forEach( function( sidebarButton ) {
sidebarButton.addEventListener( 'click', resizeAndScroll );
sidebarButton.addEventListener( 'keydown', resizeAndScroll );
} );

for ( var i = 0; i < 6; i++ ) {
setTimeout( resizeAndScroll, 100 * i );
}
} );
} )();

} )( jQuery );
} )();
18 changes: 10 additions & 8 deletions src/wp-content/themes/twentyfifteen/js/keyboard-image-navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,23 @@
* Twenty Fifteen keyboard support for image navigation.
*/

( function( $ ) {
$( document ).on( 'keydown.twentyfifteen', function( e ) {
( function() {
document.addEventListener( 'keydown', function( e ) {
var previousEl = document.querySelector( '.nav-previous a' );
var nextEl = document.querySelector( '.nav-next a' );
var url = false;

// Left arrow key code.
if ( e.which === 37 ) {
url = $( '.nav-previous a' ).attr( 'href' );
if ( e.which === 37 && previousEl ) {
url = previousEl.getAttribute( 'href' );

// Right arrow key code.
} else if ( e.which === 39 ) {
url = $( '.nav-next a' ).attr( 'href' );
} else if ( e.which === 39 && nextEl ) {
url = nextEl.getAttribute( 'href' );
}

if ( url && ( ! $( 'textarea, input' ).is( ':focus' ) ) ) {
if ( url && document.activeElement && ! document.activeElement.matches( 'input, textarea' ) ) {
window.location = url;
}
} );
} )( jQuery );
} )();