Widget Customizer: Use postMessage to highlight widgets in preview or sections/controls in Customizer.
fixes #27622. git-svn-id: https://develop.svn.wordpress.org/trunk@27892 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
bb7c7e06c0
commit
11f6751d51
|
@ -140,6 +140,12 @@ var WidgetCustomizer = ( function ($) {
|
||||||
*/
|
*/
|
||||||
self.init = function () {
|
self.init = function () {
|
||||||
this.availableWidgetsPanel.setup();
|
this.availableWidgetsPanel.setup();
|
||||||
|
|
||||||
|
// Highlight widget control
|
||||||
|
this.previewer.bind( 'highlight-widget-control', self.highlightWidgetFormControl );
|
||||||
|
|
||||||
|
// Open and focus widget control
|
||||||
|
this.previewer.bind( 'focus-widget-control', self.focusWidgetFormControl );
|
||||||
};
|
};
|
||||||
wp.customize.bind( 'ready', function () {
|
wp.customize.bind( 'ready', function () {
|
||||||
self.init();
|
self.init();
|
||||||
|
@ -924,13 +930,14 @@ var WidgetCustomizer = ( function ($) {
|
||||||
|
|
||||||
// Highlight whenever hovering or clicking over the form
|
// Highlight whenever hovering or clicking over the form
|
||||||
control.container.on( 'mouseenter click', function () {
|
control.container.on( 'mouseenter click', function () {
|
||||||
control.highlightPreviewWidget();
|
control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
|
||||||
|
//control.highlightPreviewWidget();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Highlight when the setting is updated
|
// Highlight when the setting is updated
|
||||||
control.setting.bind( function () {
|
control.setting.bind( function () {
|
||||||
control.scrollPreviewWidgetIntoView();
|
control.setting.previewer.send( 'highlight-widget', control.params.widget_id );
|
||||||
control.highlightPreviewWidget();
|
//control.highlightPreviewWidget();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Highlight when the widget form is expanded
|
// Highlight when the widget form is expanded
|
||||||
|
@ -1481,16 +1488,6 @@ var WidgetCustomizer = ( function ($) {
|
||||||
move_widget_area.toggleClass( 'active', toggle );
|
move_widget_area.toggleClass( 'active', toggle );
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Inverse of WidgetCustomizer.getControlInstanceForWidget
|
|
||||||
* @return {jQuery}
|
|
||||||
*/
|
|
||||||
getPreviewWidgetElement: function () {
|
|
||||||
var control = this,
|
|
||||||
widget_customizer_preview = self.getPreviewWindow().wp.customize.WidgetCustomizerPreview;
|
|
||||||
return widget_customizer_preview.getWidgetElement( control.params.widget_id );
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Inside of the customizer preview, scroll the widget into view
|
* Inside of the customizer preview, scroll the widget into view
|
||||||
*/
|
*/
|
||||||
|
@ -1515,21 +1512,6 @@ var WidgetCustomizer = ( function ($) {
|
||||||
setTimeout( function () {
|
setTimeout( function () {
|
||||||
target_element.removeClass( 'widget-customizer-highlighted' );
|
target_element.removeClass( 'widget-customizer-highlighted' );
|
||||||
}, 500 );
|
}, 500 );
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the widget-customizer-highlighted-widget class to the widget for 500ms
|
|
||||||
*/
|
|
||||||
highlightPreviewWidget: function () {
|
|
||||||
var control = this, widget_el, root_el;
|
|
||||||
|
|
||||||
widget_el = control.getPreviewWidgetElement();
|
|
||||||
root_el = widget_el.closest( 'html' );
|
|
||||||
root_el.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
|
|
||||||
widget_el.addClass( 'widget-customizer-highlighted-widget' );
|
|
||||||
setTimeout( function () {
|
|
||||||
widget_el.removeClass( 'widget-customizer-highlighted-widget' );
|
|
||||||
}, 500 );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
@ -1546,6 +1528,32 @@ var WidgetCustomizer = ( function ($) {
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Highlight a widget control.
|
||||||
|
*
|
||||||
|
* @param {string} widgetId
|
||||||
|
*/
|
||||||
|
self.highlightWidgetFormControl = function( widgetId ) {
|
||||||
|
var control = self.getWidgetFormControlForWidget( widgetId );
|
||||||
|
|
||||||
|
if ( control ) {
|
||||||
|
control.highlightSectionAndControl();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Focus a widget control.
|
||||||
|
*
|
||||||
|
* @param {string} widgetId
|
||||||
|
*/
|
||||||
|
self.focusWidgetFormControl = function( widgetId ) {
|
||||||
|
var control = self.getWidgetFormControlForWidget( widgetId );
|
||||||
|
|
||||||
|
if ( control ) {
|
||||||
|
control.focus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Given a widget control, find the sidebar widgets control that contains it.
|
* Given a widget control, find the sidebar widgets control that contains it.
|
||||||
* @param {string} widget_id
|
* @param {string} widget_id
|
||||||
|
|
|
@ -27,6 +27,8 @@
|
||||||
self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
|
self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
|
||||||
self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
|
self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
this.preview.bind( 'highlight-widget', self.highlightWidget );
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -58,31 +60,34 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Obtain a rendered widget element. Assumes standard practice of using
|
* Highlight the widget on widget updates or widget control mouse overs.
|
||||||
* the widget ID as the ID for the DOM element. To eliminate this
|
|
||||||
* assumption, additional data-* attributes would need to be injected
|
|
||||||
* onto the rendered widget root element.
|
|
||||||
*
|
*
|
||||||
* @param {String} widget_id
|
* @param {string} widgetId ID of the widget.
|
||||||
* @return {jQuery}
|
|
||||||
*/
|
*/
|
||||||
getWidgetElement: function ( widget_id ) {
|
highlightWidget: function( widgetId ) {
|
||||||
return $( '#' + widget_id );
|
var $body = $( document.body ),
|
||||||
|
$widget = $( '#' + widgetId );
|
||||||
|
|
||||||
|
$body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
|
||||||
|
|
||||||
|
$widget.addClass( 'widget-customizer-highlighted-widget' );
|
||||||
|
setTimeout( function () {
|
||||||
|
$widget.removeClass( 'widget-customizer-highlighted-widget' );
|
||||||
|
}, 500 );
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
* Show a title and highlight widgets on hover. On shift+clicking
|
||||||
|
* focus the widget control.
|
||||||
*/
|
*/
|
||||||
highlightControls: function() {
|
highlightControls: function() {
|
||||||
var selector = this.widgetSelectors.join(',');
|
var self = this,
|
||||||
|
selector = this.widgetSelectors.join(',');
|
||||||
|
|
||||||
$(selector).attr( 'title', this.l10n.widgetTooltip );
|
$(selector).attr( 'title', this.l10n.widgetTooltip );
|
||||||
|
|
||||||
$(document).on( 'mouseenter', selector, function () {
|
$(document).on( 'mouseenter', selector, function () {
|
||||||
var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
|
self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
|
||||||
if ( control ) {
|
|
||||||
control.highlightSectionAndControl();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Open expand the widget control when shift+clicking the widget element
|
// Open expand the widget control when shift+clicking the widget element
|
||||||
|
@ -91,10 +96,8 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
|
|
||||||
if ( control ) {
|
self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
|
||||||
control.focus();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue