Merge the Widgets Area Chooser feature plugin. First run, see #25821

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


git-svn-id: http://core.svn.wordpress.org/trunk@25979 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin.css

@@ -9051,6 +9051,121 @@ a.widget-control-edit {
 	cursor: default;
 }
 
+
+/* Widgets Area Chooser merge */
+.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
+.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
+	transition: opacity 0.2s ease-in-out;
+}
+
+.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
+.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
+	/* -webkit-filter: blur(1px); */
+	opacity: 0.2;
+	pointer-events: none;
+}
+
+.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
+	/* -webkit-filter: none; */
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question .widget-top {
+	background: #fff;
+	border: 1px solid #bbb;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+#widgets-chooser {
+	display: none;
+	margin: auto;
+	padding-bottom: 10px;
+	max-width: 400px;
+}
+
+#widgets-chooser h3 {
+	font-size: 14px;
+	margin: 15px 0;
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars {
+	margin: 0 0 20px 0;
+	list-style-type: none;
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars li {
+	padding: 10px 15px 10px 35px;
+	background: #fff;
+	border: 1px solid #ccc;
+	border-bottom: none;
+	margin: 0;
+	cursor: pointer;
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars li:hover {
+	background: rgba(255,255,255,0.7);
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
+	background: #1075a0;
+	color: #fff;
+	position: relative;
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
+	content: '\f147';
+	display: block;
+	-webkit-font-smoothing: antialiased;
+	font: normal 26px/1 'dashicons';
+	position: absolute;
+	top: 7px;
+	left: 5px;
+}
+
+#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
+	border-bottom: 1px solid #ccc;
+}
+
+#widgets-chooser select {
+	width: 100%;
+	margin-bottom: 20px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#widgets-chooser .sidebar-radios {
+	text-align: left;
+	margin: 0 20px 20px 20px;
+}
+
+#widgets-chooser .sidebar-radios li {
+	margin-top: 15px;
+}
+
+#widgets-chooser .sidebar-radios label {
+	font-size: 15px;
+}
+
+#widgets-chooser .sidebar-radios input {
+	margin-right: 10px;
+}
+
+#widgets-chooser .widgets-chooser-actions {
+	clear: both;
+	text-align: center;
+}
+
+#widgets-chooser button {
+	margin-right: 5px;
+}
+
+#available-widgets .widget .widget-top {
+	cursor: pointer;
+}
+/* End Widgets Area Chooser merge */
+
 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
 .ui-sortable,
 .ui-draggable {

wp-admin/js/widgets.js

@@ -1,20 +1,25 @@
+/*global ajaxurl, isRtl */
 var wpWidgets;
 (function($) {
 
 wpWidgets = {
 
 	init : function() {
-		var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
+		var rem, the_id,
-			margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
+			self = this,
+			chooser = $('#widgets-chooser'),
+			selectSidebar = chooser.find('.widgets-chooser-sidebars'),
+			sidebars = $('div.widgets-sortables'),
+			isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ),
+			margin = ( isRTL ? 'marginRight' : 'marginLeft' );
 
-		$('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click(function(){
+		$('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
-			var c = $(this).siblings('.widgets-sortables'), p = $(this).parent();
+			var $this = $(this), parent = $this.parent();
-			if ( !p.hasClass('closed') ) {
+			if ( parent.hasClass('closed') ) {
-				c.sortable('disable');
+				parent.removeClass('closed');
-				p.addClass('closed');
+				$this.siblings('.widgets-sortables').sortable('refresh');
 			} else {
-				p.removeClass('closed');
+				parent.addClass('closed');
-				c.sortable('enable').sortable('refresh');
 			}
 		});
 
@@ -41,7 +46,7 @@ wpWidgets = {
 
 				if ( inside.is(':hidden') ) {
 					if ( w > 250 && inside.closest('div.widgets-sortables').length ) {
-						css['width'] = w + 30 + 'px';
+						css.width = w + 30 + 'px';
 						if ( inside.closest('div.widget-liquid-right').length )
 							css[margin] = 235 - w + 'px';
 						widget.css(css);
@@ -83,7 +88,7 @@ wpWidgets = {
 				ui.helper.find('div.widget-description').hide();
 				the_id = this.id;
 			},
-			stop: function(e,ui) {
+			stop: function() {
 				if ( rem )
 					$(rem).hide();
 
@@ -121,12 +126,12 @@ wpWidgets = {
 				the_id = '';
 
 				if ( add ) {
-					if ( 'multi' == add ) {
+					if ( 'multi' === add ) {
 						ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
 						ui.item.attr( 'id', id.replace('__i__', n) );
 						n++;
 						$('div#' + id).find('input.multi_number').val(n);
-					} else if ( 'single' == add ) {
+					} else if ( 'single' === add ) {
 						ui.item.attr( 'id', 'new-' + id );
 						rem = 'div#' + id;
 					}
@@ -140,19 +145,19 @@ wpWidgets = {
 			receive: function(e, ui) {
 				var sender = $(ui.sender);
 
-				if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') != -1 )
+				if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 )
 					sender.sortable('cancel');
 
-				if ( sender.attr('id').indexOf('orphaned_widgets') != -1 && !sender.children('.widget').length ) {
+				if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
 					sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
 				}
 			}
-		}).sortable('option', 'connectWith', 'div.widgets-sortables').parent().filter('.closed').children('.widgets-sortables').sortable('disable');
+		}).sortable('option', 'connectWith', 'div.widgets-sortables');
 
 		$('#available-widgets').droppable({
 			tolerance: 'pointer',
 			accept: function(o){
-				return $(o).parent().attr('id') != 'widget-list';
+				return $(o).parent().attr('id') !== 'widget-list';
 			},
 			drop: function(e,ui) {
 				ui.draggable.addClass('deleting');
@@ -172,6 +177,54 @@ wpWidgets = {
 				$('#removing-widget').hide().children('span').html('');
 			}
 		});
+
+		// Area Chooser
+		$( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
+			var $element = $( element ),
+				name = $element.find( '.sidebar-name h3' ).text(),
+				id = $element.find( '.widgets-sortables' ).attr( 'id' ),
+				li = $('<li tabindex="0">').text( $.trim( name ) );
+
+			if ( index === 0 ) {
+				li.addClass( 'widgets-chooser-selected' );
+			}
+
+			selectSidebar.append( li );
+			li.data( 'sidebarId', id );
+		});
+
+		$( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
+			var widget = $(this).closest( '.widget' );
+
+			if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
+				self.closeChooser();
+			} else {
+				// Open the chooser
+				self.clearWidgetSelection();
+				$( '#widgets-left' ).addClass( 'chooser' );
+				widget.addClass( 'widget-in-question' );
+
+				widget.after( chooser );
+				chooser.slideDown( 200, function() {
+					selectSidebar.find('.widgets-chooser-selected').focus();
+				});
+			}
+		});
+
+		// Add event handlers
+		chooser.on( 'click.widgets-chooser', function( event ) {
+			var $target = $( event.target );
+
+			if ( $target.hasClass('button-primary') ) {
+				self.addWidget( chooser );
+				self.closeChooser();
+			} else if ( $target.hasClass('button-secondary') ) {
+				self.closeChooser();
+			} else if ( $target.is('.widgets-chooser-sidebars li') ) {
+				chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
+				$target.addClass( 'widgets-chooser-selected' );
+			}
+		});
 	},
 
 	saveOrder : function(sb) {
@@ -208,7 +261,7 @@ wpWidgets = {
 		};
 
 		if ( del )
-			a['delete_widget'] = 1;
+			a.delete_widget = 1;
 
 		data += '&' + $.param(a);
 
@@ -219,7 +272,7 @@ wpWidgets = {
 				if ( !$('input.widget_number', widget).val() ) {
 					id = $('input.widget-id', widget).val();
 					$('#available-widgets').find('input.widget-id').each(function(){
-						if ( $(this).val() == id )
+						if ( $(this).val() === id )
 							$(this).closest('div.widget').show();
 					});
 				}
@@ -272,7 +325,7 @@ wpWidgets = {
 	fixLabels : function(widget) {
 		widget.children('.widget-inside').find('label').each(function(){
 			var f = $(this).attr('for');
-			if ( f && f == $('input', this).attr('id') )
+			if ( f && f === $('input', this).attr('id') )
 				$(this).removeAttr('for');
 		});
 	},
@@ -281,9 +334,69 @@ wpWidgets = {
 		widget.children('.widget-inside').slideUp('fast', function(){
 			widget.css({'width':'', margin:''});
 		});
+	},
+
+	addWidget: function( chooser ) {
+		var widget = $('#available-widgets').find('.widget-in-question').clone(),
+			widgetId = widget.attr('id'),
+			add = widget.find( 'input.add_new' ).val(),
+			n = widget.find( 'input.multi_number' ).val(),
+			sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
+			sidebar = $( '#' + sidebarId );
+
+		if ( 'multi' === add ) {
+			widget.html(
+				widget.html().replace( /<[^<>]+>/g, function(m) {
+					return m.replace( /__i__|%i%/g, n );
+				})
+			);
+
+			widget.attr( 'id', widgetId.replace( '__i__', n ) );
+			n++;
+			$( '#' + widgetId ).find('input.multi_number').val(n);
+		} else if ( 'single' === add ) {
+			widget.attr( 'id', 'new-' + widgetId );
+			$( '#' + widgetId ).hide();
+		}
+
+		// Open the widgets container
+		sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
+		sidebar.sortable('refresh');
+
+		// Change for MP6
+		// widget.prependTo( sidebar );
+		sidebar.find( '.sidebar-description' ).after( widget );
+
+		wpWidgets.save( widget, 0, 0, 1 );
+		// No longer "new" widget
+		widget.find( 'input.add_new' ).val('');
+
+		$( 'html, body' ).animate({
+			scrollTop: sidebar.offset().top - 130
+		}, 200 );
+
+		window.setTimeout( function() {
+			// Cannot use a callback in the animation above as it fires twice,
+			// have to queue this "by hand".
+			widget.find( '.widget-title' ).trigger('click');
+		}, 250 );
+	},
+
+	closeChooser: function() {
+		var self = this;
+
+		$( '#widgets-chooser' ).slideUp( 200, function() {
+			$('#wpbody-content').append( this );
+			self.clearWidgetSelection();
+		});
+	},
+
+	clearWidgetSelection: function() {
+		$( '#widgets-left' ).removeClass( 'chooser' );
+		$( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
 	}
 };
 
-$(document).ready(function($){ wpWidgets.init(); });
+$(document).ready( function(){ wpWidgets.init(); } );
 
 })(jQuery);

wp-admin/widgets.php

@@ -406,6 +406,15 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
 <br class="clear" />
 </div>
 
+<div id="widgets-chooser">
+	<h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
+	<ul class="widgets-chooser-sidebars"></ul>
+	<div class="widgets-chooser-actions">
+		<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
+		<button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
+	</div>
+</div>
+
 <?php
 
 /**