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