<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[26426] trunk/src/wp-admin: Widgets: drop onto closed sidebars.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/26426">26426</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2013-11-27 01:29:49 +0000 (Wed, 27 Nov 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Widgets: drop onto closed sidebars.
- Make dropping a widget easier by preventing the source sidebar from resizing while the widget is being dragged.
- Move widgets dropped on closed sidebars to the top. UI Sortable places them randomly near the bottom.
- Fix possible regression in wp_list_widget_controls(), add an optional argument to output the sidebar name inside the sortable container.
- Updated styles for sidebar description and widget-hover class.
Part props shaunandrews, fixes <a href="http://core.trac.wordpress.org/ticket/25952">#25952</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsswpadmincss">trunk/src/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunksrcwpadminincludeswidgetsphp">trunk/src/wp-admin/includes/widgets.php</a></li>
<li><a href="#trunksrcwpadminjswidgetsjs">trunk/src/wp-admin/js/widgets.js</a></li>
<li><a href="#trunksrcwpadminwidgetsphp">trunk/src/wp-admin/widgets.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/wp-admin.css (26425 => 26426)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/wp-admin.css 2013-11-26 23:30:59 UTC (rev 26425)
+++ trunk/src/wp-admin/css/wp-admin.css 2013-11-27 01:29:49 UTC (rev 26426)
</span><span class="lines">@@ -10012,15 +10012,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span><del>-/* General Widget Styles */
</del><ins>+/* General Widgets Styles */
</ins><span class="cx">
</span><span class="cx"> .widget {
</span><del>- margin: 10px auto;
- /* min-width: 50%; Not sure if this is needed */
</del><ins>+ margin: 0 auto 10px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> box-sizing: border-box;
</span><del>- -moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;
</del><ins>+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .widget-top {
</span><span class="lines">@@ -10053,10 +10052,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Widget Dragging Helpers */
</span><del>-
</del><span class="cx"> .widget.ui-draggable-dragging {
</span><del>- width: 280px !important;
- min-width: 280px !important;
</del><ins>+ min-width: 100%;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .widget.ui-sortable-helper {
</span><span class="lines">@@ -10066,7 +10063,7 @@
</span><span class="cx">
</span><span class="cx"> .widget-placeholder {
</span><span class="cx"> border: 1px dashed #bbb;
</span><del>- margin: 10px 0;
</del><ins>+ margin: 0 auto 10px;
</ins><span class="cx"> height: 45px;
</span><span class="cx"> width: 100%;
</span><span class="cx"> -webkit-box-sizing: border-box;
</span><span class="lines">@@ -10078,6 +10075,12 @@
</span><span class="cx"> margin-top: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#widgets-right .closed .widget-placeholder {
+ height: 0;
+ border: 0;
+ margin-top: -10px;
+}
+
</ins><span class="cx"> /* Widget Sidebars */
</span><span class="cx"> .sidebar-name {
</span><span class="cx"> border: none;
</span><span class="lines">@@ -10106,14 +10109,15 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .widgets-holder-wrap .description {
</span><del>- padding: 0;
</del><ins>+ padding: 0 0 15px;
</ins><span class="cx"> margin: 0;
</span><span class="cx"> font-style: normal;
</span><span class="cx"> color: #777;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#available-widgets.widgets-holder-wrap .description {
- padding-bottom: 10px;
</del><ins>+#widgets-right .widgets-holder-wrap .description {
+ padding-left: 7px;
+ padding-right: 7px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Widgets 2-col Layout */
</span><span class="lines">@@ -10173,6 +10177,10 @@
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#available-widgets #widget-list {
+ position: relative;
+}
+
</ins><span class="cx"> /* Inactive Sidebars */
</span><span class="cx"> #widgets-left .inactive-sidebar {
</span><span class="cx"> clear: both;
</span><span class="lines">@@ -10227,22 +10235,13 @@
</span><span class="cx"> margin: 10px 0 0 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-div#widgets-right .widget {
- margin: 0 auto;
- margin-bottom: 10px;
-}
-
</del><span class="cx"> div#widgets-right .sidebar-description {
</span><del>- border-top: 1px solid #eeeeee;
- padding: 10px 15px;
</del><ins>+ min-height: 20px;
+ margin-top: -5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-div#widgets-right .closed .sidebar-description {
- display: none;
-}
-
</del><span class="cx"> div#widgets-right .sidebar-name h3 {
</span><del>- padding: 15px 15px;
</del><ins>+ padding: 15px 7px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> div#widgets-right .sidebar-name .sidebar-name-arrow:before {
</span><span class="lines">@@ -10258,38 +10257,31 @@
</span><span class="cx"> padding: 0 8px;
</span><span class="cx"> margin-bottom: 9px;
</span><span class="cx"> position: relative;
</span><del>- min-height: 45px;
</del><ins>+ min-height: 123px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-div#widgets-right .widgets-sortables:after {
- display: block;
- content: '';
- position: absolute;
- bottom: -10px;
- left: 8px;
- right: 8px;
- z-index: 1; /* Required so that widgets hide the default dropzone indicator (.widgets-sortables:after) */
- border: 1px dashed #bbb;
- margin: 10px 0;
- height: 45px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
</del><ins>+div#widgets-right .closed .widgets-sortables {
+ min-height: 0;
+ margin-bottom: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-div#widgets-right .widgets-sortables .widget {
- z-index: 2; /* Required so that widgets hide the default dropzone indicator (.widgets-sortables:after) */
-}
-
</del><span class="cx"> .sidebar-name .spinner {
</span><span class="cx"> margin: -5px 5px;
</span><span class="cx"> float: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+/* Dragging a widget over a closed sidebar */
+#widgets-right .widgets-holder-wrap.closed.widget-hover {
+ border-color: #777;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+ opacity: 0.6;
+}
+
</ins><span class="cx"> /* Accessibility Mode */
</span><span class="cx"> #available-widgets .widget-control-edit .edit {
</span><span class="cx"> display :none;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> #available-widgets .widget-control-edit .add {
</span><span class="cx"> display: block;
</span><span class="cx"> position: absolute;
</span><span class="lines">@@ -10308,12 +10300,15 @@
</span><span class="cx"> padding: 16px 15px;
</span><span class="cx"> border-left: 1px solid #DDD;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> #widgets-right .widget-control-edit .add {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> #widgets-right .widget-control-edit:hover {
</span><span class="cx"> background: #444;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> #widgets-right .widget-control-edit:before {
</span><span class="cx"> content: '\f111';
</span><span class="cx"> display: inline-block;
</span><span class="lines">@@ -10326,6 +10321,13 @@
</span><span class="cx"> padding-right: 4px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.widgets-holder-wrap .sidebar-name,
+.widgets-holder-wrap .sidebar-description {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
</ins><span class="cx"> .editwidget {
</span><span class="cx"> margin: 0 auto;
</span><span class="cx"> }
</span><span class="lines">@@ -10333,11 +10335,12 @@
</span><span class="cx"> margin-top: 20px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.js .closed .widgets-sortables,
-.js .closed .widget-holder,
</del><ins>+.js .widgets-holder-wrap.closed .widget,
+.js .widgets-holder-wrap.closed .sidebar-description,
</ins><span class="cx"> .js .closed br.clear {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .nav-menus-php .item-edit:before,
</span><span class="cx"> .widget-top a.widget-action:after,
</span><span class="cx"> .control-section .accordion-section-title:after,
</span><span class="lines">@@ -10737,6 +10740,10 @@
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .widget.ui-draggable-dragging {
+ min-width: 49%;
+ }
+
</ins><span class="cx"> #widgets-left #available-widgets .widget:nth-child(even) {
</span><span class="cx"> float: right;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludeswidgetsphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/includes/widgets.php (26425 => 26426)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/includes/widgets.php 2013-11-26 23:30:59 UTC (rev 26425)
+++ trunk/src/wp-admin/includes/widgets.php 2013-11-27 01:29:49 UTC (rev 26426)
</span><span class="lines">@@ -63,21 +63,35 @@
</span><span class="cx"> * @since 2.5.0
</span><span class="cx"> *
</span><span class="cx"> * @param string $sidebar id slug of the sidebar
</span><ins>+ * @param string optional $sidebar_name Include the HTML for the sidebar name
</ins><span class="cx"> */
</span><del>-function wp_list_widget_controls( $sidebar ) {
</del><ins>+function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
</ins><span class="cx"> add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' );
</span><span class="cx">
</span><span class="cx"> $description = wp_sidebar_description( $sidebar );
</span><span class="cx">
</span><del>- if ( !empty( $description ) ) {
- echo "<div class='sidebar-description'>\n";
- echo "\t<p class='description'>$description</p>";
- echo "</div>\n";
</del><ins>+ echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
+
+ if ( $sidebar_name ) {
+ ?>
+ <div class="sidebar-name">
+ <div class="sidebar-name-arrow"><br /></div>
+ <h3><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h3>
+ </div>
+ <?php
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- echo "<div id='$sidebar' class='widgets-sortables'>\n";
</del><ins>+ echo '<div class="sidebar-description">';
+
+ if ( ! empty( $description ) ) {
+ echo '<p class="description">' . $description . '</p>';
+ }
+
+ echo '</div>';
+
</ins><span class="cx"> dynamic_sidebar( $sidebar );
</span><del>- echo "</div>\n";
</del><ins>+
+ echo '</div>';
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span></span></pre></div>
<a id="trunksrcwpadminjswidgetsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/widgets.js (26425 => 26426)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/widgets.js 2013-11-26 23:30:59 UTC (rev 26425)
+++ trunk/src/wp-admin/js/widgets.js 2013-11-27 01:29:49 UTC (rev 26426)
</span><span class="lines">@@ -13,21 +13,22 @@
</span><span class="cx"> isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
</span><span class="cx">
</span><span class="cx"> $('#widgets-right .sidebar-name').click( function() {
</span><del>- var $this = $(this), wrap = $this.closest('.widgets-holder-wrap');
</del><ins>+ var $this = $(this),
+ $wrap = $this.closest('.widgets-holder-wrap');
</ins><span class="cx">
</span><del>- if ( wrap.hasClass('closed') ) {
- wrap.removeClass('closed');
- $this.siblings('.widgets-sortables').sortable('refresh');
</del><ins>+ if ( $wrap.hasClass('closed') ) {
+ $wrap.removeClass('closed');
+ $this.parent().sortable('refresh');
</ins><span class="cx"> } else {
</span><del>- wrap.addClass('closed');
</del><ins>+ $wrap.addClass('closed');
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- $('#widgets-left').children('.widgets-holder-wrap').children('.sidebar-name').click(function() {
- $(this).parent().toggleClass('closed');
</del><ins>+ $('#widgets-left .sidebar-name').click( function() {
+ $(this).closest('.widgets-holder-wrap').toggleClass('closed');
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- $(document.body).bind('click.widgets-toggle', function(e){
</del><ins>+ $(document.body).bind('click.widgets-toggle', function(e) {
</ins><span class="cx"> var target = $(e.target),
</span><span class="cx"> css = { 'z-index': 100 },
</span><span class="cx"> widget, inside, targetWidth, widgetWidth, margin;
</span><span class="lines">@@ -36,7 +37,7 @@
</span><span class="cx"> widget = target.closest('div.widget');
</span><span class="cx"> inside = widget.children('.widget-inside');
</span><span class="cx"> targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
</span><del>- widgetWidth = widget.width();
</del><ins>+ widgetWidth = widget.parent().width();
</ins><span class="cx">
</span><span class="cx"> if ( inside.is(':hidden') ) {
</span><span class="cx"> if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
</span><span class="lines">@@ -68,10 +69,13 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- sidebars.children('.widget').each(function() {
- wpWidgets.appendTitle(this);
- if ( $('p.widget-error', this).length ) {
- $('a.widget-action', this).click();
</del><ins>+ 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');
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -112,62 +116,131 @@
</span><span class="cx"> cursor: 'move',
</span><span class="cx"> distance: 2,
</span><span class="cx"> containment: 'document',
</span><del>- start: function(e,ui) {
- var inside = ui.item.children('.widget-inside');
</del><ins>+ start: function( event, ui ) {
+ var $this = $(this),
+ $wrap = $this.parent(),
+ inside = ui.item.children('.widget-inside');
+
</ins><span class="cx">
</span><ins>+
+
+
+//console.log(this);console.log(ui);
+
+
+
+
</ins><span class="cx"> if ( inside.css('display') === 'block' ) {
</span><span class="cx"> inside.hide();
</span><span class="cx"> $(this).sortable('refreshPositions');
</span><span class="cx"> }
</span><ins>+
+ if ( $wrap.hasClass('closed') ) {
+ // There is a bug in UI Sortable that prevents firing of "over" when dragging a connected Draggable.
+ // This won't be needed when the bug is fixed.
+ $wrap.addClass('widget-hover');
+ } else {
+ // 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.
+ $wrap.css( 'min-height', $wrap.height() + 'px' );
+ $this.css( 'min-height', $this.height() - 2 + 'px' );
+ }
</ins><span class="cx"> },
</span><del>- stop: function(e,ui) {
- if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') ) {
- ui.item.draggable('destroy');
- }
</del><span class="cx">
</span><del>- if ( ui.item.hasClass('deleting') ) {
- wpWidgets.save( ui.item, 1, 0, 1 ); // delete widget
- ui.item.remove();
</del><ins>+ 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();
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var add = ui.item.find('input.add_new').val(),
- n = ui.item.find('input.multi_number').val(),
- id = the_id,
- sb = $(this).attr('id');
</del><ins>+ addNew = $widget.find('input.add_new').val();
+ widgetNumber = $widget.find('input.multi_number').val();
</ins><span class="cx">
</span><del>- ui.item.attr( 'style', '' );
</del><ins>+ $widget.attr( 'style', '' );
</ins><span class="cx"> the_id = '';
</span><span class="cx">
</span><del>- 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 );
</del><ins>+ 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 );
</ins><span class="cx"> rem = 'div#' + id;
</span><span class="cx"> }
</span><del>- wpWidgets.save( ui.item, 0, 0, 1 );
- ui.item.find('input.add_new').val('');
- ui.item.find('a.widget-action').click();
- return;
</del><ins>+
+ wpWidgets.save( $widget, 0, 0, 1 );
+ $widget.find('input.add_new').val('');
</ins><span class="cx"> }
</span><del>- wpWidgets.saveOrder(sb);
</del><ins>+
+ $sidebar = $widget.parent();
+
+ if ( $sidebar.parent().hasClass('closed') ) {
+ $sidebar.parent().removeClass('widget-hover closed jump-open');
+ $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') );
+ }
</ins><span class="cx"> },
</span><del>- receive: function(e, ui) {
- var sender = $(ui.sender);
</del><span class="cx">
</span><del>- if ( ! $(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 ) {
- sender.sortable('cancel');
</del><ins>+ over: function( event, ui ) {
+ var $wrap = $(this).parent();
+
+ if ( $wrap.hasClass('closed') ) {
+ $wrap.addClass('widget-hover');
</ins><span class="cx"> }
</span><ins>+ },
</ins><span class="cx">
</span><del>- if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
- sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
</del><ins>+ out: function( event, ui ) {
+ $(this).parent().removeClass('widget-hover');
+ },
+
+ deactivate: function( event, ui ) {
+ // Remove all min-height added on "start"
+ $(this).css( 'min-height', '' ).parent().css( 'min-height', '' );
+ },
+
+ receive: function( event, ui ) {
+ var $sender = $( ui.sender );
+
+ // Don't add more widgets to orphaned sidebars
+ if ( this.id.indexOf('orphaned_widgets') > -1 ) {
+ $sender.sortable('cancel');
+ return;
</ins><span class="cx"> }
</span><ins>+
+ // 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(); } );
+ }
</ins><span class="cx"> }
</span><del>- }).sortable('option', 'connectWith', 'div.widgets-sortables');
</del><ins>+ }).sortable( 'option', 'connectWith', 'div.widgets-sortables' );
</ins><span class="cx">
</span><span class="cx"> $('#available-widgets').droppable({
</span><span class="cx"> tolerance: 'pointer',
</span><span class="lines">@@ -210,17 +283,16 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
</span><del>- var widget = $(this).closest( '.widget' );
</del><ins>+ var $widget = $(this).closest( '.widget' );
</ins><span class="cx">
</span><del>- if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
</del><ins>+ if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) {
</ins><span class="cx"> self.closeChooser();
</span><span class="cx"> } else {
</span><span class="cx"> // Open the chooser
</span><span class="cx"> self.clearWidgetSelection();
</span><span class="cx"> $( '#widgets-left' ).addClass( 'chooser' );
</span><del>- widget.addClass( 'widget-in-question' );
</del><ins>+ $widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser );
</ins><span class="cx">
</span><del>- widget.find( '.widget-description' ).after( chooser );
</del><span class="cx"> chooser.slideDown( 300, function() {
</span><span class="cx"> selectSidebar.find('.widgets-chooser-selected').focus();
</span><span class="cx"> });
</span><span class="lines">@@ -257,37 +329,39 @@
</span><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><del>- saveOrder : function(sb) {
- if ( sb ) {
- $('#' + sb).closest('div.widgets-holder-wrap').find('.spinner:first').css('display', 'inline-block');
- }
-
- var a = {
</del><ins>+ saveOrder : function( sidebarId ) {
+ var data = {
</ins><span class="cx"> action: 'widgets-order',
</span><span class="cx"> savewidgets: $('#_wpnonce_widgets').val(),
</span><span class="cx"> sidebars: []
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+ if ( sidebarId ) {
+ $( '#' + sidebarId ).find('.spinner:first').css('display', 'inline-block');
+ }
+
</ins><span class="cx"> $('div.widgets-sortables').each( function() {
</span><span class="cx"> if ( $(this).sortable ) {
</span><del>- a['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
</del><ins>+ data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- $.post( ajaxurl, a, function() {
</del><ins>+ $.post( ajaxurl, data, function() {
</ins><span class="cx"> $('.spinner').hide();
</span><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><del>- save : function(widget, del, animate, order) {
- var sb = widget.closest('div.widgets-sortables').attr('id'), data = widget.find('form').serialize(), a;
</del><ins>+ save : function( widget, del, animate, order ) {
+ var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
+ data = widget.find('form').serialize(), a;
+
</ins><span class="cx"> widget = $(widget);
</span><span class="cx"> $('.spinner', widget).show();
</span><span class="cx">
</span><span class="cx"> a = {
</span><span class="cx"> action: 'save-widget',
</span><span class="cx"> savewidgets: $('#_wpnonce_widgets').val(),
</span><del>- sidebar: sb
</del><ins>+ sidebar: sidebarId
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> if ( del ) {
</span><span class="lines">@@ -296,7 +370,7 @@
</span><span class="cx">
</span><span class="cx"> data += '&' + $.param(a);
</span><span class="cx">
</span><del>- $.post( ajaxurl, data, function(r){
</del><ins>+ $.post( ajaxurl, data, function(r) {
</ins><span class="cx"> var id;
</span><span class="cx">
</span><span class="cx"> if ( del ) {
</span><span class="lines">@@ -321,8 +395,8 @@
</span><span class="cx"> } else {
</span><span class="cx"> $('.spinner').hide();
</span><span class="cx"> if ( r && r.length > 2 ) {
</span><del>- $('div.widget-content', widget).html(r);
- wpWidgets.appendTitle(widget);
</del><ins>+ $( 'div.widget-content', widget ).html(r);
+ wpWidgets.appendTitle( widget );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> if ( order ) {
</span><span class="lines">@@ -379,10 +453,10 @@
</span><span class="cx">
</span><span class="cx"> // Open the widgets container
</span><span class="cx"> sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
</span><ins>+
+ sidebar.find('.sidebar-description').after( widget );
</ins><span class="cx"> sidebar.sortable('refresh');
</span><span class="cx">
</span><del>- widget.prependTo( sidebar );
-
</del><span class="cx"> wpWidgets.save( widget, 0, 0, 1 );
</span><span class="cx"> // No longer "new" widget
</span><span class="cx"> widget.find( 'input.add_new' ).val('');
</span></span></pre></div>
<a id="trunksrcwpadminwidgetsphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/widgets.php (26425 => 26426)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/widgets.php 2013-11-26 23:30:59 UTC (rev 26425)
+++ trunk/src/wp-admin/widgets.php 2013-11-27 01:29:49 UTC (rev 26426)
</span><span class="lines">@@ -332,15 +332,18 @@
</span><span class="cx"> <div id="widgets-left">
</span><span class="cx"> <div id="available-widgets" class="widgets-holder-wrap">
</span><span class="cx"> <div class="sidebar-name">
</span><del>- <div class="sidebar-name-arrow"><br /></div>
- <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3></div>
</del><ins>+ <div class="sidebar-name-arrow"><br /></div>
+ <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3>
+ </div>
</ins><span class="cx"> <div class="widget-holder">
</span><del>- <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
- <div id="widget-list">
- <?php wp_list_widgets(); ?>
</del><ins>+ <div class="sidebar-description">
+ <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
+ </div>
+ <div id="widget-list">
+ <?php wp_list_widgets(); ?>
+ </div>
+ <br class='clear' />
</ins><span class="cx"> </div>
</span><del>- <br class='clear' />
- </div>
</del><span class="cx"> <br class="clear" />
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="lines">@@ -355,16 +358,13 @@
</span><span class="cx">
</span><span class="cx"> ?>
</span><span class="cx"> <div class="<?php echo esc_attr( $wrap_class ); ?>">
</span><del>- <div class="sidebar-name">
- <div class="sidebar-name-arrow"><br /></div>
- <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
- </div>
</del><span class="cx"> <div class="widget-holder inactive">
</span><del>- <?php wp_list_widget_controls( $registered_sidebar['id'] ); ?>
</del><ins>+ <?php wp_list_widget_controls( $registered_sidebar['id'], $registered_sidebar['name'] ); ?>
</ins><span class="cx"> <div class="clear"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <?php
</span><ins>+
</ins><span class="cx"> } else {
</span><span class="cx"> $theme_sidebars[$sidebar] = $registered_sidebar;
</span><span class="cx"> }
</span><span class="lines">@@ -407,11 +407,7 @@
</span><span class="cx">
</span><span class="cx"> ?>
</span><span class="cx"> <div class="<?php echo esc_attr( $wrap_class ); ?>">
</span><del>- <div class="sidebar-name">
- <div class="sidebar-name-arrow"><br /></div>
- <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
- </div>
- <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
</del><ins>+ <?php wp_list_widget_controls( $sidebar, $registered_sidebar['name'] ); // Show the control forms for each of the widgets in this sidebar ?>
</ins><span class="cx"> </div>
</span><span class="cx"> <?php
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>