Ticket #3824: jquery_admin_widgets.diff
File jquery_admin_widgets.diff, 13.7 KB (added by , 17 years ago) |
---|
-
wp-admin/css/widgets.css
14 14 } 15 15 16 16 .dropzone { 17 border: 1px solid #bbb; 17 18 float: left; 18 19 margin-right: 10px; 19 20 padding: 5px; 20 border: 1px solid #bbb;21 21 background-color: #f0f8ff; 22 22 } 23 23 … … 26 26 color: #333; 27 27 } 28 28 29 .dropzone input { 30 display: none; 31 } 32 29 33 .dropzone ul { 34 float: left; 30 35 list-style-type: none; 31 36 width: 240px; 32 float: left;33 37 margin: 0; 38 min-height: 200px; 34 39 padding: 0; 40 display: block; 35 41 } 36 42 37 * .module , #lastmodule{43 * .module { 38 44 width: 238px; 39 45 padding: 0; 40 46 margin: 5px 0; … … 42 48 display: block; 43 49 border: 1px solid #ccc; 44 50 background-color: #fbfbfb; 51 position: relative; 45 52 text-align: left; 46 53 line-height: 25px; 47 54 } 48 55 49 * .handle , #lastmodule span{56 * .handle { 50 57 display: block; 51 58 width: 216px; 52 59 padding: 0 10px; 60 position: relative; 53 61 border-top: 1px solid #f2f2f2; 54 62 border-right: 1px solid #e8e8e8; 55 63 border-bottom: 1px solid #e8e8e8; … … 83 91 clear: left; 84 92 } 85 93 86 .placemat t{94 .placemat { 87 95 cursor: default; 88 margin: 10px 00;96 margin: 0; 89 97 padding: 0; 90 width: 238px; 91 float:left; 92 background-color: #ffe; 98 position: relative; 93 99 } 94 100 95 * html .placematt { 96 margin-top: 5px; 97 } 98 99 .placematt h4 { 101 .placemat h4 { 100 102 text-align: center; 101 margin-bottom: 5px;102 103 } 103 104 104 .placematt span { 105 .placemat span { 106 background-color: #ffe; 107 border: 1px solid #ccc; 105 108 padding: 0 10px 10px; 109 position: absolute; 106 110 text-align: justify; 107 111 } 108 112 109 110 113 #palettediv { 111 114 border: 1px solid #bbb; 112 115 background-color: #f0f8ff; 113 116 height:auto; 114 117 margin-top: 10px; 118 padding-bottom: 10px; 115 119 } 116 120 121 #palettediv:after, #zones:after, .dropzone:after { 122 content: "."; 123 display: block; 124 height: 0; 125 clear: both; 126 visibility: hidden; 127 } 128 129 #palettediv, #zones, .dropzone { 130 display: block; 131 min-height: 1px; 132 } 133 134 * html #palettediv, * html #zones, * html .dropzone { 135 height: 1%; 136 } 137 117 138 #palettediv h3 { 118 139 text-align: center; 119 140 color: #333; 141 min-height: 1px; 120 142 } 121 143 122 144 #palettediv ul { 123 145 padding: 0 0 0 10px; 124 146 } 125 147 126 #palettediv .module , #lastmodule{148 #palettediv .module { 127 149 margin-right: 10px; 128 150 float: left; 129 151 width: 120px; 130 152 } 131 153 132 #palettediv .handle , #lastmodule span{154 #palettediv .handle { 133 155 height: 40px; 134 156 font-size: 90%; 135 157 width: 110px; … … 140 162 visibility: hidden; 141 163 } 142 164 143 #lastmodule {144 visibility: hidden;145 }146 147 165 * html #palettediv ul { 148 166 margin: 0; 149 167 padding: 0 0 0 10px; 150 168 } 151 169 152 * html #palettediv .module {153 float: none;154 display: inline;155 }156 157 170 #controls { 158 171 height: 0px; 159 172 } … … 212 225 left: 0px; 213 226 width: 100%; 214 227 } 228 229 #dragHelper { 230 position: absolute; 231 } 232 233 #dragHelper li.module { 234 display: block; 235 float: left; 236 } -
wp-admin/widgets.php
5 5 if ( ! current_user_can('switch_themes') ) 6 6 wp_die( __( 'Cheatin’ uh?' )); 7 7 8 wp_enqueue_script( 'scriptaculous-effects' ); 9 wp_enqueue_script( 'scriptaculous-dragdrop' ); 8 wp_enqueue_script('interface'); 10 9 11 10 function wp_widgets_admin_head() { 12 11 global $wp_registered_sidebars, $wp_registered_widgets, $wp_registered_widget_controls; 13 14 define( 'WP_WIDGETS_WIDTH', 1 + 262 * ( count( $wp_registered_sidebars ) ) );15 define( 'WP_WIDGETS_HEIGHT', 35 * ( count( $wp_registered_widgets ) ) );16 12 ?> 17 13 <link rel="stylesheet" href="<?php bloginfo( 'wpurl' ); ?>/wp-admin/css/widgets.css?version=<?php bloginfo('version'); ?>" type="text/css" /> 18 14 <!--[if IE 7]> … … 20 16 #palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; } 21 17 </style> 22 18 <![endif]--> 23 <style type="text/css">24 .dropzone ul { height: <?php echo constant( 'WP_WIDGETS_HEIGHT' ); ?>px; }25 #sbadmin #zones { width: <?php echo constant( 'WP_WIDGETS_WIDTH' ); ?>px; }26 </style>27 19 <?php 28 20 if ( get_bloginfo( 'text_direction' ) == 'rtl' ) { 29 21 ?> … … 49 41 var widgets = [<?php echo $widgets; ?>]; 50 42 var controldims = new Array; 51 43 <?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?> 52 controldims[' <?php echo $widget['id']; ?>control'] = new Array;53 controldims[' <?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>;54 controldims[' <?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;44 controldims['#<?php echo $widget['id']; ?>control'] = new Array; 45 controldims['#<?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>; 46 controldims['#<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>; 55 47 <?php endforeach; ?> 56 48 function initWidgets() { 57 49 <?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?> 58 $('<?php echo $widget['id']; ?>popper').onclick = function() {popControl('<?php echo $widget['id']; ?>control');};59 $('<?php echo $widget['id']; ?>closer').onclick = function() {unpopControl('<?php echo $widget['id']; ?>control');};60 new Draggable('<?php echo $widget['id']; ?>control', {revert:false,handle:'controlhandle',starteffect:function(){},endeffect:function(){},change:function(o){dragChange(o);}});50 jQuery('#<?php echo $widget['id']; ?>popper').click(function() {popControl('#<?php echo $widget['id']; ?>control');}); 51 jQuery('#<?php echo $widget['id']; ?>closer').click(function() {unpopControl('#<?php echo $widget['id']; ?>control');}); 52 jQuery('#<?php echo $widget['id']; ?>control').Draggable({handle: '.controlhandle', zIndex: 1000}); 61 53 if ( true && window.opera ) 62 $('<?php echo $widget['id']; ?>control').style.border = '1px solid #bbb';54 jQuery('#<?php echo $widget['id']; ?>control').css('border','1px solid #bbb'); 63 55 <?php endforeach; ?> 64 if ( true && window.opera ) 65 $('shadow').style.background = 'transparent'; 66 new Effect.Opacity('shadow', {to:0.0}); 67 widgets.map(function(o) {o='widgetprefix-'+o; Position.absolutize(o); Position.relativize(o);} ); 68 $A(Draggables.drags).map(function(o) {o.startDrag(null); o.finishDrag(null);}); 69 //for ( var n in Draggables.drags ) { 70 for ( n=0; n<=Draggables.drags.length; n++ ) { 71 if ( parseInt( n ) ) { 72 if ( Draggables.drags[n].element.id == 'lastmodule' ) { 73 Draggables.drags[n].destroy(); 74 break; 75 } 76 } 77 } 78 resetPaletteHeight(); 56 jQuery('#shadow').css('opacity','0'); 57 jQuery(widgets).each(function(o) {o='#widgetprefix-'+o; jQuery(o).css('position','relative');} ); 79 58 } 80 59 function resetDroppableHeights() { 81 60 var max = 6; 82 cols.map(function(o) {var c = $(o).childNodes.length; if ( c > max ) max = c;} ); 83 var height = 35 * ( max + 1); 84 cols.map(function(o) {h = (($(o).childNodes.length + 1) * 35); $(o).style.height = (h > 280 ? h : 280) + 'px';} ); 61 jQuery.map(cols, function(o) { 62 var c = jQuery('#' + o + ' li').length; 63 if ( c > max ) max = c; 64 }); 65 var maxheight = 35 * ( max + 1); 66 jQuery.map(cols, function(o) { 67 height = 0 == jQuery('#' + o + ' li').length ? maxheight - jQuery('#' + o + 'placemat').height() : maxheight; 68 jQuery('#' + o).height(height); 69 }); 85 70 } 86 function resetPaletteHeight() {87 var p = $('palette'), pd = $('palettediv'), last = $('lastmodule');88 p.appendChild(last);89 if ( Draggables.activeDraggable && last.id == Draggables.activeDraggable.element.id )90 last = last.previousSibling;91 var y1 = Position.cumulativeOffset(last)[1] + last.offsetHeight;92 var y2 = Position.cumulativeOffset(pd)[1] + pd.offsetHeight;93 var dy = y1 - y2;94 pd.style.height = (pd.offsetHeight + dy + 9) + "px";95 }96 71 function maxHeight(elm) { 97 72 htmlheight = document.body.parentNode.clientHeight; 98 73 bodyheight = document.body.clientHeight; 99 74 var height = htmlheight > bodyheight ? htmlheight : bodyheight; 100 $(elm).style.height = height + 'px';75 jQuery(elm).height(height); 101 76 } 77 function getViewportDims() { 78 var x,y; 79 if (self.innerHeight) { // all except Explorer 80 x = self.innerWidth; 81 y = self.innerHeight; 82 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 83 x = document.documentElement.clientWidth; 84 y = document.documentElement.clientHeight; 85 } else if (document.body) { // other Explorers 86 x = document.body.clientWidth; 87 y = document.body.clientHeight; 88 } 89 return new Array(x,y); 90 } 102 91 function dragChange(o) { 103 el = o.element ? o.element : $(o); 104 var p = Position.page(el); 105 var right = p[0]; 106 var top = p[1]; 107 var left = $('shadow').offsetWidth - (el.offsetWidth + right); 108 var bottom = $('shadow').offsetHeight - (el.offsetHeight + top); 109 if ( right < 1 ) el.style.left = 0; 110 if ( top < 1 ) el.style.top = 0; 111 if ( left < 1 ) el.style.left = (left + right) + 'px'; 112 if ( bottom < 1 ) el.style.top = (top + bottom) + 'px'; 92 var p = getViewportDims(); 93 var screenWidth = p[0]; 94 var screenHeight = p[1]; 95 var elWidth = parseInt( jQuery(o).css('width') ); 96 var elHeight = parseInt( jQuery(o).css('height') ); 97 var elLeft = parseInt( jQuery(o).css('left') ); 98 var elTop = parseInt( jQuery(o).css('top') ); 99 if ( screenWidth < ( parseInt(elLeft) + parseInt(elWidth) ) ) 100 jQuery(o).css('left', ( screenWidth - elWidth ) + 'px' ); 101 if ( screenHeight < ( parseInt(elTop) + parseInt(elHeight) ) ) 102 jQuery(o).css('top', ( screenHeight - elHeight ) + 'px' ); 103 if ( elLeft < 1 ) 104 jQuery(o).css('left', '1px'); 105 if ( elTop < 1 ) 106 jQuery(o).css('top', '1px'); 113 107 } 114 108 function popControl(elm) { 115 el = $(elm);116 el.style.width = controldims[elm]['width'] + 'px';117 el.style.height = controldims[elm]['height'] + 'px';118 109 var x = ( document.body.clientWidth - controldims[elm]['width'] ) / 2; 119 110 var y = ( document.body.parentNode.clientHeight - controldims[elm]['height'] ) / 2; 120 el.style.position = 'absolute'; 121 el.style.right = '' + x + 'px'; 122 el.style.top = '' + y + 'px'; 123 el.style.zIndex = 1000; 124 el.className='control'; 125 $('shadow').onclick = function() {unpopControl(elm);}; 126 window.onresize = function(){maxHeight('shadow');dragChange(elm);}; 111 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' }); 112 jQuery(elm).attr('class','control'); 113 jQuery('#shadow').click(function() {unpopControl(elm);}); 114 window.onresize = function(){maxHeight('#shadow');dragChange(elm);}; 127 115 popShadow(); 128 116 } 129 117 function popShadow() { 130 maxHeight('shadow'); 131 var shadow = $('shadow'); 132 shadow.style.zIndex = 999; 133 shadow.style.display = 'block'; 134 new Effect.Opacity('shadow', {duration:0.5, from:0.0, to:0.2}); 118 maxHeight('#shadow'); 119 jQuery('#shadow').css({zIndex: '999', display: 'block'}); 120 jQuery('#shadow').fadeTo('fast', 0.2); 135 121 } 136 122 function unpopShadow() { 137 new Effect.Opacity('shadow', {to:0.0}); 138 $('shadow').style.display = 'none'; 123 jQuery('#shadow').fadeOut('fast', function() {jQuery('#shadow').hide()}); 139 124 } 140 125 function unpopControl(el) { 141 $(el).className='hidden'; 126 jQuery(el).attr('class','hidden'); 127 jQuery(el).hide(); 142 128 unpopShadow(); 143 129 } 144 130 function serializeAll() { 145 <?php foreach ( $wp_registered_sidebars as $index => $sidebar ) : ?> 146 $('<?php echo $index; ?>order').value = Sortable.serialize('<?php echo $index; ?>'); 131 <?php $i = 0; foreach ( $wp_registered_sidebars as $index => $sidebar ) : $i++; ?> 132 var serial<?php echo $i ?> = jQuery.SortSerialize('<?php echo $index ?>'); 133 jQuery('#<?php echo $index ?>order').attr('value',serial<?php echo $i ?>.hash.replace(/widgetprefix-/g, '')); 147 134 <?php endforeach; ?> 148 135 } 149 136 function updateAll() { 150 resetDroppableHeights(); 151 resetPaletteHeight(); 152 cols.map(function(o){ 153 var pm = $(o+'placematt'); 154 if ( $(o).childNodes.length == 0 ) { 155 pm.style.display = 'block'; 156 //Position.absolutize(o+'placematt'); 157 } else { 158 pm.style.display = 'none'; 159 } 137 jQuery.map(cols, function(o) { 138 if ( jQuery('#' + o + ' li').length ) 139 jQuery('#'+o+'placemat span.handle').hide(); 140 else 141 jQuery('#'+o+'placemat span.handle').show(); 160 142 }); 143 resetDroppableHeights(); 161 144 } 162 function noSelection(event) { 163 if ( document.selection ) { 164 var range = document.selection.createRange(); 165 range.collapse(false); 166 range.select(); 167 return false; 168 } 169 } 170 addLoadEvent(updateAll); 171 addLoadEvent(initWidgets); 172 Event.observe(window, 'resize', resetPaletteHeight); 145 jQuery(document).ready( function() { 146 updateAll(); 147 initWidgets(); 148 }); 173 149 // ]]> 174 150 </script> 175 151 <?php … … 313 289 <div class="dropzone"> 314 290 <h3><?php echo $sidebar['name']; ?></h3> 315 291 316 <div id="<?php echo $index; ?>placemat t" class="moduleplacemat">292 <div id="<?php echo $index; ?>placemat" class="placemat"> 317 293 <span class="handle"> 318 294 <h4><?php _e( 'Default Sidebar' ); ?></h4> 319 295 <?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 310 } 335 311 ?> 336 312 337 <br class="clear" />338 339 313 </div> 340 314 341 315 <div id="palettediv"> … … 347 321 wp_widget_draggable( $name ); 348 322 } 349 323 ?> 350 <li id="lastmodule"><span></span></li>351 324 </ul> 352 325 </div> 353 326 354 327 <script type="text/javascript"> 355 328 // <![CDATA[ 329 jQuery(document).ready(function(){ 356 330 <?php foreach ( $containers as $container ) { ?> 357 Sortable.create("<?php echo $container; ?>", { 358 dropOnEmpty: true, containment: [<?php echo $c_string; ?>], 359 handle: 'handle', constraint: false, onUpdate: updateAll, 360 format: /^widgetprefix-(.*)$/ 361 }); 331 jQuery('ul#<?php echo $container; ?>').Sortable({ 332 accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll 333 }); 362 334 <?php } ?> 335 }); 363 336 // ]]> 364 337 </script> 365 338