X-Git-Url: https://scripts.mit.edu/gitweb/autoinstallsdev/wordpress.git/blobdiff_plain/b22765f41bf0b2021b9beb9120ee0ac91fa89292..e3ff8f35458a959c1879c0a4976701ed8dcfe651:/wp-includes/js/customize-selective-refresh.js diff --git a/wp-includes/js/customize-selective-refresh.js b/wp-includes/js/customize-selective-refresh.js index ec51058e..d3b81db6 100644 --- a/wp-includes/js/customize-selective-refresh.js +++ b/wp-includes/js/customize-selective-refresh.js @@ -6,13 +6,13 @@ wp.customize.selectiveRefresh = ( function( $, api ) { self = { ready: $.Deferred(), + editShortcutVisibility: new api.Value(), data: { partials: {}, renderQueryVar: '', l10n: { shiftClickToEdit: '' - }, - refreshBuffer: 250 + } }, currentRequest: null }; @@ -43,7 +43,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) { id: null, - /** + /** * Constructor. * * @since 4.5.0 @@ -83,8 +83,9 @@ wp.customize.selectiveRefresh = ( function( $, api ) { */ ready: function() { var partial = this; - _.each( _.pluck( partial.placements(), 'container' ), function( container ) { - $( container ).attr( 'title', self.data.l10n.shiftClickToEdit ); + _.each( partial.placements(), function( placement ) { + $( placement.container ).attr( 'title', self.data.l10n.shiftClickToEdit ); + partial.createEditShortcutForPlacement( placement ); } ); $( document ).on( 'click', partial.params.selector, function( e ) { if ( ! e.shiftKey ) { @@ -99,6 +100,141 @@ wp.customize.selectiveRefresh = ( function( $, api ) { } ); }, + /** + * Create and show the edit shortcut for a given partial placement container. + * + * @since 4.7.0 + * @access public + * + * @param {Placement} placement The placement container element. + * @returns {void} + */ + createEditShortcutForPlacement: function( placement ) { + var partial = this, $shortcut, $placementContainer, illegalAncestorSelector, illegalContainerSelector; + if ( ! placement.container ) { + return; + } + $placementContainer = $( placement.container ); + illegalAncestorSelector = 'head'; + illegalContainerSelector = 'area, audio, base, bdi, bdo, br, button, canvas, col, colgroup, command, datalist, embed, head, hr, html, iframe, img, input, keygen, label, link, map, math, menu, meta, noscript, object, optgroup, option, param, progress, rp, rt, ruby, script, select, source, style, svg, table, tbody, textarea, tfoot, thead, title, tr, track, video, wbr'; + if ( ! $placementContainer.length || $placementContainer.is( illegalContainerSelector ) || $placementContainer.closest( illegalAncestorSelector ).length ) { + return; + } + $shortcut = partial.createEditShortcut(); + $shortcut.on( 'click', function( event ) { + event.preventDefault(); + event.stopPropagation(); + partial.showControl(); + } ); + partial.addEditShortcutToPlacement( placement, $shortcut ); + }, + + /** + * Add an edit shortcut to the placement container. + * + * @since 4.7.0 + * @access public + * + * @param {Placement} placement The placement for the partial. + * @param {jQuery} $editShortcut The shortcut element as a jQuery object. + * @returns {void} + */ + addEditShortcutToPlacement: function( placement, $editShortcut ) { + var $placementContainer = $( placement.container ); + $placementContainer.prepend( $editShortcut ); + if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) { + $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' ); + } + }, + + /** + * Return the unique class name for the edit shortcut button for this partial. + * + * @since 4.7.0 + * @access public + * + * @return {string} Partial ID converted into a class name for use in shortcut. + */ + getEditShortcutClassName: function() { + var partial = this, cleanId; + cleanId = partial.id.replace( /]/g, '' ).replace( /\[/g, '-' ); + return 'customize-partial-edit-shortcut-' + cleanId; + }, + + /** + * Return the appropriate translated string for the edit shortcut button. + * + * @since 4.7.0 + * @access public + * + * @return {string} Tooltip for edit shortcut. + */ + getEditShortcutTitle: function() { + var partial = this, l10n = self.data.l10n; + switch ( partial.getType() ) { + case 'widget': + return l10n.clickEditWidget; + case 'blogname': + return l10n.clickEditTitle; + case 'blogdescription': + return l10n.clickEditTitle; + case 'nav_menu': + return l10n.clickEditMenu; + default: + return l10n.clickEditMisc; + } + }, + + /** + * Return the type of this partial + * + * Will use `params.type` if set, but otherwise will try to infer type from settingId. + * + * @since 4.7.0 + * @access public + * + * @return {string} Type of partial derived from type param or the related setting ID. + */ + getType: function() { + var partial = this, settingId; + settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown'; + if ( partial.params.type ) { + return partial.params.type; + } + if ( settingId.match( /^nav_menu_instance\[/ ) ) { + return 'nav_menu'; + } + if ( settingId.match( /^widget_.+\[\d+]$/ ) ) { + return 'widget'; + } + return settingId; + }, + + /** + * Create an edit shortcut button for this partial. + * + * @since 4.7.0 + * @access public + * + * @return {jQuery} The edit shortcut button element. + */ + createEditShortcut: function() { + var partial = this, shortcutTitle, $buttonContainer, $button, $image; + shortcutTitle = partial.getEditShortcutTitle(); + $buttonContainer = $( '', { + 'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName() + } ); + $button = $( '