X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/6c8f14c09105d0afa4c1574215c59b5021040e76..48ab98cb1779cf2088c1351ac3dd3d0da6fb31d3:/wp-admin/js/widgets.js

diff --git a/wp-admin/js/widgets.js b/wp-admin/js/widgets.js
index 87be4ddf..81d2248c 100644
--- a/wp-admin/js/widgets.js
+++ b/wp-admin/js/widgets.js
@@ -1,56 +1,61 @@
+/*global ajaxurl, isRtl */
 var wpWidgets;
 (function($) {
 
 wpWidgets = {
 
 	init : function() {
-		var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
-			margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
-
-		$('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click(function(){
-			var c = $(this).siblings('.widgets-sortables'), p = $(this).parent();
-			if ( !p.hasClass('closed') ) {
-				c.sortable('disable');
-				p.addClass('closed');
+		var rem, the_id,
+			self = this,
+			chooser = $('.widgets-chooser'),
+			selectSidebar = chooser.find('.widgets-chooser-sidebars'),
+			sidebars = $('div.widgets-sortables'),
+			isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
+
+		$('#widgets-right .sidebar-name').click( function() {
+			var $this = $(this),
+				$wrap = $this.closest('.widgets-holder-wrap');
+
+			if ( $wrap.hasClass('closed') ) {
+				$wrap.removeClass('closed');
+				$this.parent().sortable('refresh');
 			} else {
-				p.removeClass('closed');
-				c.sortable('enable').sortable('refresh');
+				$wrap.addClass('closed');
 			}
 		});
 
-		$('#widgets-left').children('.widgets-holder-wrap').children('.sidebar-name').click(function() {
-			$(this).parent().toggleClass('closed');
+		$('#widgets-left .sidebar-name').click( function() {
+			$(this).closest('.widgets-holder-wrap').toggleClass('closed');
 		});
 
-		sidebars.each(function(){
-			if ( $(this).parent().hasClass('inactive') )
-				return true;
-
-			var h = 50, H = $(this).children('.widget').length;
-			h = h + parseInt(H * 48, 10);
-			$(this).css( 'minHeight', h + 'px' );
-		});
-
-		$(document.body).bind('click.widgets-toggle', function(e){
-			var target = $(e.target), css = {}, widget, inside, w;
+		$(document.body).bind('click.widgets-toggle', function(e) {
+			var target = $(e.target),
+				css = { 'z-index': 100 },
+				widget, inside, targetWidth, widgetWidth, margin;
 
 			if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
 				widget = target.closest('div.widget');
 				inside = widget.children('.widget-inside');
-				w = parseInt( widget.find('input.widget-width').val(), 10 );
+				targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
+				widgetWidth = widget.parent().width();
 
 				if ( inside.is(':hidden') ) {
-					if ( w > 250 && inside.closest('div.widgets-sortables').length ) {
-						css['width'] = w + 30 + 'px';
-						if ( inside.closest('div.widget-liquid-right').length )
-							css[margin] = 235 - w + 'px';
-						widget.css(css);
+					if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
+						if ( widget.closest('div.widget-liquid-right').length ) {
+							margin = isRTL ? 'margin-right' : 'margin-left';
+						} else {
+							margin = isRTL ? 'margin-left' : 'margin-right';
+						}
+
+						css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
+						widget.css( css );
 					}
-					wpWidgets.fixLabels(widget);
+					widget.addClass( 'open' );
 					inside.slideDown('fast');
 				} else {
 					inside.slideUp('fast', function() {
-						widget.css({'width':'', margin:''});
+						widget.attr( 'style', '' );
+						widget.removeClass( 'open' );
 					});
 				}
 				e.preventDefault();
@@ -66,10 +71,14 @@ wpWidgets = {
 			}
 		});
 
-		sidebars.children('.widget').each(function() {
-			wpWidgets.appendTitle(this);
-			if ( $('p.widget-error', this).length )
-				$('a.widget-action', this).click();
+		sidebars.children('.widget').each( function() {
+			var $this = $(this);
+
+			wpWidgets.appendTitle( this );
+
+			if ( $this.find( 'p.widget-error' ).length ) {
+				$this.find( 'a.widget-action' ).trigger('click');
+			}
 		});
 
 		$('#widget-list').children('.widget').draggable({
@@ -79,13 +88,24 @@ wpWidgets = {
 			helper: 'clone',
 			zIndex: 100,
 			containment: 'document',
-			start: function(e,ui) {
+			start: function( event, ui ) {
+				var chooser = $(this).find('.widgets-chooser');
+
 				ui.helper.find('div.widget-description').hide();
 				the_id = this.id;
+
+				if ( chooser.length ) {
+					// Hide the chooser and move it out of the widget
+					$( '#wpbody-content' ).append( chooser.hide() );
+					// Delete the cloned chooser from the drag helper
+					ui.helper.find('.widgets-chooser').remove();
+					self.clearWidgetSelection();
+				}
 			},
-			stop: function(e,ui) {
-				if ( rem )
+			stop: function() {
+				if ( rem ) {
 					$(rem).hide();
+				}
 
 				rem = '';
 			}
@@ -98,61 +118,116 @@ wpWidgets = {
 			cursor: 'move',
 			distance: 2,
 			containment: 'document',
-			start: function(e,ui) {
-				ui.item.children('.widget-inside').hide();
-				ui.item.css({margin:'', 'width':''});
+			start: function( event, ui ) {
+				var height, $this = $(this),
+					$wrap = $this.parent(),
+					inside = ui.item.children('.widget-inside');
+
+				if ( inside.css('display') === 'block' ) {
+					inside.hide();
+					$(this).sortable('refreshPositions');
+				}
+
+				if ( ! $wrap.hasClass('closed') ) {
+					// Lock all open sidebars min-height when starting to drag.
+					// Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below.
+					height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height();
+					$this.css( 'min-height', height + 'px' );
+				}
 			},
-			stop: function(e,ui) {
-				if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') )
-					ui.item.draggable('destroy');
 
-				if ( ui.item.hasClass('deleting') ) {
-					wpWidgets.save( ui.item, 1, 0, 1 ); // delete widget
-					ui.item.remove();
+			stop: function( event, ui ) {
+				var addNew, widgetNumber, $sidebar, $children, child, item,
+					$widget = ui.item,
+					id = the_id;
+
+				if ( $widget.hasClass('deleting') ) {
+					wpWidgets.save( $widget, 1, 0, 1 ); // delete widget
+					$widget.remove();
 					return;
 				}
 
-				var add = ui.item.find('input.add_new').val(),
-					n = ui.item.find('input.multi_number').val(),
-					id = the_id,
-					sb = $(this).attr('id');
+				addNew = $widget.find('input.add_new').val();
+				widgetNumber = $widget.find('input.multi_number').val();
 
-				ui.item.css({margin:'', 'width':''});
+				$widget.attr( 'style', '' ).removeClass('ui-draggable');
 				the_id = '';
 
-				if ( 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 ) {
-						ui.item.attr( 'id', 'new-' + id );
+				if ( addNew ) {
+					if ( 'multi' === addNew ) {
+						$widget.html(
+							$widget.html().replace( /<[^<>]+>/g, function( tag ) {
+								return tag.replace( /__i__|%i%/g, widgetNumber );
+							})
+						);
+
+						$widget.attr( 'id', id.replace( '__i__', widgetNumber ) );
+						widgetNumber++;
+
+						$( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber );
+					} else if ( 'single' === addNew ) {
+						$widget.attr( 'id', 'new-' + id );
 						rem = 'div#' + id;
 					}
-					wpWidgets.save( ui.item, 0, 0, 1 );
-					ui.item.find('input.add_new').val('');
-					ui.item.find('a.widget-action').click();
-					return;
+
+					wpWidgets.save( $widget, 0, 0, 1 );
+					$widget.find('input.add_new').val('');
+					$( document ).trigger( 'widget-added', [ $widget ] );
+				}
+
+				$sidebar = $widget.parent();
+
+				if ( $sidebar.parent().hasClass('closed') ) {
+					$sidebar.parent().removeClass('closed');
+					$children = $sidebar.children('.widget');
+
+					// Make sure the dropped widget is at the top
+					if ( $children.length > 1 ) {
+						child = $children.get(0);
+						item = $widget.get(0);
+
+						if ( child.id && item.id && child.id !== item.id ) {
+							$( child ).before( $widget );
+						}
+					}
+				}
+
+				if ( addNew ) {
+					$widget.find( 'a.widget-action' ).trigger('click');
+				} else {
+					wpWidgets.saveOrder( $sidebar.attr('id') );
 				}
-				wpWidgets.saveOrder(sb);
 			},
-			receive: function(e, ui) {
-				var sender = $(ui.sender);
 
-				if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') != -1 )
-					sender.sortable('cancel');
+			activate: function() {
+				$(this).parent().addClass( 'widget-hover' );
+			},
+
+			deactivate: function() {
+				// Remove all min-height added on "start"
+				$(this).css( 'min-height', '' ).parent().removeClass( 'widget-hover' );
+			},
+
+			receive: function( event, ui ) {
+				var $sender = $( ui.sender );
 
-				if ( sender.attr('id').indexOf('orphaned_widgets') != -1 && !sender.children('.widget').length ) {
-					sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
+				// Don't add more widgets to orphaned sidebars
+				if ( this.id.indexOf('orphaned_widgets') > -1 ) {
+					$sender.sortable('cancel');
+					return;
+				}
+
+				// If the last widget was moved out of an orphaned sidebar, close and remove it.
+				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');
@@ -162,9 +237,10 @@ wpWidgets = {
 				ui.draggable.addClass('deleting');
 				$('div.widget-placeholder').hide();
 
-				if ( ui.draggable.hasClass('ui-sortable-helper') )
+				if ( ui.draggable.hasClass('ui-sortable-helper') ) {
 					$('#removing-widget').show().children('span')
 					.html( ui.draggable.find('div.widget-title').children('h4').html() );
+				}
 			},
 			out: function(e,ui) {
 				ui.draggable.removeClass('deleting');
@@ -172,55 +248,120 @@ wpWidgets = {
 				$('#removing-widget').hide().children('span').html('');
 			}
 		});
-	},
 
-	saveOrder : function(sb) {
-		if ( sb )
-			$('#' + sb).closest('div.widgets-holder-wrap').find('.spinner').css('display', 'inline-block');
+		// 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' ).children( '.widget-description' ).after( chooser );
+
+				chooser.slideDown( 300, function() {
+					selectSidebar.find('.widgets-chooser-selected').focus();
+				});
+
+				selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
+					selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
+					$(this).addClass( 'widgets-chooser-selected' );
+				} );
+			}
+		});
+
+		// 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();
+			}
+		}).on( 'keyup.widgets-chooser', function( event ) {
+			if ( event.which === $.ui.keyCode.ENTER ) {
+				if ( $( event.target ).hasClass('button-secondary') ) {
+					// Close instead of adding when pressing Enter on the Cancel button
+					self.closeChooser();
+				} else {
+					self.addWidget( chooser );
+					self.closeChooser();
+				}
+			} else if ( event.which === $.ui.keyCode.ESCAPE ) {
+				self.closeChooser();
+			}
+		});
+	},
 
-		var a = {
+	saveOrder : function( sidebarId ) {
+		var data = {
 			action: 'widgets-order',
 			savewidgets: $('#_wpnonce_widgets').val(),
 			sidebars: []
 		};
 
+		if ( sidebarId ) {
+			$( '#' + sidebarId ).find('.spinner:first').css('display', 'inline-block');
+		}
+
 		$('div.widgets-sortables').each( function() {
-			if ( $(this).sortable )
-				a['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
+			if ( $(this).sortable ) {
+				data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
+			}
 		});
 
-		$.post( ajaxurl, a, function() {
+		$.post( ajaxurl, data, function() {
 			$('.spinner').hide();
 		});
-
-		this.resize();
 	},
 
-	save : function(widget, del, animate, order) {
-		var sb = widget.closest('div.widgets-sortables').attr('id'), data = widget.find('form').serialize(), a;
+	save : function( widget, del, animate, order ) {
+		var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
+			data = widget.find('form').serialize(), a;
+
 		widget = $(widget);
 		$('.spinner', widget).show();
 
 		a = {
 			action: 'save-widget',
 			savewidgets: $('#_wpnonce_widgets').val(),
-			sidebar: sb
+			sidebar: sidebarId
 		};
 
-		if ( del )
-			a['delete_widget'] = 1;
+		if ( del ) {
+			a.delete_widget = 1;
+		}
 
 		data += '&' + $.param(a);
 
-		$.post( ajaxurl, data, function(r){
+		$.post( ajaxurl, data, function(r) {
 			var id;
 
 			if ( del ) {
-				if ( !$('input.widget_number', widget).val() ) {
+				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();
+						}
 					});
 				}
 
@@ -232,58 +373,120 @@ wpWidgets = {
 					});
 				} else {
 					widget.remove();
-					wpWidgets.resize();
 				}
 			} else {
 				$('.spinner').hide();
 				if ( r && r.length > 2 ) {
-					$('div.widget-content', widget).html(r);
-					wpWidgets.appendTitle(widget);
-					wpWidgets.fixLabels(widget);
+					$( 'div.widget-content', widget ).html( r );
+					wpWidgets.appendTitle( widget );
+					$( document ).trigger( 'widget-updated', [ widget ] );
 				}
 			}
-			if ( order )
+			if ( order ) {
 				wpWidgets.saveOrder();
+			}
 		});
 	},
 
 	appendTitle : function(widget) {
 		var title = $('input[id*="-title"]', widget).val() || '';
 
-		if ( title )
+		if ( title ) {
 			title = ': ' + title.replace(/<[^<>]+>/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+		}
 
 		$(widget).children('.widget-top').children('.widget-title').children()
 				.children('.in-widget-title').html(title);
 
 	},
 
-	resize : function() {
-		$('div.widgets-sortables').each(function(){
-			if ( $(this).parent().hasClass('inactive') )
-				return true;
-
-			var h = 50, H = $(this).children('.widget').length;
-			h = h + parseInt(H * 48, 10);
-			$(this).css( 'minHeight', h + 'px' );
+	close : function(widget) {
+		widget.children('.widget-inside').slideUp('fast', function() {
+			widget.attr( 'style', '' );
 		});
 	},
 
-	fixLabels : function(widget) {
-		widget.children('.widget-inside').find('label').each(function(){
-			var f = $(this).attr('for');
-			if ( f && f == $('input', this).attr('id') )
-				$(this).removeAttr('for');
-		});
+	addWidget: function( chooser ) {
+		var widget, widgetId, add, n, viewportTop, viewportBottom, sidebarBounds,
+			sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
+			sidebar = $( '#' + sidebarId );
+
+		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();
+
+		// Remove the cloned chooser from the widget
+		widget.find('.widgets-chooser').remove();
+
+		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.append( widget );
+		sidebar.sortable('refresh');
+
+		wpWidgets.save( widget, 0, 0, 1 );
+		// No longer "new" widget
+		widget.find( 'input.add_new' ).val('');
+
+		$( document ).trigger( 'widget-added', [ widget ] );
+
+		/*
+		 * Check if any part of the sidebar is visible in the viewport. If it is, don't scroll.
+		 * Otherwise, scroll up to so the sidebar is in view.
+		 *
+		 * We do this by comparing the top and bottom, of the sidebar so see if they are within
+		 * the bounds of the viewport.
+		 */
+		viewportTop = $(window).scrollTop();
+		viewportBottom = viewportTop + $(window).height();
+		sidebarBounds = sidebar.offset();
+
+		sidebarBounds.bottom = sidebarBounds.top + sidebar.outerHeight();
+
+		if ( viewportTop > sidebarBounds.bottom || viewportBottom < sidebarBounds.top ) {
+			$( 'html, body' ).animate({
+				scrollTop: sidebarBounds.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 );
 	},
 
-	close : function(widget) {
-		widget.children('.widget-inside').slideUp('fast', function(){
-			widget.css({'width':'', margin:''});
+	closeChooser: function() {
+		var self = this;
+
+		$( '.widgets-chooser' ).slideUp( 200, function() {
+			$( '#wpbody-content' ).append( this );
+			self.clearWidgetSelection();
 		});
+	},
+
+	clearWidgetSelection: function() {
+		$( '#widgets-left' ).removeClass( 'chooser' );
+		$( '.widget-in-question' ).removeClass( 'widget-in-question' );
 	}
 };
 
-$(document).ready(function($){ wpWidgets.init(); });
+$(document).ready( function(){ wpWidgets.init(); } );
 
 })(jQuery);