jquery for widgets admin. Props filosofo. see #3824
git-svn-id: http://svn.automattic.com/wordpress/trunk@5934 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryan
parent
f3ed626d52
commit
7c0ecf6202
|
|
@ -14,10 +14,10 @@ body {
|
|||
}
|
||||
|
||||
.dropzone {
|
||||
border: 1px solid #bbb;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #bbb;
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
|
|
@ -26,15 +26,21 @@ body {
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.dropzone ul {
|
||||
list-style-type: none;
|
||||
width: 240px;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.dropzone input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* .module, #lastmodule {
|
||||
.dropzone ul {
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
width: 240px;
|
||||
margin: 0;
|
||||
min-height: 200px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
* .module {
|
||||
width: 238px;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
|
|
@ -42,14 +48,16 @@ body {
|
|||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fbfbfb;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
* .handle, #lastmodule span {
|
||||
* .handle {
|
||||
display: block;
|
||||
width: 216px;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
|
@ -83,53 +91,67 @@ body {
|
|||
clear: left;
|
||||
}
|
||||
|
||||
.placematt {
|
||||
.placemat {
|
||||
cursor: default;
|
||||
margin: 10px 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 238px;
|
||||
float:left;
|
||||
background-color: #ffe;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
* html .placematt {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.placematt h4 {
|
||||
.placemat h4 {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.placematt span {
|
||||
.placemat span {
|
||||
background-color: #ffe;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 10px 10px;
|
||||
position: absolute;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
#palettediv {
|
||||
border: 1px solid #bbb;
|
||||
background-color: #f0f8ff;
|
||||
height:auto;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#palettediv:after, #zones:after, .dropzone:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#palettediv, #zones, .dropzone {
|
||||
display: block;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
* html #palettediv, * html #zones, * html .dropzone {
|
||||
height: 1%;
|
||||
}
|
||||
|
||||
#palettediv h3 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
#palettediv ul {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
#palettediv .module, #lastmodule {
|
||||
#palettediv .module {
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#palettediv .handle, #lastmodule span {
|
||||
#palettediv .handle {
|
||||
height: 40px;
|
||||
font-size: 90%;
|
||||
width: 110px;
|
||||
|
|
@ -140,20 +162,11 @@ body {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
#lastmodule {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
* html #palettediv ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
* html #palettediv .module {
|
||||
float: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#controls {
|
||||
height: 0px;
|
||||
}
|
||||
|
|
@ -212,3 +225,12 @@ body {
|
|||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#dragHelper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#dragHelper li.module {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,10 @@ require_once 'admin.php';
|
|||
if ( ! current_user_can('switch_themes') )
|
||||
wp_die( __( 'Cheatin’ uh?' ));
|
||||
|
||||
wp_enqueue_script( 'scriptaculous-effects' );
|
||||
wp_enqueue_script( 'scriptaculous-dragdrop' );
|
||||
wp_enqueue_script('interface');
|
||||
|
||||
function wp_widgets_admin_head() {
|
||||
global $wp_registered_sidebars, $wp_registered_widgets, $wp_registered_widget_controls;
|
||||
|
||||
define( 'WP_WIDGETS_WIDTH', 1 + 262 * ( count( $wp_registered_sidebars ) ) );
|
||||
define( 'WP_WIDGETS_HEIGHT', 35 * ( count( $wp_registered_widgets ) ) );
|
||||
?>
|
||||
<link rel="stylesheet" href="<?php bloginfo( 'wpurl' ); ?>/wp-admin/css/widgets.css?version=<?php bloginfo('version'); ?>" type="text/css" />
|
||||
<!--[if IE 7]>
|
||||
|
|
@ -20,10 +16,6 @@ function wp_widgets_admin_head() {
|
|||
#palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
.dropzone ul { height: <?php echo constant( 'WP_WIDGETS_HEIGHT' ); ?>px; }
|
||||
#sbadmin #zones { width: <?php echo constant( 'WP_WIDGETS_WIDTH' ); ?>px; }
|
||||
</style>
|
||||
<?php
|
||||
if ( get_bloginfo( 'text_direction' ) == 'rtl' ) {
|
||||
?>
|
||||
|
|
@ -49,127 +41,111 @@ function wp_widgets_admin_head() {
|
|||
var widgets = [<?php echo $widgets; ?>];
|
||||
var controldims = new Array;
|
||||
<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
|
||||
controldims['<?php echo $widget['id']; ?>control'] = new Array;
|
||||
controldims['<?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>;
|
||||
controldims['<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;
|
||||
controldims['#<?php echo $widget['id']; ?>control'] = new Array;
|
||||
controldims['#<?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>;
|
||||
controldims['#<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;
|
||||
<?php endforeach; ?>
|
||||
function initWidgets() {
|
||||
<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
|
||||
$('<?php echo $widget['id']; ?>popper').onclick = function() {popControl('<?php echo $widget['id']; ?>control');};
|
||||
$('<?php echo $widget['id']; ?>closer').onclick = function() {unpopControl('<?php echo $widget['id']; ?>control');};
|
||||
new Draggable('<?php echo $widget['id']; ?>control', {revert:false,handle:'controlhandle',starteffect:function(){},endeffect:function(){},change:function(o){dragChange(o);}});
|
||||
jQuery('#<?php echo $widget['id']; ?>popper').click(function() {popControl('#<?php echo $widget['id']; ?>control');});
|
||||
jQuery('#<?php echo $widget['id']; ?>closer').click(function() {unpopControl('#<?php echo $widget['id']; ?>control');});
|
||||
jQuery('#<?php echo $widget['id']; ?>control').Draggable({handle: '.controlhandle', zIndex: 1000});
|
||||
if ( true && window.opera )
|
||||
$('<?php echo $widget['id']; ?>control').style.border = '1px solid #bbb';
|
||||
jQuery('#<?php echo $widget['id']; ?>control').css('border','1px solid #bbb');
|
||||
<?php endforeach; ?>
|
||||
if ( true && window.opera )
|
||||
$('shadow').style.background = 'transparent';
|
||||
new Effect.Opacity('shadow', {to:0.0});
|
||||
widgets.map(function(o) {o='widgetprefix-'+o; Position.absolutize(o); Position.relativize(o);} );
|
||||
$A(Draggables.drags).map(function(o) {o.startDrag(null); o.finishDrag(null);});
|
||||
//for ( var n in Draggables.drags ) {
|
||||
for ( n=0; n<=Draggables.drags.length; n++ ) {
|
||||
if ( parseInt( n ) ) {
|
||||
if ( Draggables.drags[n].element.id == 'lastmodule' ) {
|
||||
Draggables.drags[n].destroy();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
resetPaletteHeight();
|
||||
jQuery('#shadow').css('opacity','0');
|
||||
jQuery(widgets).each(function(o) {o='#widgetprefix-'+o; jQuery(o).css('position','relative');} );
|
||||
}
|
||||
function resetDroppableHeights() {
|
||||
var max = 6;
|
||||
cols.map(function(o) {var c = $(o).childNodes.length; if ( c > max ) max = c;} );
|
||||
var height = 35 * ( max + 1);
|
||||
cols.map(function(o) {h = (($(o).childNodes.length + 1) * 35); $(o).style.height = (h > 280 ? h : 280) + 'px';} );
|
||||
}
|
||||
function resetPaletteHeight() {
|
||||
var p = $('palette'), pd = $('palettediv'), last = $('lastmodule');
|
||||
p.appendChild(last);
|
||||
if ( Draggables.activeDraggable && last.id == Draggables.activeDraggable.element.id )
|
||||
last = last.previousSibling;
|
||||
var y1 = Position.cumulativeOffset(last)[1] + last.offsetHeight;
|
||||
var y2 = Position.cumulativeOffset(pd)[1] + pd.offsetHeight;
|
||||
var dy = y1 - y2;
|
||||
pd.style.height = (pd.offsetHeight + dy + 9) + "px";
|
||||
jQuery.map(cols, function(o) {
|
||||
var c = jQuery('#' + o + ' li').length;
|
||||
if ( c > max ) max = c;
|
||||
});
|
||||
var maxheight = 35 * ( max + 1);
|
||||
jQuery.map(cols, function(o) {
|
||||
height = 0 == jQuery('#' + o + ' li').length ? maxheight - jQuery('#' + o + 'placemat').height() : maxheight;
|
||||
jQuery('#' + o).height(height);
|
||||
});
|
||||
}
|
||||
function maxHeight(elm) {
|
||||
htmlheight = document.body.parentNode.clientHeight;
|
||||
bodyheight = document.body.clientHeight;
|
||||
var height = htmlheight > bodyheight ? htmlheight : bodyheight;
|
||||
$(elm).style.height = height + 'px';
|
||||
jQuery(elm).height(height);
|
||||
}
|
||||
function getViewportDims() {
|
||||
var x,y;
|
||||
if (self.innerHeight) { // all except Explorer
|
||||
x = self.innerWidth;
|
||||
y = self.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||
x = document.documentElement.clientWidth;
|
||||
y = document.documentElement.clientHeight;
|
||||
} else if (document.body) { // other Explorers
|
||||
x = document.body.clientWidth;
|
||||
y = document.body.clientHeight;
|
||||
}
|
||||
return new Array(x,y);
|
||||
}
|
||||
function dragChange(o) {
|
||||
el = o.element ? o.element : $(o);
|
||||
var p = Position.page(el);
|
||||
var right = p[0];
|
||||
var top = p[1];
|
||||
var left = $('shadow').offsetWidth - (el.offsetWidth + right);
|
||||
var bottom = $('shadow').offsetHeight - (el.offsetHeight + top);
|
||||
if ( right < 1 ) el.style.left = 0;
|
||||
if ( top < 1 ) el.style.top = 0;
|
||||
if ( left < 1 ) el.style.left = (left + right) + 'px';
|
||||
if ( bottom < 1 ) el.style.top = (top + bottom) + 'px';
|
||||
var p = getViewportDims();
|
||||
var screenWidth = p[0];
|
||||
var screenHeight = p[1];
|
||||
var elWidth = parseInt( jQuery(o).css('width') );
|
||||
var elHeight = parseInt( jQuery(o).css('height') );
|
||||
var elLeft = parseInt( jQuery(o).css('left') );
|
||||
var elTop = parseInt( jQuery(o).css('top') );
|
||||
if ( screenWidth < ( parseInt(elLeft) + parseInt(elWidth) ) )
|
||||
jQuery(o).css('left', ( screenWidth - elWidth ) + 'px' );
|
||||
if ( screenHeight < ( parseInt(elTop) + parseInt(elHeight) ) )
|
||||
jQuery(o).css('top', ( screenHeight - elHeight ) + 'px' );
|
||||
if ( elLeft < 1 )
|
||||
jQuery(o).css('left', '1px');
|
||||
if ( elTop < 1 )
|
||||
jQuery(o).css('top', '1px');
|
||||
}
|
||||
function popControl(elm) {
|
||||
el = $(elm);
|
||||
el.style.width = controldims[elm]['width'] + 'px';
|
||||
el.style.height = controldims[elm]['height'] + 'px';
|
||||
var x = ( document.body.clientWidth - controldims[elm]['width'] ) / 2;
|
||||
var y = ( document.body.parentNode.clientHeight - controldims[elm]['height'] ) / 2;
|
||||
el.style.position = 'absolute';
|
||||
el.style.right = '' + x + 'px';
|
||||
el.style.top = '' + y + 'px';
|
||||
el.style.zIndex = 1000;
|
||||
el.className='control';
|
||||
$('shadow').onclick = function() {unpopControl(elm);};
|
||||
window.onresize = function(){maxHeight('shadow');dragChange(elm);};
|
||||
jQuery(elm).css({display: 'block', width: controldims[elm]['width'] + 'px', height: controldims[elm]['height'] + 'px', position: 'absolute', right: x + 'px', top: y + 'px', zIndex: '1000' });
|
||||
jQuery(elm).attr('class','control');
|
||||
jQuery('#shadow').click(function() {unpopControl(elm);});
|
||||
window.onresize = function(){maxHeight('#shadow');dragChange(elm);};
|
||||
popShadow();
|
||||
}
|
||||
function popShadow() {
|
||||
maxHeight('shadow');
|
||||
var shadow = $('shadow');
|
||||
shadow.style.zIndex = 999;
|
||||
shadow.style.display = 'block';
|
||||
new Effect.Opacity('shadow', {duration:0.5, from:0.0, to:0.2});
|
||||
maxHeight('#shadow');
|
||||
jQuery('#shadow').css({zIndex: '999', display: 'block'});
|
||||
jQuery('#shadow').fadeTo('fast', 0.2);
|
||||
}
|
||||
function unpopShadow() {
|
||||
new Effect.Opacity('shadow', {to:0.0});
|
||||
$('shadow').style.display = 'none';
|
||||
jQuery('#shadow').fadeOut('fast', function() {jQuery('#shadow').hide()});
|
||||
}
|
||||
function unpopControl(el) {
|
||||
$(el).className='hidden';
|
||||
jQuery(el).attr('class','hidden');
|
||||
jQuery(el).hide();
|
||||
unpopShadow();
|
||||
}
|
||||
function serializeAll() {
|
||||
<?php foreach ( $wp_registered_sidebars as $index => $sidebar ) : ?>
|
||||
$('<?php echo $index; ?>order').value = Sortable.serialize('<?php echo $index; ?>');
|
||||
<?php $i = 0; foreach ( $wp_registered_sidebars as $index => $sidebar ) : $i++; ?>
|
||||
var serial<?php echo $i ?> = jQuery.SortSerialize('<?php echo $index ?>');
|
||||
jQuery('#<?php echo $index ?>order').attr('value',serial<?php echo $i ?>.hash.replace(/widgetprefix-/g, ''));
|
||||
<?php endforeach; ?>
|
||||
}
|
||||
function updateAll() {
|
||||
resetDroppableHeights();
|
||||
resetPaletteHeight();
|
||||
cols.map(function(o){
|
||||
var pm = $(o+'placematt');
|
||||
if ( $(o).childNodes.length == 0 ) {
|
||||
pm.style.display = 'block';
|
||||
//Position.absolutize(o+'placematt');
|
||||
} else {
|
||||
pm.style.display = 'none';
|
||||
}
|
||||
jQuery.map(cols, function(o) {
|
||||
if ( jQuery('#' + o + ' li').length )
|
||||
jQuery('#'+o+'placemat span.handle').hide();
|
||||
else
|
||||
jQuery('#'+o+'placemat span.handle').show();
|
||||
});
|
||||
resetDroppableHeights();
|
||||
}
|
||||
function noSelection(event) {
|
||||
if ( document.selection ) {
|
||||
var range = document.selection.createRange();
|
||||
range.collapse(false);
|
||||
range.select();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
addLoadEvent(updateAll);
|
||||
addLoadEvent(initWidgets);
|
||||
Event.observe(window, 'resize', resetPaletteHeight);
|
||||
jQuery(document).ready( function() {
|
||||
updateAll();
|
||||
initWidgets();
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
<?php
|
||||
|
|
@ -313,7 +289,7 @@ if ( isset( $_POST['action'] ) ) {
|
|||
<div class="dropzone">
|
||||
<h3><?php echo $sidebar['name']; ?></h3>
|
||||
|
||||
<div id="<?php echo $index; ?>placematt" class="module placemat">
|
||||
<div id="<?php echo $index; ?>placemat" class="placemat">
|
||||
<span class="handle">
|
||||
<h4><?php _e( 'Default Sidebar' ); ?></h4>
|
||||
<?php _e( 'Your theme will display its usual sidebar when this box is empty. Dragging widgets into this box will replace the usual sidebar with your customized sidebar.' ); ?>
|
||||
|
|
@ -334,8 +310,6 @@ if ( isset( $_POST['action'] ) ) {
|
|||
}
|
||||
?>
|
||||
|
||||
<br class="clear" />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="palettediv">
|
||||
|
|
@ -347,19 +321,18 @@ if ( isset( $_POST['action'] ) ) {
|
|||
wp_widget_draggable( $name );
|
||||
}
|
||||
?>
|
||||
<li id="lastmodule"><span></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
jQuery(document).ready(function(){
|
||||
<?php foreach ( $containers as $container ) { ?>
|
||||
Sortable.create("<?php echo $container; ?>", {
|
||||
dropOnEmpty: true, containment: [<?php echo $c_string; ?>],
|
||||
handle: 'handle', constraint: false, onUpdate: updateAll,
|
||||
format: /^widgetprefix-(.*)$/
|
||||
});
|
||||
jQuery('ul#<?php echo $container; ?>').Sortable({
|
||||
accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll
|
||||
});
|
||||
<?php } ?>
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue