diff --git a/wp-admin/css/widgets.css b/wp-admin/css/widgets.css index bcc7eb007..f46c4ce8b 100644 --- a/wp-admin/css/widgets.css +++ b/wp-admin/css/widgets.css @@ -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; +} diff --git a/wp-admin/widgets.php b/wp-admin/widgets.php index 2f93ce40e..44b3dcd0a 100644 --- a/wp-admin/widgets.php +++ b/wp-admin/widgets.php @@ -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 ) ) ); ?> - @@ -49,127 +41,111 @@ function wp_widgets_admin_head() { var widgets = []; var controldims = new Array; $widget ) : ?> - controldims['control'] = new Array; - controldims['control']['width'] = ; - controldims['control']['height'] = ; + controldims['#control'] = new Array; + controldims['#control']['width'] = ; + controldims['#control']['height'] = ; function initWidgets() { $widget ) : ?> - $('popper').onclick = function() {popControl('control');}; - $('closer').onclick = function() {unpopControl('control');}; - new Draggable('control', {revert:false,handle:'controlhandle',starteffect:function(){},endeffect:function(){},change:function(o){dragChange(o);}}); + jQuery('#popper').click(function() {popControl('#control');}); + jQuery('#closer').click(function() {unpopControl('#control');}); + jQuery('#control').Draggable({handle: '.controlhandle', zIndex: 1000}); if ( true && window.opera ) - $('control').style.border = '1px solid #bbb'; + jQuery('#control').css('border','1px solid #bbb'); - 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() { - $sidebar ) : ?> - $('order').value = Sortable.serialize(''); + $sidebar ) : $i++; ?> + var serial = jQuery.SortSerialize(''); + jQuery('#order').attr('value',serial.hash.replace(/widgetprefix-/g, '')); } 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(); + }); // ]]>

-
+

@@ -334,8 +310,6 @@ if ( isset( $_POST['action'] ) ) { } ?> -
-
@@ -347,19 +321,18 @@ if ( isset( $_POST['action'] ) ) { wp_widget_draggable( $name ); } ?> -