diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index 0c1cbce16b..4cc1a392cf 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/src/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 { diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 87be4ddfd5..abb88b3f60 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/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 ), - 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'); } }); @@ -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 = $('