.addClass( 'form-invalid' )
.find( ':input:visible' )
.on( 'change', function() { $( this ).closest( '.form-invalid' ).removeClass( 'form-invalid' ); } )
// Stub for doing better warnings.
* Shows message pop-up notice or confirmation message.
* @type {{warn: showNotice.warn, note: showNotice.note}}
* Shows a delete confirmation pop-up message.
* @return {boolean} Returns true if the message is confirmed.
if ( confirm( __( 'You are about to permanently delete these items from your site.\nThis action cannot be undone.\n\'Cancel\' to stop, \'OK\' to delete.' ) ) ) {
* Shows an alert message.
* @param text The text to display in the message.
* Represents the functions for the meta screen options panel.
* @type {{element: null, toggles: null, page: null, init: screenMeta.init,
* toggleEvent: screenMeta.toggleEvent, open: screenMeta.open,
* close: screenMeta.close}}
element: null, // #screen-meta
toggles: null, // .screen-meta-toggle
page: null, // #wpcontent
* Initializes the screen meta options panel.
this.element = $('#screen-meta');
this.toggles = $( '#screen-meta-links' ).find( '.show-settings' );
this.page = $('#wpcontent');
this.toggles.on( 'click', this.toggleEvent );
* Toggles the screen meta options panel.
toggleEvent: function() {
var panel = $( '#' + $( this ).attr( 'aria-controls' ) );
if ( panel.is(':visible') )
screenMeta.close( panel, $(this) );
screenMeta.open( panel, $(this) );
* Opens the screen meta options panel.
* @param {jQuery} panel The screen meta options panel div.
* @param {jQuery} button The toggle button.
open: function( panel, button ) {
$( '#screen-meta-links' ).find( '.screen-meta-toggle' ).not( button.parent() ).css( 'visibility', 'hidden' );
* Sets the focus to the meta options panel and adds the necessary CSS classes.
panel.slideDown( 'fast', function() {
panel.trigger( 'focus' );
button.addClass( 'screen-meta-active' ).attr( 'aria-expanded', true );
$document.trigger( 'screen:options:open' );
* Closes the screen meta options panel.
* @param {jQuery} panel The screen meta options panel div.
* @param {jQuery} button The toggle button.
close: function( panel, button ) {
* Hides the screen meta options panel.
panel.slideUp( 'fast', function() {
button.removeClass( 'screen-meta-active' ).attr( 'aria-expanded', false );
$('.screen-meta-toggle').css('visibility', '');
$document.trigger( 'screen:options:close' );
* Initializes the help tabs in the help panel.
* @param {Event} e The event object.
$('.contextual-help-tabs').on( 'click', 'a', function(e) {
// Don't do anything if the click is for the tab already showing.
if ( link.is('.active a') )
$('.contextual-help-tabs .active').removeClass('active');
link.parent('li').addClass('active');
panel = $( link.attr('href') );
$('.help-tab-content').not( panel ).removeClass('active').hide();
panel.addClass('active').show();
* Update custom permalink structure via buttons.
var permalinkStructureFocused = false,
$permalinkStructure = $( '#permalink_structure' ),
$permalinkStructureInputs = $( '.permalink-structure input:radio' ),
$permalinkCustomSelection = $( '#custom_selection' ),
$availableStructureTags = $( '.form-table.permalink-structure .available-structure-tags button' );
// Change permalink structure input when selecting one of the common structures.
$permalinkStructureInputs.on( 'change', function() {
if ( 'custom' === this.value ) {
$permalinkStructure.val( this.value );
// Update button states after selection.
$availableStructureTags.each( function() {
changeStructureTagButtonState( $( this ) );
$permalinkStructure.on( 'click input', function() {
$permalinkCustomSelection.prop( 'checked', true );
// Check if the permalink structure input field has had focus at least once.
$permalinkStructure.on( 'focus', function( event ) {
permalinkStructureFocused = true;
* Enables or disables a structure tag button depending on its usage.
* If the structure is already used in the custom permalink structure,
* @param {Object} button Button jQuery object.
function changeStructureTagButtonState( button ) {
if ( -1 !== $permalinkStructure.val().indexOf( button.text().trim() ) ) {
button.attr( 'data-label', button.attr( 'aria-label' ) );
button.attr( 'aria-label', button.attr( 'data-used' ) );
button.attr( 'aria-pressed', true );
button.addClass( 'active' );
} else if ( button.attr( 'data-label' ) ) {
button.attr( 'aria-label', button.attr( 'data-label' ) );
button.attr( 'aria-pressed', false );
button.removeClass( 'active' );
// Check initial button state.
$availableStructureTags.each( function() {
changeStructureTagButtonState( $( this ) );
// Observe permalink structure field and disable buttons of tags that are already present.
$permalinkStructure.on( 'change', function() {
$availableStructureTags.each( function() {
changeStructureTagButtonState( $( this ) );
$availableStructureTags.on( 'click', function() {
var permalinkStructureValue = $permalinkStructure.val(),
selectionStart = $permalinkStructure[ 0 ].selectionStart,
selectionEnd = $permalinkStructure[ 0 ].selectionEnd,
textToAppend = $( this ).text().trim(),
textToAnnounce = $( this ).attr( 'data-added' ),
// Remove structure tag if already part of the structure.
if ( -1 !== permalinkStructureValue.indexOf( textToAppend ) ) {
permalinkStructureValue = permalinkStructureValue.replace( textToAppend + '/', '' );
$permalinkStructure.val( '/' === permalinkStructureValue ? '' : permalinkStructureValue );
// Announce change to screen readers.
$( '#custom_selection_updated' ).text( textToAnnounce );
changeStructureTagButtonState( $( this ) );
// Input field never had focus, move selection to end of input.
if ( ! permalinkStructureFocused && 0 === selectionStart && 0 === selectionEnd ) {
selectionStart = selectionEnd = permalinkStructureValue.length;
$permalinkCustomSelection.prop( 'checked', true );
// Prepend and append slashes if necessary.
if ( '/' !== permalinkStructureValue.substr( 0, selectionStart ).substr( -1 ) ) {
textToAppend = '/' + textToAppend;
if ( '/' !== permalinkStructureValue.substr( selectionEnd, 1 ) ) {
textToAppend = textToAppend + '/';
// Insert structure tag at the specified position.
$permalinkStructure.val( permalinkStructureValue.substr( 0, selectionStart ) + textToAppend + permalinkStructureValue.substr( selectionEnd ) );
// Announce change to screen readers.
$( '#custom_selection_updated' ).text( textToAnnounce );
changeStructureTagButtonState( $( this ) );
// If input had focus give it back with cursor right after appended text.
if ( permalinkStructureFocused && $permalinkStructure[0].setSelectionRange ) {
newSelectionStart = ( permalinkStructureValue.substr( 0, selectionStart ) + textToAppend ).length;
$permalinkStructure[0].setSelectionRange( newSelectionStart, newSelectionStart );
$permalinkStructure.trigger( 'focus' );
$document.ready( function() {
var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
pageInput = $('input.current-page'),
currentPage = pageInput.val(),
isIOS = /iPhone|iPad|iPod/.test( navigator.userAgent ),
isAndroid = navigator.userAgent.indexOf( 'Android' ) !== -1,
$adminMenuWrap = $( '#adminmenuwrap' ),
$wpwrap = $( '#wpwrap' ),
$adminmenu = $( '#adminmenu' ),
$overlay = $( '#wp-responsive-overlay' ),
$toolbar = $( '#wp-toolbar' ),
$toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
$sortables = $('.meta-box-sortables'),
wpResponsiveActive = false,
$adminbar = $( '#wpadminbar' ),
pinnedMenuBottom = false,
window: $window.height(),
wpwrap: $wpwrap.height(),
adminbar: $adminbar.height(),
menu: $adminMenuWrap.height()
$headerEnd = $( '.wp-header-end' );
* Makes the fly-out submenu header clickable, when the menu is folded.
* @param {Event} e The event object.
$adminmenu.on('click.wp-submenu-head', '.wp-submenu-head', function(e){
$(e.target).parent().siblings('a').get(0).click();
* Collapses the admin menu.
$( '#collapse-button' ).on( 'click.collapse-menu', function() {
var viewportWidth = getViewportWidth() || 961;
// Reset any compensation for submenus near the bottom of the screen.
$('#adminmenu div.wp-submenu').css('margin-top', '');
if ( viewportWidth < 960 ) {
if ( $body.hasClass('auto-fold') ) {
$body.removeClass('auto-fold').removeClass('folded');
setUserSetting('unfold', 1);
setUserSetting('mfold', 'o');
$body.addClass('auto-fold');
setUserSetting('unfold', 0);
if ( $body.hasClass('folded') ) {
$body.removeClass('folded');
setUserSetting('mfold', 'o');
$body.addClass('folded');
setUserSetting('mfold', 'f');
$document.trigger( 'wp-collapse-menu', { state: menuState } );
* Handles the `aria-haspopup` attribute on the current menu item when it has a submenu.
function currentMenuItemHasPopup() {
var $current = $( 'a.wp-has-current-submenu' );
if ( 'folded' === menuState ) {
// When folded or auto-folded and not responsive view, the current menu item does have a fly-out sub-menu.
$current.attr( 'aria-haspopup', 'true' );
// When expanded or in responsive view, reset aria-haspopup.
$current.attr( 'aria-haspopup', 'false' );
$document.on( 'wp-menu-state-set wp-collapse-menu wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );
* Ensures an admin submenu is within the visual viewport.
* @param {jQuery} $menuItem The parent menu item containing the submenu.
function adjustSubmenu( $menuItem ) {
var bottomOffset, pageHeight, adjustment, theFold, menutop, wintop, maxtop,
$submenu = $menuItem.find( '.wp-submenu' );
menutop = $menuItem.offset().top;
wintop = $window.scrollTop();
maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar.
bottomOffset = menutop + $submenu.height() + 1; // Bottom offset of the menu.
pageHeight = $wpwrap.height(); // Height of the entire page.
adjustment = 60 + bottomOffset - pageHeight;
theFold = $window.height() + wintop - 50; // The fold.
if ( theFold < ( bottomOffset - adjustment ) ) {
adjustment = bottomOffset - theFold;
if ( adjustment > maxtop ) {
$submenu.css( 'margin-top', '-' + adjustment + 'px' );
$submenu.css( 'margin-top', '' );
if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // Touch screen device.
// iOS Safari works with touchstart, the rest work with click.
mobileEvent = isIOS ? 'touchstart' : 'click';
* Closes any open submenus when touch/click is not on the menu.
* @param {Event} e The event object.
$body.on( mobileEvent+'.wp-mobile-hover', function(e) {
if ( $adminmenu.data('wp-responsive') ) {
if ( ! $( e.target ).closest( '#adminmenu' ).length ) {
$adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
* Handles the opening or closing the submenu based on the mobile click|touch event.
* @param {Event} event The event object.
$adminmenu.find( 'a.wp-has-submenu' ).on( mobileEvent + '.wp-mobile-hover', function( event ) {
var $menuItem = $(this).parent();
if ( $adminmenu.data( 'wp-responsive' ) ) {
* Show the sub instead of following the link if:
* - the submenu is not open.
* - the submenu is not shown inline or the menu is not folded.
if ( ! $menuItem.hasClass( 'opensub' ) && ( ! $menuItem.hasClass( 'wp-menu-open' ) || $menuItem.width() < 40 ) ) {
adjustSubmenu( $menuItem );
$adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
$menuItem.addClass('opensub');
if ( ! isIOS && ! isAndroid ) {
$adminmenu.find( 'li.wp-has-submenu' ).hoverIntent({
* Opens the submenu when hovered over the menu item for desktops.
var $menuItem = $( this ),
$submenu = $menuItem.find( '.wp-submenu' ),