Changeset 26054

Timestamp:

11/08/2013 11:04:35 PM (11 years ago)

Author:

azaozz

Message:

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

Location:

trunk/src/wp-admin

Files:

• css/wp-admin.css (modified) (1 diff)
• js/widgets.js (modified) (11 diffs)
• widgets.php (modified) (1 diff)

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

@@ -9052 +9052 @@
 }
 
+
+/* 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,

trunk/src/wp-admin/js/widgets.js

@@ +1 @@
+/*global ajaxurl, isRtl */
 var wpWidgets;
 (function($) {
@@ -5 +6 @@
 
     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 ),
+            margin = ( isRTL ? 'marginRight' : 'marginLeft' );
+
+        $('#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');
             }
         });
@@ -42 +47 @@
                 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';
@@ -84 +89 @@
                 the_id = this.id;
             },
-            stop: function(e,ui) {
+            stop: function() {
                 if ( rem )
                     $(rem).hide();
@@ -122 +127 @@
 
                 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;
@@ -141 +146 @@
                 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) {
@@ -171 +176 @@
                 $('div.widget-placeholder').show();
                 $('#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' );
             }
         });
@@ -209 +262 @@
 
         if ( del )
-            a['delete_widget'] = 1;
+            a.delete_widget = 1;
 
         data += '&' + $.param(a);
@@ -220 +273 @@
                     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();
                     });
@@ -273 +326 @@
         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');
         });
@@ -282 +335 @@
             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);

trunk/src/wp-admin/widgets.php

@@ -407 +407 @@
 </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