WordPress.org

Make WordPress Core

Ticket #3824: jquery_admin_widgets.diff

File jquery_admin_widgets.diff, 13.7 KB (added by filosofo, 7 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