WordPress.org

Make WordPress Core

Ticket #3824: jquery_admin_widgets.diff

File jquery_admin_widgets.diff, 13.7 KB (added by filosofo, 11 years ago)
  • wp-admin/css/widgets.css

     
    1414}
    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}
    2323
     
    2626        color: #333;
    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;
    3337        margin: 0;
     38        min-height: 200px;
    3439        padding: 0;
     40        display: block;
    3541}
    3642
    37 * .module, #lastmodule {
     43* .module {
    3844        width: 238px;
    3945        padding: 0;
    4046        margin: 5px 0;
     
    4248        display: block;
    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;
    5563        border-bottom: 1px solid #e8e8e8;
     
    8391        clear: left;
    8492}
    8593
    86 .placematt {
     94.placemat {
    8795        cursor: default;
    88         margin: 10px 0 0;
     96        margin: 0;
    8997        padding: 0;
    90         width: 238px;
    91         float:left;
    92         background-color: #ffe;
     98        position: relative;
    9399}
    94100
    95 * html .placematt {
    96         margin-top: 5px;
    97 }
    98 
    99 .placematt h4 {
     101.placemat h4 {
    100102        text-align: center;
    101         margin-bottom: 5px;
    102103}
    103104
    104 .placematt span {
     105.placemat span {
     106        background-color: #ffe;
     107        border: 1px solid #ccc;
    105108        padding: 0 10px 10px;
     109        position: absolute;
    106110        text-align: justify;
    107111}
    108112
    109 
    110113#palettediv {
    111114        border: 1px solid #bbb;
    112115        background-color: #f0f8ff;
    113116        height:auto;
    114117        margin-top: 10px;
     118        padding-bottom: 10px;
    115119}
    116120
     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
    117138#palettediv h3 {
    118139        text-align: center;
    119140        color: #333;
     141        min-height: 1px;
    120142}
    121143
    122144#palettediv ul {
    123145        padding: 0 0 0 10px;
    124146}
    125147
    126 #palettediv .module, #lastmodule {
     148#palettediv .module {
    127149        margin-right: 10px;
    128150        float: left;
    129151        width: 120px;
    130152}
    131153
    132 #palettediv .handle, #lastmodule span {
     154#palettediv .handle {
    133155        height: 40px;
    134156        font-size: 90%;
    135157        width: 110px;
     
    140162        visibility: hidden;
    141163}
    142164
    143 #lastmodule {
    144         visibility: hidden;
    145 }
    146 
    147165* html #palettediv ul {
    148166        margin: 0;
    149167        padding: 0 0 0 10px;
    150168}
    151169
    152 * html #palettediv .module {
    153         float: none;
    154         display: inline;
    155 }
    156 
    157170#controls {
    158171        height: 0px;
    159172}
     
    212225        left: 0px;
    213226        width: 100%;
    214227}
     228
     229#dragHelper {
     230        position: absolute;
     231}
     232
     233#dragHelper li.module {
     234        display: block;
     235        float: left;
     236}
  • wp-admin/widgets.php

     
    55if ( ! current_user_can('switch_themes') )
    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" />
    1814        <!--[if IE 7]>
     
    2016                #palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; }
    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' ) {
    2921?>
     
    4941        var widgets = [<?php echo $widgets; ?>];
    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';} );
     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                });
    8570        }
    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         }
    9671        function maxHeight(elm) {
    9772                htmlheight = document.body.parentNode.clientHeight;
    9873                bodyheight = document.body.clientHeight;
    9974                var height = htmlheight > bodyheight ? htmlheight : bodyheight;
    100                 $(elm).style.height = height + 'px';
     75                jQuery(elm).height(height);
    10176        }
     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        }
    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() {
    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();
    160142                });
     143                resetDroppableHeights();
    161144        }
    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        });
    173149// ]]>
    174150</script>
    175151<?php
     
    313289                                <div class="dropzone">
    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>
    319295                                                        <?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.' ); ?>
     
    334310                                }
    335311                        ?>
    336312
    337                         <br class="clear" />
    338 
    339313                        </div>
    340314
    341315                        <div id="palettediv">
     
    347321                                                wp_widget_draggable( $name );
    348322                                        }
    349323                                ?>
    350                                         <li id="lastmodule"><span></span></li>
    351324                                </ul>
    352325                        </div>
    353326
    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-(.*)$/
    361                                 });
     331                                        jQuery('ul#<?php echo $container; ?>').Sortable({
     332                                                accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll
     333                                        });
    362334                        <?php } ?>
     335                                });
    363336                        // ]]>
    364337                        </script>
    365338