Ticket #25821: 25821.2.patch

src/wp-admin/css/wp-admin.css

@@ -9051 +9051 @@
         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-right: 10px;
+        padding-bottom: 10px;
+}
+
+#widgets-chooser h3 {
+        font-size: 14px;
+        margin: 30px 0 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 {

src/wp-admin/js/widgets.js

@@ -4 +4 @@
 wpWidgets = {
 
         init : function() {
-                var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
-                        margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
+                var rem, 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(){
-                        var c = $(this).siblings('.widgets-sortables'), p = $(this).parent();
-                        if ( !p.hasClass('closed') ) {
-                                c.sortable('disable');
-                                p.addClass('closed');
+                $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
+                        var $this = $(this), parent = $this.parent();
+                        if ( parent.hasClass('closed') ) {
+                                parent.removeClass('closed');
+                                $this.siblings('.widgets-sortables').sortable('refresh');
                         } else {
-                                p.removeClass('closed');
-                                c.sortable('enable').sortable('refresh');
+                                parent.addClass('closed');
                         }
                 });
 
@@ -147 +151 @@
                                         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',
@@ -172 +176 @@
                                 $('#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>').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 {
+                                self.clearWidgetSelection();
+                                $( '#widgets-left' ).addClass( 'chooser' );
+                                widget.addClass( 'widget-in-question' );
+
+                                widget.after( chooser );
+                                chooser.slideDown( 200 );
+                        }
+                });
+
+                // 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) {
@@ -281 +330 @@
                 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 ),
+                        wrap = sidebar.closest( '.widgets-holder-wrap' );
+
+                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' );
         }
 };
 

src/wp-admin/widgets.php

@@ -406 +406 @@
 <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
 
 /**