Skip to content

Commit 8ee9043

Browse files
azaozzazaozz
committed
Merge the Widgets Area Chooser feature plugin. First run, see #25821
git-svn-id: https://develop.svn.wordpress.org/trunk@26054 602fd350-edb4-49c9-b593-d223f7449a82
1 parent cc19bb3 commit 8ee9043

3 files changed

Lines changed: 259 additions & 22 deletions

File tree

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9051,6 +9051,121 @@ a.widget-control-edit {
90519051
cursor: default;
90529052
}
90539053

9054+
9055+
/* Widgets Area Chooser merge */
9056+
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
9057+
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
9058+
transition: opacity 0.2s ease-in-out;
9059+
}
9060+
9061+
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
9062+
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
9063+
/* -webkit-filter: blur(1px); */
9064+
opacity: 0.2;
9065+
pointer-events: none;
9066+
}
9067+
9068+
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
9069+
/* -webkit-filter: none; */
9070+
opacity: 1;
9071+
pointer-events: auto;
9072+
}
9073+
9074+
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question .widget-top {
9075+
background: #fff;
9076+
border: 1px solid #bbb;
9077+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
9078+
}
9079+
9080+
#widgets-chooser {
9081+
display: none;
9082+
margin: auto;
9083+
padding-bottom: 10px;
9084+
max-width: 400px;
9085+
}
9086+
9087+
#widgets-chooser h3 {
9088+
font-size: 14px;
9089+
margin: 15px 0;
9090+
}
9091+
9092+
#widgets-chooser ul.widgets-chooser-sidebars {
9093+
margin: 0 0 20px 0;
9094+
list-style-type: none;
9095+
}
9096+
9097+
#widgets-chooser ul.widgets-chooser-sidebars li {
9098+
padding: 10px 15px 10px 35px;
9099+
background: #fff;
9100+
border: 1px solid #ccc;
9101+
border-bottom: none;
9102+
margin: 0;
9103+
cursor: pointer;
9104+
}
9105+
9106+
#widgets-chooser ul.widgets-chooser-sidebars li:hover {
9107+
background: rgba(255,255,255,0.7);
9108+
}
9109+
9110+
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
9111+
background: #1075a0;
9112+
color: #fff;
9113+
position: relative;
9114+
}
9115+
9116+
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
9117+
content: '\f147';
9118+
display: block;
9119+
-webkit-font-smoothing: antialiased;
9120+
font: normal 26px/1 'dashicons';
9121+
position: absolute;
9122+
top: 7px;
9123+
left: 5px;
9124+
}
9125+
9126+
#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
9127+
border-bottom: 1px solid #ccc;
9128+
}
9129+
9130+
#widgets-chooser select {
9131+
width: 100%;
9132+
margin-bottom: 20px;
9133+
-webkit-box-sizing: border-box;
9134+
-moz-box-sizing: border-box;
9135+
box-sizing: border-box;
9136+
}
9137+
9138+
#widgets-chooser .sidebar-radios {
9139+
text-align: left;
9140+
margin: 0 20px 20px 20px;
9141+
}
9142+
9143+
#widgets-chooser .sidebar-radios li {
9144+
margin-top: 15px;
9145+
}
9146+
9147+
#widgets-chooser .sidebar-radios label {
9148+
font-size: 15px;
9149+
}
9150+
9151+
#widgets-chooser .sidebar-radios input {
9152+
margin-right: 10px;
9153+
}
9154+
9155+
#widgets-chooser .widgets-chooser-actions {
9156+
clear: both;
9157+
text-align: center;
9158+
}
9159+
9160+
#widgets-chooser button {
9161+
margin-right: 5px;
9162+
}
9163+
9164+
#available-widgets .widget .widget-top {
9165+
cursor: pointer;
9166+
}
9167+
/* End Widgets Area Chooser merge */
9168+
90549169
/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
90559170
.ui-sortable,
90569171
.ui-draggable {

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

Lines changed: 135 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1+
/*global ajaxurl, isRtl */
12
var wpWidgets;
23
(function($) {
34

45
wpWidgets = {
56

67
init : function() {
7-
var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
8-
margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
9-
10-
$('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click(function(){
11-
var c = $(this).siblings('.widgets-sortables'), p = $(this).parent();
12-
if ( !p.hasClass('closed') ) {
13-
c.sortable('disable');
14-
p.addClass('closed');
8+
var rem, the_id,
9+
self = this,
10+
chooser = $('#widgets-chooser'),
11+
selectSidebar = chooser.find('.widgets-chooser-sidebars'),
12+
sidebars = $('div.widgets-sortables'),
13+
isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ),
14+
margin = ( isRTL ? 'marginRight' : 'marginLeft' );
15+
16+
$('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
17+
var $this = $(this), parent = $this.parent();
18+
if ( parent.hasClass('closed') ) {
19+
parent.removeClass('closed');
20+
$this.siblings('.widgets-sortables').sortable('refresh');
1521
} else {
16-
p.removeClass('closed');
17-
c.sortable('enable').sortable('refresh');
22+
parent.addClass('closed');
1823
}
1924
});
2025

@@ -41,7 +46,7 @@ wpWidgets = {
4146

4247
if ( inside.is(':hidden') ) {
4348
if ( w > 250 && inside.closest('div.widgets-sortables').length ) {
44-
css['width'] = w + 30 + 'px';
49+
css.width = w + 30 + 'px';
4550
if ( inside.closest('div.widget-liquid-right').length )
4651
css[margin] = 235 - w + 'px';
4752
widget.css(css);
@@ -83,7 +88,7 @@ wpWidgets = {
8388
ui.helper.find('div.widget-description').hide();
8489
the_id = this.id;
8590
},
86-
stop: function(e,ui) {
91+
stop: function() {
8792
if ( rem )
8893
$(rem).hide();
8994

@@ -121,12 +126,12 @@ wpWidgets = {
121126
the_id = '';
122127

123128
if ( add ) {
124-
if ( 'multi' == add ) {
129+
if ( 'multi' === add ) {
125130
ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
126131
ui.item.attr( 'id', id.replace('__i__', n) );
127132
n++;
128133
$('div#' + id).find('input.multi_number').val(n);
129-
} else if ( 'single' == add ) {
134+
} else if ( 'single' === add ) {
130135
ui.item.attr( 'id', 'new-' + id );
131136
rem = 'div#' + id;
132137
}
@@ -140,19 +145,19 @@ wpWidgets = {
140145
receive: function(e, ui) {
141146
var sender = $(ui.sender);
142147

143-
if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') != -1 )
148+
if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 )
144149
sender.sortable('cancel');
145150

146-
if ( sender.attr('id').indexOf('orphaned_widgets') != -1 && !sender.children('.widget').length ) {
151+
if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
147152
sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
148153
}
149154
}
150-
}).sortable('option', 'connectWith', 'div.widgets-sortables').parent().filter('.closed').children('.widgets-sortables').sortable('disable');
155+
}).sortable('option', 'connectWith', 'div.widgets-sortables');
151156

152157
$('#available-widgets').droppable({
153158
tolerance: 'pointer',
154159
accept: function(o){
155-
return $(o).parent().attr('id') != 'widget-list';
160+
return $(o).parent().attr('id') !== 'widget-list';
156161
},
157162
drop: function(e,ui) {
158163
ui.draggable.addClass('deleting');
@@ -172,6 +177,54 @@ wpWidgets = {
172177
$('#removing-widget').hide().children('span').html('');
173178
}
174179
});
180+
181+
// Area Chooser
182+
$( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
183+
var $element = $( element ),
184+
name = $element.find( '.sidebar-name h3' ).text(),
185+
id = $element.find( '.widgets-sortables' ).attr( 'id' ),
186+
li = $('<li tabindex="0">').text( $.trim( name ) );
187+
188+
if ( index === 0 ) {
189+
li.addClass( 'widgets-chooser-selected' );
190+
}
191+
192+
selectSidebar.append( li );
193+
li.data( 'sidebarId', id );
194+
});
195+
196+
$( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
197+
var widget = $(this).closest( '.widget' );
198+
199+
if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
200+
self.closeChooser();
201+
} else {
202+
// Open the chooser
203+
self.clearWidgetSelection();
204+
$( '#widgets-left' ).addClass( 'chooser' );
205+
widget.addClass( 'widget-in-question' );
206+
207+
widget.after( chooser );
208+
chooser.slideDown( 200, function() {
209+
selectSidebar.find('.widgets-chooser-selected').focus();
210+
});
211+
}
212+
});
213+
214+
// Add event handlers
215+
chooser.on( 'click.widgets-chooser', function( event ) {
216+
var $target = $( event.target );
217+
218+
if ( $target.hasClass('button-primary') ) {
219+
self.addWidget( chooser );
220+
self.closeChooser();
221+
} else if ( $target.hasClass('button-secondary') ) {
222+
self.closeChooser();
223+
} else if ( $target.is('.widgets-chooser-sidebars li') ) {
224+
chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
225+
$target.addClass( 'widgets-chooser-selected' );
226+
}
227+
});
175228
},
176229

177230
saveOrder : function(sb) {
@@ -208,7 +261,7 @@ wpWidgets = {
208261
};
209262

210263
if ( del )
211-
a['delete_widget'] = 1;
264+
a.delete_widget = 1;
212265

213266
data += '&' + $.param(a);
214267

@@ -219,7 +272,7 @@ wpWidgets = {
219272
if ( !$('input.widget_number', widget).val() ) {
220273
id = $('input.widget-id', widget).val();
221274
$('#available-widgets').find('input.widget-id').each(function(){
222-
if ( $(this).val() == id )
275+
if ( $(this).val() === id )
223276
$(this).closest('div.widget').show();
224277
});
225278
}
@@ -272,7 +325,7 @@ wpWidgets = {
272325
fixLabels : function(widget) {
273326
widget.children('.widget-inside').find('label').each(function(){
274327
var f = $(this).attr('for');
275-
if ( f && f == $('input', this).attr('id') )
328+
if ( f && f === $('input', this).attr('id') )
276329
$(this).removeAttr('for');
277330
});
278331
},
@@ -281,9 +334,69 @@ wpWidgets = {
281334
widget.children('.widget-inside').slideUp('fast', function(){
282335
widget.css({'width':'', margin:''});
283336
});
337+
},
338+
339+
addWidget: function( chooser ) {
340+
var widget = $('#available-widgets').find('.widget-in-question').clone(),
341+
widgetId = widget.attr('id'),
342+
add = widget.find( 'input.add_new' ).val(),
343+
n = widget.find( 'input.multi_number' ).val(),
344+
sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
345+
sidebar = $( '#' + sidebarId );
346+
347+
if ( 'multi' === add ) {
348+
widget.html(
349+
widget.html().replace( /<[^<>]+>/g, function(m) {
350+
return m.replace( /__i__|%i%/g, n );
351+
})
352+
);
353+
354+
widget.attr( 'id', widgetId.replace( '__i__', n ) );
355+
n++;
356+
$( '#' + widgetId ).find('input.multi_number').val(n);
357+
} else if ( 'single' === add ) {
358+
widget.attr( 'id', 'new-' + widgetId );
359+
$( '#' + widgetId ).hide();
360+
}
361+
362+
// Open the widgets container
363+
sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
364+
sidebar.sortable('refresh');
365+
366+
// Change for MP6
367+
// widget.prependTo( sidebar );
368+
sidebar.find( '.sidebar-description' ).after( widget );
369+
370+
wpWidgets.save( widget, 0, 0, 1 );
371+
// No longer "new" widget
372+
widget.find( 'input.add_new' ).val('');
373+
374+
$( 'html, body' ).animate({
375+
scrollTop: sidebar.offset().top - 130
376+
}, 200 );
377+
378+
window.setTimeout( function() {
379+
// Cannot use a callback in the animation above as it fires twice,
380+
// have to queue this "by hand".
381+
widget.find( '.widget-title' ).trigger('click');
382+
}, 250 );
383+
},
384+
385+
closeChooser: function() {
386+
var self = this;
387+
388+
$( '#widgets-chooser' ).slideUp( 200, function() {
389+
$('#wpbody-content').append( this );
390+
self.clearWidgetSelection();
391+
});
392+
},
393+
394+
clearWidgetSelection: function() {
395+
$( '#widgets-left' ).removeClass( 'chooser' );
396+
$( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
284397
}
285398
};
286399

287-
$(document).ready(function($){ wpWidgets.init(); });
400+
$(document).ready( function(){ wpWidgets.init(); } );
288401

289402
})(jQuery);

‎src/wp-admin/widgets.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,15 @@ function wp_widgets_access_body_class($classes) {
406406
<br class="clear" />
407407
</div>
408408

409+
<div id="widgets-chooser">
410+
<h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
411+
<ul class="widgets-chooser-sidebars"></ul>
412+
<div class="widgets-chooser-actions">
413+
<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
414+
<button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
415+
</div>
416+
</div>
417+
409418
<?php
410419

411420
/**

0 commit comments

Comments
 (0)