Merge the Widgets Area Chooser feature plugin. First run, see #25821
Built from https://develop.svn.wordpress.org/trunk@26054 git-svn-id: http://core.svn.wordpress.org/trunk@25979 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
5129b9d0ff
commit
753e745796
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 = $('<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' );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
saveOrder : function(sb) {
|
||||
|
|
@ -208,7 +261,7 @@ wpWidgets = {
|
|||
};
|
||||
|
||||
if ( del )
|
||||
a['delete_widget'] = 1;
|
||||
a.delete_widget = 1;
|
||||
|
||||
data += '&' + $.param(a);
|
||||
|
||||
|
|
@ -219,7 +272,7 @@ wpWidgets = {
|
|||
if ( !$('input.widget_number', widget).val() ) {
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
|
@ -272,7 +325,7 @@ wpWidgets = {
|
|||
fixLabels : function(widget) {
|
||||
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');
|
||||
});
|
||||
},
|
||||
|
|
@ -281,9 +334,69 @@ wpWidgets = {
|
|||
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 );
|
||||
|
||||
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);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -406,6 +406,15 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
|
|||
<br class="clear" />
|
||||
</div>
|
||||
|
||||
<div id="widgets-chooser">
|
||||
<h3><?php _e( 'Choose an area to place this widget…' ); ?></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
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue