wp-includes/js/customize-preview-widgets.js

   1 (function( wp, $ ){
   2
   3         if ( ! wp || ! wp.customize ) { return; }
   4
   5         var api = wp.customize,
   6                 OldPreview;
   7
   8         /**
   9          * wp.customize.WidgetCustomizerPreview
  10          *
  11          */
  12         api.WidgetCustomizerPreview = {
  13                 renderedSidebars: {}, // @todo Make rendered a property of the Backbone model
  14                 renderedWidgets: {}, // @todo Make rendered a property of the Backbone model
  15                 registeredSidebars: [], // @todo Make a Backbone collection
  16                 registeredWidgets: {}, // @todo Make array, Backbone collection
  17                 widgetSelectors: [],
  18                 preview: null,
  19                 l10n: {},
  20
  21                 init: function () {
  22                         var self = this;
  23                         this.buildWidgetSelectors();
  24                         this.highlightControls();
  25
  26                         this.preview.bind( 'highlight-widget', self.highlightWidget );
  27                 },
  28
  29                 /**
  30                  * Calculate the selector for the sidebar's widgets based on the registered sidebar's info
  31                  */
  32                 buildWidgetSelectors: function () {
  33                         var self = this;
  34
  35                         $.each( this.registeredSidebars, function ( i, sidebar ) {
  36                                 var widgetTpl = [
  37                                                 sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''),
  38                                                 sidebar.before_title,
  39                                                 sidebar.after_title,
  40                                                 sidebar.after_widget
  41                                         ].join(''),
  42                                         emptyWidget,
  43                                         widgetSelector,
  44                                         widgetClasses;
  45
  46                                 emptyWidget = $(widgetTpl);
  47                                 widgetSelector = emptyWidget.prop('tagName');
  48                                 widgetClasses = emptyWidget.prop('className');
  49
  50                                 // Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.
  51                                 if ( ! widgetClasses ) {
  52                                         return;
  53                                 }
  54
  55                                 widgetClasses = widgetClasses.replace(/^\s+|\s+$/g, '');
  56
  57                                 if ( widgetClasses ) {
  58                                         widgetSelector += '.' + widgetClasses.split(/\s+/).join('.');
  59                                 }
  60                                 self.widgetSelectors.push(widgetSelector);
  61                         });
  62                 },
  63
  64                 /**
  65                  * Highlight the widget on widget updates or widget control mouse overs.
  66                  *
  67                  * @param  {string} widgetId ID of the widget.
  68                  */
  69                 highlightWidget: function( widgetId ) {
  70                         var $body = $( document.body ),
  71                                 $widget = $( '#' + widgetId );
  72
  73                         $body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
  74
  75                         $widget.addClass( 'widget-customizer-highlighted-widget' );
  76                         setTimeout( function () {
  77                                 $widget.removeClass( 'widget-customizer-highlighted-widget' );
  78                         }, 500 );
  79                 },
  80
  81                 /**
  82                  * Show a title and highlight widgets on hover. On shift+clicking
  83                  * focus the widget control.
  84                  */
  85                 highlightControls: function() {
  86                         var self = this,
  87                                 selector = this.widgetSelectors.join(',');
  88
  89                         $(selector).attr( 'title', this.l10n.widgetTooltip );
  90
  91                         $(document).on( 'mouseenter', selector, function () {
  92                                 self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
  93                         });
  94
  95                         // Open expand the widget control when shift+clicking the widget element
  96                         $(document).on( 'click', selector, function ( e ) {
  97                                 if ( ! e.shiftKey ) {
  98                                         return;
  99                                 }
 100                                 e.preventDefault();
 101
 102                                 self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
 103                         });
 104                 }
 105         };
 106
 107         /**
 108          * Capture the instance of the Preview since it is private
 109          */
 110         OldPreview = api.Preview;
 111         api.Preview = OldPreview.extend( {
 112                 initialize: function( params, options ) {
 113                         api.WidgetCustomizerPreview.preview = this;
 114                         OldPreview.prototype.initialize.call( this, params, options );
 115                 }
 116         } );
 117
 118         $(function () {
 119                 var settings = window._wpWidgetCustomizerPreviewSettings;
 120                 if ( ! settings ) {
 121                         return;
 122                 }
 123
 124                 $.extend( api.WidgetCustomizerPreview, settings );
 125
 126                 api.WidgetCustomizerPreview.init();
 127         });
 128
 129 })( window.wp, jQuery );