golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 2007-08-23 22:34:15 +00:00
parent f3ed626d52
commit 7c0ecf6202
2 changed files with 133 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
wp-admin/css/widgets.css
View File

@ -14,10 +14,10 @@ body {
} }
.dropzone { .dropzone {
border: 1px solid #bbb;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
padding: 5px; padding: 5px;
border: 1px solid #bbb;
background-color: #f0f8ff; background-color: #f0f8ff;
} }
@ -26,15 +26,21 @@ body {
color: #333; color: #333;
} }
.dropzone ul { .dropzone input {
list-style-type: none; display: none;
width: 240px;
float: left;
margin: 0;
padding: 0;
} }
* .module, #lastmodule { .dropzone ul {
float: left;
list-style-type: none;
width: 240px;
margin: 0;
min-height: 200px;
padding: 0;
display: block;
}
* .module {
width: 238px; width: 238px;
padding: 0; padding: 0;
margin: 5px 0; margin: 5px 0;
@ -42,14 +48,16 @@ body {
display: block; display: block;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #fbfbfb; background-color: #fbfbfb;
position: relative;
text-align: left; text-align: left;
line-height: 25px; line-height: 25px;
} }
* .handle, #lastmodule span { * .handle {
display: block; display: block;
width: 216px; width: 216px;
padding: 0 10px; padding: 0 10px;
position: relative;
border-top: 1px solid #f2f2f2; border-top: 1px solid #f2f2f2;
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
@ -83,53 +91,67 @@ body {
clear: left; clear: left;
} }
.placematt { .placemat {
cursor: default; cursor: default;
margin: 10px 0 0; margin: 0;
padding: 0; padding: 0;
width: 238px; position: relative;
float:left;
background-color: #ffe;
} }
* html .placematt { .placemat h4 {
margin-top: 5px;
}
.placematt h4 {
text-align: center; text-align: center;
margin-bottom: 5px;
} }
.placematt span { .placemat span {
background-color: #ffe;
border: 1px solid #ccc;
padding: 0 10px 10px; padding: 0 10px 10px;
position: absolute;
text-align: justify; text-align: justify;
} }
#palettediv { #palettediv {
border: 1px solid #bbb; border: 1px solid #bbb;
background-color: #f0f8ff; background-color: #f0f8ff;
height:auto; height:auto;
margin-top: 10px; 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 { #palettediv h3 {
text-align: center; text-align: center;
color: #333; color: #333;
min-height: 1px;
} }
#palettediv ul { #palettediv ul {
padding: 0 0 0 10px; padding: 0 0 0 10px;
} }
#palettediv .module, #lastmodule { #palettediv .module {
margin-right: 10px; margin-right: 10px;
float: left; float: left;
width: 120px; width: 120px;
} }
#palettediv .handle, #lastmodule span { #palettediv .handle {
height: 40px; height: 40px;
font-size: 90%; font-size: 90%;
width: 110px; width: 110px;
@ -140,20 +162,11 @@ body {
visibility: hidden; visibility: hidden;
} }
#lastmodule {
visibility: hidden;
}
* html #palettediv ul { * html #palettediv ul {
margin: 0; margin: 0;
padding: 0 0 0 10px; padding: 0 0 0 10px;
} }
* html #palettediv .module {
float: none;
display: inline;
}
#controls { #controls {
height: 0px; height: 0px;
} }
@ -212,3 +225,12 @@ body {
left: 0px; left: 0px;
width: 100%; width: 100%;
} }
#dragHelper {
position: absolute;
}
#dragHelper li.module {
display: block;
float: left;
}

183
wp-admin/widgets.php
View File

@ -5,14 +5,10 @@ require_once 'admin.php';
if ( ! current_user_can('switch_themes') ) if ( ! current_user_can('switch_themes') )
wp_die( __( 'Cheatin’ uh?' )); wp_die( __( 'Cheatin’ uh?' ));
wp_enqueue_script( 'scriptaculous-effects' ); wp_enqueue_script('interface');
wp_enqueue_script( 'scriptaculous-dragdrop' );
function wp_widgets_admin_head() { function wp_widgets_admin_head() {
global $wp_registered_sidebars, $wp_registered_widgets, $wp_registered_widget_controls; 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" /> <link rel="stylesheet" href="<?php bloginfo( 'wpurl' ); ?>/wp-admin/css/widgets.css?version=<?php bloginfo('version'); ?>" type="text/css" />
<!--[if IE 7]> <!--[if IE 7]>
@ -20,10 +16,6 @@ function wp_widgets_admin_head() {
#palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; } #palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; }
</style> </style>
<![endif]--> <![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 <?php
if ( get_bloginfo( 'text_direction' ) == 'rtl' ) { if ( get_bloginfo( 'text_direction' ) == 'rtl' ) {
?> ?>
@ -49,127 +41,111 @@ function wp_widgets_admin_head() {
var widgets = [<?php echo $widgets; ?>]; var widgets = [<?php echo $widgets; ?>];
var controldims = new Array; var controldims = new Array;
<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?> <?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
controldims['<?php echo $widget['id']; ?>control'] = new Array; 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']['width'] = <?php echo (int) $widget['width']; ?>;
controldims['<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>; controldims['#<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;
<?php endforeach; ?> <?php endforeach; ?>
function initWidgets() { function initWidgets() {
<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?> <?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
$('<?php echo $widget['id']; ?>popper').onclick = function() {popControl('<?php echo $widget['id']; ?>control');}; jQuery('#<?php echo $widget['id']; ?>popper').click(function() {popControl('#<?php echo $widget['id']; ?>control');});
$('<?php echo $widget['id']; ?>closer').onclick = function() {unpopControl('<?php echo $widget['id']; ?>control');}; jQuery('#<?php echo $widget['id']; ?>closer').click(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']; ?>control').Draggable({handle: '.controlhandle', zIndex: 1000});
if ( true && window.opera ) 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; ?> <?php endforeach; ?>
if ( true && window.opera ) jQuery('#shadow').css('opacity','0');
$('shadow').style.background = 'transparent'; jQuery(widgets).each(function(o) {o='#widgetprefix-'+o; jQuery(o).css('position','relative');} );
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();
} }
function resetDroppableHeights() { function resetDroppableHeights() {
var max = 6; var max = 6;
cols.map(function(o) {var c = $(o).childNodes.length; if ( c > max ) max = c;} ); jQuery.map(cols, function(o) {
var height = 35 * ( max + 1); var c = jQuery('#' + o + ' li').length;
cols.map(function(o) {h = (($(o).childNodes.length + 1) * 35); $(o).style.height = (h > 280 ? h : 280) + 'px';} ); if ( c > max ) max = c;
} });
function resetPaletteHeight() { var maxheight = 35 * ( max + 1);
var p = $('palette'), pd = $('palettediv'), last = $('lastmodule'); jQuery.map(cols, function(o) {
p.appendChild(last); height = 0 == jQuery('#' + o + ' li').length ? maxheight - jQuery('#' + o + 'placemat').height() : maxheight;
if ( Draggables.activeDraggable && last.id == Draggables.activeDraggable.element.id ) jQuery('#' + o).height(height);
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";
} }
function maxHeight(elm) { function maxHeight(elm) {
htmlheight = document.body.parentNode.clientHeight; htmlheight = document.body.parentNode.clientHeight;
bodyheight = document.body.clientHeight; bodyheight = document.body.clientHeight;
var height = htmlheight > bodyheight ? htmlheight : bodyheight; 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) { function dragChange(o) {
el = o.element ? o.element : $(o); var p = getViewportDims();
var p = Position.page(el); var screenWidth = p[0];
var right = p[0]; var screenHeight = p[1];
var top = p[1]; var elWidth = parseInt( jQuery(o).css('width') );
var left = $('shadow').offsetWidth - (el.offsetWidth + right); var elHeight = parseInt( jQuery(o).css('height') );
var bottom = $('shadow').offsetHeight - (el.offsetHeight + top); var elLeft = parseInt( jQuery(o).css('left') );
if ( right < 1 ) el.style.left = 0; var elTop = parseInt( jQuery(o).css('top') );
if ( top < 1 ) el.style.top = 0; if ( screenWidth < ( parseInt(elLeft) + parseInt(elWidth) ) )
if ( left < 1 ) el.style.left = (left + right) + 'px'; jQuery(o).css('left', ( screenWidth - elWidth ) + 'px' );
if ( bottom < 1 ) el.style.top = (top + bottom) + '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) { 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 x = ( document.body.clientWidth - controldims[elm]['width'] ) / 2;
var y = ( document.body.parentNode.clientHeight - controldims[elm]['height'] ) / 2; var y = ( document.body.parentNode.clientHeight - controldims[elm]['height'] ) / 2;
el.style.position = 'absolute'; 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' });
el.style.right = '' + x + 'px'; jQuery(elm).attr('class','control');
el.style.top = '' + y + 'px'; jQuery('#shadow').click(function() {unpopControl(elm);});
el.style.zIndex = 1000; window.onresize = function(){maxHeight('#shadow');dragChange(elm);};
el.className='control';
$('shadow').onclick = function() {unpopControl(elm);};
window.onresize = function(){maxHeight('shadow');dragChange(elm);};
popShadow(); popShadow();
} }
function popShadow() { function popShadow() {
maxHeight('shadow'); maxHeight('#shadow');
var shadow = $('shadow'); jQuery('#shadow').css({zIndex: '999', display: 'block'});
shadow.style.zIndex = 999; jQuery('#shadow').fadeTo('fast', 0.2);
shadow.style.display = 'block';
new Effect.Opacity('shadow', {duration:0.5, from:0.0, to:0.2});
} }
function unpopShadow() { function unpopShadow() {
new Effect.Opacity('shadow', {to:0.0}); jQuery('#shadow').fadeOut('fast', function() {jQuery('#shadow').hide()});
$('shadow').style.display = 'none';
} }
function unpopControl(el) { function unpopControl(el) {
$(el).className='hidden'; jQuery(el).attr('class','hidden');
jQuery(el).hide();
unpopShadow(); unpopShadow();
} }
function serializeAll() { function serializeAll() {
<?php foreach ( $wp_registered_sidebars as $index => $sidebar ) : ?> <?php $i = 0; foreach ( $wp_registered_sidebars as $index => $sidebar ) : $i++; ?>
$('<?php echo $index; ?>order').value = Sortable.serialize('<?php echo $index; ?>'); 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; ?> <?php endforeach; ?>
} }
function updateAll() { function updateAll() {
resetDroppableHeights(); jQuery.map(cols, function(o) {
resetPaletteHeight(); if ( jQuery('#' + o + ' li').length )
cols.map(function(o){ jQuery('#'+o+'placemat span.handle').hide();
var pm = $(o+'placematt'); else
if ( $(o).childNodes.length == 0 ) { jQuery('#'+o+'placemat span.handle').show();
pm.style.display = 'block';
//Position.absolutize(o+'placematt');
} else {
pm.style.display = 'none';
}
}); });
resetDroppableHeights();
} }
function noSelection(event) { jQuery(document).ready( function() {
if ( document.selection ) { updateAll();
var range = document.selection.createRange(); initWidgets();
range.collapse(false); });
range.select();
return false;
}
}
addLoadEvent(updateAll);
addLoadEvent(initWidgets);
Event.observe(window, 'resize', resetPaletteHeight);
// ]]> // ]]>
</script> </script>
<?php <?php
@ -313,7 +289,7 @@ if ( isset( $_POST['action'] ) ) {
<div class="dropzone"> <div class="dropzone">
<h3><?php echo $sidebar['name']; ?></h3> <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"> <span class="handle">
<h4><?php _e( 'Default Sidebar' ); ?></h4> <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.' ); ?> <?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>
<div id="palettediv"> <div id="palettediv">
@ -347,19 +321,18 @@ if ( isset( $_POST['action'] ) ) {
wp_widget_draggable( $name ); wp_widget_draggable( $name );
} }
?> ?>
<li id="lastmodule"><span></span></li>
</ul> </ul>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
// <![CDATA[ // <![CDATA[
jQuery(document).ready(function(){
<?php foreach ( $containers as $container ) { ?> <?php foreach ( $containers as $container ) { ?>
Sortable.create("<?php echo $container; ?>", { jQuery('ul#<?php echo $container; ?>').Sortable({
dropOnEmpty: true, containment: [<?php echo $c_string; ?>], accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll
handle: 'handle', constraint: false, onUpdate: updateAll, });
format: /^widgetprefix-(.*)$/
});
<?php } ?> <?php } ?>
});
// ]]> // ]]>
</script> </script>