WordPress.org
Get WordPress

Make WordPress Core

Changeset 5934


Ignore:
Timestamp:
08/23/2007 10:34:15 PM (17 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.