WordPress.org
Get WordPress

Make WordPress Core

Ticket #25821: 25821.patch

File 25821.patch, 8.7 KB (added by azaozz, 11 years ago)

  • src/wp-admin/css/wp-admin.css

     
    90519051        cursor: default;
    90529052}
    90539053
     9054
     9055/* Widgets Area Chooser merge */
     9056.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
     9057.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
     9058        transition: opacity 0.2s ease-in-out;
     9059}
     9060
     9061.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
     9062.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
     9063        /* -webkit-filter: blur(1px); */
     9064        opacity: 0.2;
     9065        pointer-events: none;
     9066}
     9067
     9068.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
     9069        /* -webkit-filter: none; */
     9070        opacity: 1;
     9071        pointer-events: auto;
     9072}
     9073
     9074.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question .widget-top {
     9075        background: #fff;
     9076        border: 1px solid #bbb;
     9077        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
     9078}
     9079
     9080#widgets-chooser {
     9081        display: none;
     9082        margin-right: 10px;
     9083        padding-bottom: 10px;
     9084}
     9085
     9086#widgets-chooser h3 {
     9087        font-size: 14px;
     9088        margin: 30px 0 15px 0;
     9089}
     9090
     9091#widgets-chooser ul.widgets-chooser-sidebars {
     9092        margin: 0 0 20px 0;
     9093        list-style-type: none;
     9094}
     9095
     9096#widgets-chooser ul.widgets-chooser-sidebars li {
     9097        padding: 10px 15px 10px 35px;
     9098        background: #fff;
     9099        border: 1px solid #ccc;
     9100        border-bottom: none;
     9101        margin: 0;
     9102        cursor: pointer;
     9103}
     9104
     9105#widgets-chooser ul.widgets-chooser-sidebars li:hover {
     9106        background: rgba(255,255,255,0.7);
     9107}
     9108
     9109#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
     9110        background: #1075a0;
     9111        color: #fff;
     9112        position: relative;
     9113}
     9114
     9115#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
     9116        content: '\f147';
     9117        display: block;
     9118        -webkit-font-smoothing: antialiased;
     9119        font: normal 26px/1 'dashicons';
     9120        position: absolute;
     9121        top: 7px;
     9122        left: 5px;
     9123}
     9124
     9125#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
     9126        border-bottom: 1px solid #ccc;
     9127}
     9128
     9129#widgets-chooser select {
     9130        width: 100%;
     9131        margin-bottom: 20px;
     9132        -webkit-box-sizing: border-box;
     9133        -moz-box-sizing: border-box;
     9134        box-sizing: border-box;
     9135}
     9136
     9137#widgets-chooser .sidebar-radios {
     9138        text-align: left;
     9139        margin: 0 20px 20px 20px;
     9140}
     9141
     9142#widgets-chooser .sidebar-radios li {
     9143        margin-top: 15px;
     9144}
     9145
     9146#widgets-chooser .sidebar-radios label {
     9147        font-size: 15px;
     9148}
     9149
     9150#widgets-chooser .sidebar-radios input {
     9151        margin-right: 10px;
     9152}
     9153
     9154#widgets-chooser .widgets-chooser-actions {
     9155        clear: both;
     9156        text-align: center;
     9157}
     9158
     9159#widgets-chooser button {
     9160        margin-right: 5px;
     9161}
     9162
     9163#available-widgets .widget .widget-top {
     9164        cursor: pointer;
     9165}
     9166/* End Widgets Area Chooser merge */
     9167
    90549168/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
    90559169.ui-sortable,
    90569170.ui-draggable {

  • src/wp-admin/js/widgets.js

     
    44wpWidgets = {
    55
    66        init : function() {
    7                 var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
    8                         margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
     7                var rem, the_id,
     8                        self = this,
     9                        chooser = $('#widgets-chooser'),
     10                        selectSidebar = chooser.find('.widgets-chooser-sidebars'),
     11                        sidebars = $('div.widgets-sortables'),
     12                        isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
     13                        margin = ( isRtl ? 'marginRight' : 'marginLeft' );
    914
    10                 $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click(function(){
    11                         var c = $(this).siblings('.widgets-sortables'), p = $(this).parent();
    12                         if ( !p.hasClass('closed') ) {
    13                                 c.sortable('disable');
    14                                 p.addClass('closed');
     15                $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
     16                        var $this = $(this), parent = $this.parent();
     17                        if ( parent.hasClass('closed') ) {
     18                                parent.removeClass('closed');
     19                                $this.siblings('.widgets-sortables').sortable('refresh');
    1520                        } else {
    16                                 p.removeClass('closed');
    17                                 c.sortable('enable').sortable('refresh');
     21                                parent.addClass('closed');
    1822                        }
    1923                });
    2024
    … …  
    147151                                        sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
    148152                                }
    149153                        }
    150                 }).sortable('option', 'connectWith', 'div.widgets-sortables').parent().filter('.closed').children('.widgets-sortables').sortable('disable');
     154                }).sortable('option', 'connectWith', 'div.widgets-sortables');
    151155
    152156                $('#available-widgets').droppable({
    153157                        tolerance: 'pointer',
    … …  
    172176                                $('#removing-widget').hide().children('span').html('');
    173177                        }
    174178                });
     179
     180                // Area Chooser
     181                $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
     182                        var $element = $( element ),
     183                                name = $element.find( '.sidebar-name h3' ).text(),
     184                                id = $element.find( '.widgets-sortables' ).attr( 'id' ),
     185                                li = $('<li>').text( $.trim( name ) );
     186
     187                        if ( index === 0 ) {
     188                                li.addClass( 'widgets-chooser-selected' );
     189                        }
     190
     191                        selectSidebar.append( li );
     192                        li.data( 'sidebarId', id );
     193                });
     194
     195                $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
     196                        var widget = $(this).closest( '.widget' );
     197
     198                        if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
     199                                self.closeChooser();
     200                        } else {
     201                                self.clearWidgetSelection();
     202                                $( '#widgets-left' ).addClass( 'chooser' );
     203                                widget.addClass( 'widget-in-question' );
     204
     205                                widget.after( chooser );
     206                                chooser.slideDown( 200 );
     207                        }
     208                });
     209
     210                // Add event handlers
     211                chooser.on( 'click.widgets-chooser', function( event ) {
     212                        var $target = $( event.target );
     213
     214                        if ( $target.hasClass('button-primary') ) {
     215                                self.addWidget( chooser );
     216                                self.closeChooser();
     217                        } else if ( $target.hasClass('button-secondary') ) {
     218                                self.closeChooser();
     219                        } else if ( $target.is('.widgets-chooser-sidebars li') ) {
     220                                chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
     221                                $target.addClass( 'widgets-chooser-selected' );
     222                        }
     223                });
    175224        },
    176225
    177226        saveOrder : function(sb) {
    … …  
    281330                widget.children('.widget-inside').slideUp('fast', function(){
    282331                        widget.css({'width':'', margin:''});
    283332                });
     333        },
     334
     335        addWidget: function( chooser ) {
     336                var widget = $('#available-widgets').find('.widget-in-question').clone(),
     337                        widgetId = widget.attr('id'),
     338                        addNew = widget.find( 'input.add_new' ),
     339                        add = addNew.val(),
     340                        n = widget.find( 'input.multi_number' ).val(),
     341                        sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
     342                        sidebar = $( '#' + sidebarId ),
     343                        wrap = sidebar.closest( '.widgets-holder-wrap' );
     344
     345                addNew.val('');
     346               
     347                if ( 'multi' === add ) {
     348                        widget.html(
     349                                widget.html().replace( /<[^<>]+>/g, function(m) {
     350                                        return m.replace( /__i__|%i%/g, n );
     351                                })
     352                        );
     353
     354                        widget.attr( 'id', widgetId.replace( '__i__', n ) );
     355                        n++;
     356                        $( '#' + widgetId ).find('input.multi_number').val(n);
     357                } else if ( 'single' === add ) {
     358                        widget.attr( 'id', 'new-' + widgetId );
     359                        $( '#' + widgetId ).hide();
     360                }
     361
     362                // Open the widgets container
     363                sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
     364                sidebar.sortable('refresh');
     365
     366                // Change for MP6
     367                // widget.prependTo( sidebar );
     368                sidebar.find( '.sidebar-description' ).after( widget );
     369
     370                wpWidgets.save( widget, 0, 0, 1 );
     371
     372                $( 'html, body' ).animate({
     373                        scrollTop: sidebar.offset().top - 130
     374                }, 200 );
     375
     376                window.setTimeout( function() {
     377                        // Cannot use a callback in the animation above as it fires twice,
     378                        // have to queue this "by hand".
     379                        widget.find( '.widget-title' ).trigger('click');
     380                }, 250 );
     381        },
     382
     383        closeChooser: function() {
     384                var self = this;
     385
     386                $( '#widgets-chooser' ).slideUp( 200, function() {
     387                        $('#wpbody-content').append( this );
     388                        self.clearWidgetSelection();
     389                });
     390        },
     391
     392        clearWidgetSelection: function() {
     393                $( '#widgets-left' ).removeClass( 'chooser' );
     394                $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
    284395        }
    285396};
    286397

  • src/wp-admin/widgets.php

     
    406406<br class="clear" />
    407407</div>
    408408
     409<div id="widgets-chooser">
     410        <h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
     411        <ul class="widgets-chooser-sidebars"></ul>
     412        <div class="widgets-chooser-actions">
     413                <button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
     414                <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
     415        </div>
     416</div>
     417
    409418<?php
    410419
    411420/**