Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-25 22:35:02 +02:00
Code Issues Projects Releases Wiki Activity

Customizer: Add shift-click on nav menu items in preview to focus on corresponding nav menu item controls in pane.

Browse Source 
Add missing `params.completeCallback` to `MenuItemControl.focus()` for parity with `Control.focus()`. Also adds `params` to `MenuItemControl.expandForm`, `MenuItemControl.collapseForm()`, and `MenuItemControl.toggleForm()`.

Props MattGeri, westonruter.
Fixes #32681.

Built from https://develop.svn.wordpress.org/trunk@36383


git-svn-id: http://core.svn.wordpress.org/trunk@36350 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-01-22 21:21:26 +00:00
parent 196271e5b4
commit fb8544a0ac
7 changed files with 99 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/js/customize-controls.js
View File

@ -74,7 +74,7 @@
* @since 4.1.0
*
* @param {Object} [params]
* @param {Callback} [params.completeCallback]
* @param {Function} [params.completeCallback]
*/
focus = function ( params ) {
var construct, completeCallback, focus;

69
wp-admin/js/customize-nav-menus.js
View File

@ -1363,24 +1363,38 @@
/**
* Expand the menu item form control.
*
* @since 4.5.0 Added params.completeCallback.
*
* @param {Object} [params] - Optional params.
* @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
expandForm: function() {
this.toggleForm( true );
expandForm: function( params ) {
this.toggleForm( true, params );
},
/**
* Collapse the menu item form control.
*
* @since 4.5.0 Added params.completeCallback.
*
* @param {Object} [params] - Optional params.
* @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
collapseForm: function() {
this.toggleForm( false );
collapseForm: function( params ) {
this.toggleForm( false, params );
},
/**
* Expand or collapse the menu item control.
*
* @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
* @since 4.5.0 Added params.completeCallback.
*
* @param {boolean} [showOrHide] - If not supplied, will be inverse of current visibility
* @param {Object} [params] - Optional params.
* @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
*/
toggleForm: function( showOrHide ) {
toggleForm: function( showOrHide, params ) {
var self = this, $menuitem, $inside, complete;
$menuitem = this.container;
@ -1391,6 +1405,9 @@
// Already expanded or collapsed.
if ( $inside.is( ':visible' ) === showOrHide ) {
if ( params && params.completeCallback ) {
params.completeCallback();
}
return;
}
@ -1407,6 +1424,10 @@
.removeClass( 'menu-item-edit-inactive' )
.addClass( 'menu-item-edit-active' );
self.container.trigger( 'expanded' );
if ( params && params.completeCallback ) {
params.completeCallback();
}
};
$menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
@ -1419,6 +1440,10 @@
.addClass( 'menu-item-edit-inactive' )
.removeClass( 'menu-item-edit-active' );
self.container.trigger( 'collapsed' );
if ( params && params.completeCallback ) {
params.completeCallback();
}
};
self.container.trigger( 'collapse' );
@ -1431,14 +1456,31 @@
/**
* Expand the containing menu section, expand the form, and focus on
* the first input in the control.
*
* @since 4.5.0 Added params.completeCallback.
*
* @param {Object} [params] - Params object.
* @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
*/
focus: function() {
var control = this, focusable;
focus: function( params ) {
params = params || {};
var control = this, originalCompleteCallback = params.completeCallback;
control.expandControlSection();
control.expandForm();
// Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
focusable.first().focus();
params.completeCallback = function() {
var focusable;
// Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
focusable.first().focus();
if ( originalCompleteCallback ) {
originalCompleteCallback();
}
};
control.expandForm( params );
},
/**
@ -2445,6 +2487,9 @@
api.previewer.bind( 'refresh', function() {
api.previewer.refresh();
});
// Open and focus menu control.
api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
} );
/**

4
wp-admin/js/customize-nav-menus.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
wp-includes/class-wp-customize-nav-menus.php
View File

@ -946,6 +946,9 @@ final class WP_Customize_Nav_Menus {
),
'previewCustomizeNonce' => wp_create_nonce( 'preview-customize_' . $this->manager->get_stylesheet() ),
'navMenuInstanceArgs' => $this->preview_nav_menu_instance_args,
'l10n' => array(
'editNavMenuItemTooltip' => __( 'Shift-click to edit this menu item.' ),
),
);
printf( '<script>var _wpCustomizePreviewNavMenusExports = %s;</script>', wp_json_encode( $exports ) );

35
wp-includes/js/customize-preview-nav-menus.js
View File

@ -19,7 +19,8 @@
active: false,
stylesheet: ''
},
navMenuInstanceArgs: {}
navMenuInstanceArgs: {},
l10n: {}
};
api.MenusCustomizerPreview = {
@ -63,6 +64,8 @@
}
}
} );
self.highlightControls();
},
/**
@ -272,6 +275,36 @@
}, this ),
refreshDebounceDelay
);
},
/**
* Connect nav menu items with their corresponding controls in the pane.
*/
highlightControls: function() {
var selector = '.menu-item[id^=menu-item-]',
addTooltips;
// Open expand the menu item control when shift+clicking the menu item
$( document ).on( 'click', selector, function( e ) {
var navMenuItemParts;
if ( ! e.shiftKey ) {
return;
}
navMenuItemParts = $( this ).attr( 'id' ).match( /^menu-item-(\d+)$/ );
if ( navMenuItemParts ) {
e.preventDefault();
e.stopPropagation(); // Make sure a sub-nav menu item will get focused instead of parent items.
api.preview.send( 'focus-nav-menu-item-control', parseInt( navMenuItemParts[1], 10 ) );
}
});
addTooltips = function( e, params ) {
params.newContainer.find( selector ).attr( 'title', settings.l10n.editNavMenuItemTooltip );
};
addTooltips( null, { newContainer: $( document.body ) } );
$( document ).on( 'customize-preview-menu-refreshed', addTooltips );
}
};

2
wp-includes/js/customize-preview-nav-menus.min.js vendored
View File

@ -1 +1 @@
!function(a,b,c){"use strict";if(c&&c.customize){var d=c.customize,e={},f=200,g={},h={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{}};d.MenusCustomizerPreview={init:function(){var a=this,c={};g=b.extend({},h),"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&b.extend(g,_wpCustomizePreviewNavMenusExports),d.each(function(b,d){b.id=d,c[b.id]=!0,a.bindListener(b)}),d.preview.bind("setting",function(b){var e,f,g;b=b.slice(),e=b.shift(),f=b.shift(),g=d(e),g||(g=d.create(e,f)),g.id||(g.id=e),c[g.id]||(c[g.id]=!0,a.bindListener(g)&&g.callbacks.fireWith(g,[g(),null]))})},bindListener:function(a){var c,d;return(c=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(c[1],10),a.bind(this.onChangeNavMenuSetting),!0):(c=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(c[1],10),a.bind(this.onChangeNavMenuItemSetting),!0):(c=a.id.match(/^nav_menu_locations\[(.+?)]/),c?(d=c[1],a.bind(b.bind(function(){this.refreshMenuLocation(d)},this)),!0):!1)},onChangeNavMenuSetting:function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");d.MenusCustomizerPreview.refreshMenu(a.navMenuId)},onChangeNavMenuItemSetting:function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||d.MenusCustomizerPreview.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&d.MenusCustomizerPreview.refreshMenu(a.nav_menu_term_id)},refreshMenu:function(a){var c=[];d.each(function(b,d){var e=d.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&c.push(e[1])}),b.each(g.navMenuInstanceArgs,function(d,e){(a===d.menu||-1!==b.indexOf(c,d.theme_location))&&this.refreshMenuInstanceDebounced(e)},this)},refreshMenuLocation:function(a){var c=!1;b.each(g.navMenuInstanceArgs,function(b,d){a===b.theme_location&&(this.refreshMenuInstanceDebounced(d),c=!0)},this),c||d.preview.send("refresh")},refreshMenuInstance:function(e){var f,h,i,j,k,l,m,n;if(!g.navMenuInstanceArgs[e])throw new Error("unknown_instance_number");return m=g.navMenuInstanceArgs[e],n="partial-refreshable-nav-menu-"+String(e),j=a("."+n),b.isNumber(m.menu)?h=m.menu:m.theme_location&&d.has("nav_menu_locations["+m.theme_location+"]")&&(h=d("nav_menu_locations["+m.theme_location+"]").get()),h&&m.can_partial_refresh&&0!==j.length?(h=parseInt(h,10),f={nonce:g.previewCustomizeNonce,wp_customize:"on"},g.theme.active||(f.theme=g.theme.stylesheet),f[g.renderQueryVar]="1",i={},d.each(function(a,b){var c=a.get(),d=!1;d=d||/^nav_menu_locations\[/.test(b),d=d||b==="nav_menu["+String(h)+"]",d=d||/^nav_menu_item\[/.test(b)&&(!1===c||h===c.nav_menu_term_id),d&&(i[b]=c)}),f.customized=JSON.stringify(i),f[g.renderNoncePostKey]=g.renderNonceValue,l=a.extend({},m),f.wp_nav_menu_args_hash=l.args_hash,delete l.args_hash,f.wp_nav_menu_args=JSON.stringify(l),j.addClass("customize-partial-refreshing"),k=c.ajax.send(null,{data:f,url:g.requestUri}),void k.done(function(b){if(!1===b)return void d.preview.send("refresh");var c,f=j;j=a(b),j.addClass(n),j.addClass("partial-refreshable-nav-menu customize-partial-refreshing"),f.replaceWith(j),c={instanceNumber:e,wpNavArgs:l,wpNavMenuArgs:l,oldContainer:f,newContainer:j},j.removeClass("customize-partial-refreshing"),a(document).trigger("customize-preview-menu-refreshed",[c])})):void d.preview.send("refresh")},refreshMenuInstanceDebounced:function(a){e[a]&&clearTimeout(e[a]),e[a]=setTimeout(b.bind(function(){this.refreshMenuInstance(a)},this),f)}},d.bind("preview-ready",function(){d.preview.bind("active",function(){d.MenusCustomizerPreview.init()})})}}(jQuery,_,wp);
!function(a,b,c){"use strict";if(c&&c.customize){var d=c.customize,e={},f=200,g={},h={renderQueryVar:null,renderNonceValue:null,renderNoncePostKey:null,previewCustomizeNonce:null,requestUri:"/",theme:{active:!1,stylesheet:""},navMenuInstanceArgs:{},l10n:{}};d.MenusCustomizerPreview={init:function(){var a=this,c={};g=b.extend({},h),"undefined"!=typeof _wpCustomizePreviewNavMenusExports&&b.extend(g,_wpCustomizePreviewNavMenusExports),d.each(function(b,d){b.id=d,c[b.id]=!0,a.bindListener(b)}),d.preview.bind("setting",function(b){var e,f,g;b=b.slice(),e=b.shift(),f=b.shift(),g=d(e),g||(g=d.create(e,f)),g.id||(g.id=e),c[g.id]||(c[g.id]=!0,a.bindListener(g)&&g.callbacks.fireWith(g,[g(),null]))}),a.highlightControls()},bindListener:function(a){var c,d;return(c=a.id.match(/^nav_menu\[(-?\d+)]$/))?(a.navMenuId=parseInt(c[1],10),a.bind(this.onChangeNavMenuSetting),!0):(c=a.id.match(/^nav_menu_item\[(-?\d+)]$/))?(a.navMenuItemId=parseInt(c[1],10),a.bind(this.onChangeNavMenuItemSetting),!0):(c=a.id.match(/^nav_menu_locations\[(.+?)]/),c?(d=c[1],a.bind(b.bind(function(){this.refreshMenuLocation(d)},this)),!0):!1)},onChangeNavMenuSetting:function(){var a=this;if(!a.navMenuId)throw new Error("Expected navMenuId property to be set.");d.MenusCustomizerPreview.refreshMenu(a.navMenuId)},onChangeNavMenuItemSetting:function(a,b){!b||!b.nav_menu_term_id||a&&b.nav_menu_term_id===a.nav_menu_term_id||d.MenusCustomizerPreview.refreshMenu(b.nav_menu_term_id),a&&a.nav_menu_term_id&&d.MenusCustomizerPreview.refreshMenu(a.nav_menu_term_id)},refreshMenu:function(a){var c=[];d.each(function(b,d){var e=d.match(/^nav_menu_locations\[(.+?)]/);e&&a===b()&&c.push(e[1])}),b.each(g.navMenuInstanceArgs,function(d,e){(a===d.menu||-1!==b.indexOf(c,d.theme_location))&&this.refreshMenuInstanceDebounced(e)},this)},refreshMenuLocation:function(a){var c=!1;b.each(g.navMenuInstanceArgs,function(b,d){a===b.theme_location&&(this.refreshMenuInstanceDebounced(d),c=!0)},this),c||d.preview.send("refresh")},refreshMenuInstance:function(e){var f,h,i,j,k,l,m,n;if(!g.navMenuInstanceArgs[e])throw new Error("unknown_instance_number");return m=g.navMenuInstanceArgs[e],n="partial-refreshable-nav-menu-"+String(e),j=a("."+n),b.isNumber(m.menu)?h=m.menu:m.theme_location&&d.has("nav_menu_locations["+m.theme_location+"]")&&(h=d("nav_menu_locations["+m.theme_location+"]").get()),h&&m.can_partial_refresh&&0!==j.length?(h=parseInt(h,10),f={nonce:g.previewCustomizeNonce,wp_customize:"on"},g.theme.active||(f.theme=g.theme.stylesheet),f[g.renderQueryVar]="1",i={},d.each(function(a,b){var c=a.get(),d=!1;d=d||/^nav_menu_locations\[/.test(b),d=d||b==="nav_menu["+String(h)+"]",d=d||/^nav_menu_item\[/.test(b)&&(!1===c||h===c.nav_menu_term_id),d&&(i[b]=c)}),f.customized=JSON.stringify(i),f[g.renderNoncePostKey]=g.renderNonceValue,l=a.extend({},m),f.wp_nav_menu_args_hash=l.args_hash,delete l.args_hash,f.wp_nav_menu_args=JSON.stringify(l),j.addClass("customize-partial-refreshing"),k=c.ajax.send(null,{data:f,url:g.requestUri}),void k.done(function(b){if(!1===b)return void d.preview.send("refresh");var c,f=j;j=a(b),j.addClass(n),j.addClass("partial-refreshable-nav-menu customize-partial-refreshing"),f.replaceWith(j),c={instanceNumber:e,wpNavArgs:l,wpNavMenuArgs:l,oldContainer:f,newContainer:j},j.removeClass("customize-partial-refreshing"),a(document).trigger("customize-preview-menu-refreshed",[c])})):void d.preview.send("refresh")},refreshMenuInstanceDebounced:function(a){e[a]&&clearTimeout(e[a]),e[a]=setTimeout(b.bind(function(){this.refreshMenuInstance(a)},this),f)},highlightControls:function(){var b,c=".menu-item[id^=menu-item-]";a(document).on("click",c,function(b){var c;b.shiftKey&&(c=a(this).attr("id").match(/^menu-item-(\d+)$/),c&&(b.preventDefault(),b.stopPropagation(),d.preview.send("focus-nav-menu-item-control",parseInt(c[1],10))))}),b=function(a,b){b.newContainer.find(c).attr("title",g.l10n.editNavMenuItemTooltip)},b(null,{newContainer:a(document.body)}),a(document).on("customize-preview-menu-refreshed",b)}},d.bind("preview-ready",function(){d.preview.bind("active",function(){d.MenusCustomizerPreview.init()})})}}(jQuery,_,wp);

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.5-alpha-36382';
$wp_version = '4.5-alpha-36383';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.