WordPress.org

Make WordPress Core

Changeset 5934


Ignore:
Timestamp:
08/23/07 22:34:15 (7 years ago)
Author:
ryan
Message:

jquery for widgets admin. Props filosofo. see #3824

Location:
trunk/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/widgets.css

    r5687 r5934  
    1515 
    1616.dropzone { 
     17    border: 1px solid #bbb; 
    1718    float: left; 
    1819    margin-right: 10px; 
    1920    padding: 5px; 
    20     border: 1px solid #bbb; 
    2121    background-color: #f0f8ff; 
    2222} 
     
    2727} 
    2828 
     29.dropzone input { 
     30    display: none; 
     31} 
     32 
    2933.dropzone ul { 
     34    float: left; 
    3035    list-style-type: none; 
    3136    width: 240px; 
    32     float: left; 
    33     margin: 0; 
    34     padding: 0; 
    35 } 
    36  
    37 * .module, #lastmodule { 
     37    margin: 0; 
     38    min-height: 200px; 
     39    padding: 0; 
     40    display: block; 
     41} 
     42 
     43* .module { 
    3844    width: 238px; 
    3945    padding: 0; 
     
    4349    border: 1px solid #ccc; 
    4450    background-color: #fbfbfb; 
     51    position: relative; 
    4552    text-align: left; 
    4653    line-height: 25px; 
    4754} 
    4855 
    49 * .handle, #lastmodule span { 
     56* .handle { 
    5057    display: block; 
    5158    width: 216px; 
    5259    padding: 0 10px; 
     60    position: relative; 
    5361    border-top: 1px solid #f2f2f2; 
    5462    border-right: 1px solid #e8e8e8; 
     
    8492} 
    8593 
    86 .placematt { 
     94.placemat { 
    8795    cursor: default; 
    88     margin: 10px 0 0; 
    89     padding: 0; 
    90     width: 238px; 
    91     float:left; 
     96    margin: 0; 
     97    padding: 0; 
     98    position: relative; 
     99} 
     100 
     101.placemat h4 { 
     102    text-align: center; 
     103} 
     104 
     105.placemat span { 
    92106    background-color: #ffe; 
    93 } 
    94  
    95 * html .placematt { 
    96     margin-top: 5px; 
    97 } 
    98  
    99 .placematt h4 { 
    100     text-align: center; 
    101     margin-bottom: 5px; 
    102 } 
    103  
    104 .placematt span { 
     107    border: 1px solid #ccc; 
    105108    padding: 0 10px 10px; 
     109    position: absolute; 
    106110    text-align: justify; 
    107111} 
    108  
    109112 
    110113#palettediv { 
     
    113116    height:auto; 
    114117    margin-top: 10px; 
     118    padding-bottom: 10px; 
     119} 
     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%; 
    115136} 
    116137 
     
    118139    text-align: center; 
    119140    color: #333; 
     141    min-height: 1px; 
    120142} 
    121143 
     
    124146} 
    125147 
    126 #palettediv .module, #lastmodule { 
     148#palettediv .module { 
    127149    margin-right: 10px; 
    128150    float: left; 
     
    130152} 
    131153 
    132 #palettediv .handle, #lastmodule span { 
     154#palettediv .handle { 
    133155    height: 40px; 
    134156    font-size: 90%; 
     
    141163} 
    142164 
    143 #lastmodule { 
    144     visibility: hidden; 
    145 } 
    146  
    147165* html #palettediv ul { 
    148166    margin: 0; 
    149167    padding: 0 0 0 10px; 
    150 } 
    151  
    152 * html #palettediv .module { 
    153     float: none; 
    154     display: inline; 
    155168} 
    156169 
     
    213226    width: 100%; 
    214227} 
     228 
     229#dragHelper { 
     230    position: absolute; 
     231} 
     232 
     233#dragHelper li.module { 
     234    display: block; 
     235    float: left; 
     236} 
  • trunk/wp-admin/widgets.php

    r5884 r5934  
    66    wp_die( __( 'Cheatin’ uh?' )); 
    77 
    8 wp_enqueue_script( 'scriptaculous-effects' ); 
    9 wp_enqueue_script( 'scriptaculous-dragdrop' ); 
     8wp_enqueue_script('interface'); 
    109 
    1110function wp_widgets_admin_head() { 
    1211    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 ) ) ); 
    1612?> 
    1713    <link rel="stylesheet" href="<?php bloginfo( 'wpurl' ); ?>/wp-admin/css/widgets.css?version=<?php bloginfo('version'); ?>" type="text/css" /> 
     
    2117    </style> 
    2218    <![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> 
    2719<?php 
    2820    if ( get_bloginfo( 'text_direction' ) == 'rtl' ) {  
     
    5042    var controldims = new Array; 
    5143    <?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']; ?>; 
    5547    <?php endforeach; ?> 
    5648    function initWidgets() { 
    5749    <?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}); 
    6153        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'); 
    6355    <?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');} ); 
    7958    } 
    8059    function resetDroppableHeights() { 
    8160        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';} ); 
    85     } 
    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"; 
     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        }); 
    9570    } 
    9671    function maxHeight(elm) { 
     
    9873        bodyheight = document.body.clientHeight; 
    9974        var height = htmlheight > bodyheight ? htmlheight : bodyheight; 
    100         $(elm).style.height = height + 'px'; 
     75        jQuery(elm).height(height); 
     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); 
    10190    } 
    10291    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'); 
    113107    } 
    114108    function popControl(elm) { 
    115         el = $(elm); 
    116         el.style.width = controldims[elm]['width'] + 'px'; 
    117         el.style.height = controldims[elm]['height'] + 'px'; 
    118109        var x = ( document.body.clientWidth - controldims[elm]['width'] ) / 2; 
    119110        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);}; 
    127115        popShadow(); 
    128116    } 
    129117    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); 
    135121    } 
    136122    function unpopShadow() { 
    137         new Effect.Opacity('shadow', {to:0.0}); 
    138         $('shadow').style.display = 'none'; 
     123        jQuery('#shadow').fadeOut('fast', function() {jQuery('#shadow').hide()}); 
    139124    } 
    140125    function unpopControl(el) { 
    141         $(el).className='hidden'; 
     126        jQuery(el).attr('class','hidden'); 
     127        jQuery(el).hide(); 
    142128        unpopShadow(); 
    143129    } 
    144130    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, '')); 
    147134    <?php endforeach; ?> 
    148135    } 
    149136    function updateAll() { 
     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(); 
     142        }); 
    150143        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             } 
    160         }); 
    161     } 
    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); 
     144    } 
     145    jQuery(document).ready( function() { 
     146        updateAll(); 
     147        initWidgets(); 
     148    }); 
    173149// ]]> 
    174150</script> 
     
    314290                    <h3><?php echo $sidebar['name']; ?></h3> 
    315291 
    316                     <div id="<?php echo $index; ?>placematt" class="module placemat"> 
     292                    <div id="<?php echo $index; ?>placemat" class="placemat"> 
    317293                        <span class="handle"> 
    318294                            <h4><?php _e( 'Default Sidebar' ); ?></h4> 
     
    335311            ?> 
    336312 
    337             <br class="clear" /> 
    338  
    339313            </div> 
    340314 
     
    348322                    } 
    349323                ?> 
    350                     <li id="lastmodule"><span></span></li> 
    351324                </ul> 
    352325            </div> 
     
    354327            <script type="text/javascript"> 
    355328            // <![CDATA[ 
     329                jQuery(document).ready(function(){ 
    356330            <?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-(.*)$/ 
     331                    jQuery('ul#<?php echo $container; ?>').Sortable({ 
     332                        accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll 
     333                    }); 
     334            <?php } ?> 
    361335                }); 
    362             <?php } ?> 
    363336            // ]]> 
    364337            </script> 
Note: See TracChangeset for help on using the changeset viewer.