WordPress.org

Make WordPress Core

Changeset 26054


Ignore:
Timestamp:
11/08/2013 11:04:35 PM (7 years ago)
Author:
azaozz
Message:

Merge the Widgets Area Chooser feature plugin. First run, see #25821

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r25973 r26054  
    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: auto;
     9083    padding-bottom: 10px;
     9084    max-width: 400px;
     9085}
     9086
     9087#widgets-chooser h3 {
     9088    font-size: 14px;
     9089    margin: 15px 0;
     9090}
     9091
     9092#widgets-chooser ul.widgets-chooser-sidebars {
     9093    margin: 0 0 20px 0;
     9094    list-style-type: none;
     9095}
     9096
     9097#widgets-chooser ul.widgets-chooser-sidebars li {
     9098    padding: 10px 15px 10px 35px;
     9099    background: #fff;
     9100    border: 1px solid #ccc;
     9101    border-bottom: none;
     9102    margin: 0;
     9103    cursor: pointer;
     9104}
     9105
     9106#widgets-chooser ul.widgets-chooser-sidebars li:hover {
     9107    background: rgba(255,255,255,0.7);
     9108}
     9109
     9110#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
     9111    background: #1075a0;
     9112    color: #fff;
     9113    position: relative;
     9114}
     9115
     9116#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
     9117    content: '\f147';
     9118    display: block;
     9119    -webkit-font-smoothing: antialiased;
     9120    font: normal 26px/1 'dashicons';
     9121    position: absolute;
     9122    top: 7px;
     9123    left: 5px;
     9124}
     9125
     9126#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
     9127    border-bottom: 1px solid #ccc;
     9128}
     9129
     9130#widgets-chooser select {
     9131    width: 100%;
     9132    margin-bottom: 20px;
     9133    -webkit-box-sizing: border-box;
     9134    -moz-box-sizing: border-box;
     9135    box-sizing: border-box;
     9136}
     9137
     9138#widgets-chooser .sidebar-radios {
     9139    text-align: left;
     9140    margin: 0 20px 20px 20px;
     9141}
     9142
     9143#widgets-chooser .sidebar-radios li {
     9144    margin-top: 15px;
     9145}
     9146
     9147#widgets-chooser .sidebar-radios label {
     9148    font-size: 15px;
     9149}
     9150
     9151#widgets-chooser .sidebar-radios input {
     9152    margin-right: 10px;
     9153}
     9154
     9155#widgets-chooser .widgets-chooser-actions {
     9156    clear: both;
     9157    text-align: center;
     9158}
     9159
     9160#widgets-chooser button {
     9161    margin-right: 5px;
     9162}
     9163
     9164#available-widgets .widget .widget-top {
     9165    cursor: pointer;
     9166}
     9167/* End Widgets Area Chooser merge */
     9168
    90549169/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
    90559170.ui-sortable,
  • trunk/src/wp-admin/js/widgets.js

    r22406 r26054  
     1/*global ajaxurl, isRtl */
    12var wpWidgets;
    23(function($) {
     
    56
    67    init : function() {
    7         var rem, sidebars = $('div.widgets-sortables'), isRTL = !! ( 'undefined' != typeof isRtl && isRtl ),
    8             margin = ( isRtl ? 'marginRight' : 'marginLeft' ), the_id;
    9 
    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');
     8        var rem, the_id,
     9            self = this,
     10            chooser = $('#widgets-chooser'),
     11            selectSidebar = chooser.find('.widgets-chooser-sidebars'),
     12            sidebars = $('div.widgets-sortables'),
     13            isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ),
     14            margin = ( isRTL ? 'marginRight' : 'marginLeft' );
     15
     16        $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
     17            var $this = $(this), parent = $this.parent();
     18            if ( parent.hasClass('closed') ) {
     19                parent.removeClass('closed');
     20                $this.siblings('.widgets-sortables').sortable('refresh');
    1521            } else {
    16                 p.removeClass('closed');
    17                 c.sortable('enable').sortable('refresh');
     22                parent.addClass('closed');
    1823            }
    1924        });
     
    4247                if ( inside.is(':hidden') ) {
    4348                    if ( w > 250 && inside.closest('div.widgets-sortables').length ) {
    44                         css['width'] = w + 30 + 'px';
     49                        css.width = w + 30 + 'px';
    4550                        if ( inside.closest('div.widget-liquid-right').length )
    4651                            css[margin] = 235 - w + 'px';
     
    8489                the_id = this.id;
    8590            },
    86             stop: function(e,ui) {
     91            stop: function() {
    8792                if ( rem )
    8893                    $(rem).hide();
     
    122127
    123128                if ( add ) {
    124                     if ( 'multi' == add ) {
     129                    if ( 'multi' === add ) {
    125130                        ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
    126131                        ui.item.attr( 'id', id.replace('__i__', n) );
    127132                        n++;
    128133                        $('div#' + id).find('input.multi_number').val(n);
    129                     } else if ( 'single' == add ) {
     134                    } else if ( 'single' === add ) {
    130135                        ui.item.attr( 'id', 'new-' + id );
    131136                        rem = 'div#' + id;
     
    141146                var sender = $(ui.sender);
    142147
    143                 if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') != -1 )
     148                if ( !$(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 )
    144149                    sender.sortable('cancel');
    145150
    146                 if ( sender.attr('id').indexOf('orphaned_widgets') != -1 && !sender.children('.widget').length ) {
     151                if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
    147152                    sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
    148153                }
    149154            }
    150         }).sortable('option', 'connectWith', 'div.widgets-sortables').parent().filter('.closed').children('.widgets-sortables').sortable('disable');
     155        }).sortable('option', 'connectWith', 'div.widgets-sortables');
    151156
    152157        $('#available-widgets').droppable({
    153158            tolerance: 'pointer',
    154159            accept: function(o){
    155                 return $(o).parent().attr('id') != 'widget-list';
     160                return $(o).parent().attr('id') !== 'widget-list';
    156161            },
    157162            drop: function(e,ui) {
     
    171176                $('div.widget-placeholder').show();
    172177                $('#removing-widget').hide().children('span').html('');
     178            }
     179        });
     180
     181        // Area Chooser
     182        $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
     183            var $element = $( element ),
     184                name = $element.find( '.sidebar-name h3' ).text(),
     185                id = $element.find( '.widgets-sortables' ).attr( 'id' ),
     186                li = $('<li tabindex="0">').text( $.trim( name ) );
     187
     188            if ( index === 0 ) {
     189                li.addClass( 'widgets-chooser-selected' );
     190            }
     191
     192            selectSidebar.append( li );
     193            li.data( 'sidebarId', id );
     194        });
     195
     196        $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
     197            var widget = $(this).closest( '.widget' );
     198
     199            if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
     200                self.closeChooser();
     201            } else {
     202                // Open the chooser
     203                self.clearWidgetSelection();
     204                $( '#widgets-left' ).addClass( 'chooser' );
     205                widget.addClass( 'widget-in-question' );
     206
     207                widget.after( chooser );
     208                chooser.slideDown( 200, function() {
     209                    selectSidebar.find('.widgets-chooser-selected').focus();
     210                });
     211            }
     212        });
     213
     214        // Add event handlers
     215        chooser.on( 'click.widgets-chooser', function( event ) {
     216            var $target = $( event.target );
     217
     218            if ( $target.hasClass('button-primary') ) {
     219                self.addWidget( chooser );
     220                self.closeChooser();
     221            } else if ( $target.hasClass('button-secondary') ) {
     222                self.closeChooser();
     223            } else if ( $target.is('.widgets-chooser-sidebars li') ) {
     224                chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
     225                $target.addClass( 'widgets-chooser-selected' );
    173226            }
    174227        });
     
    209262
    210263        if ( del )
    211             a['delete_widget'] = 1;
     264            a.delete_widget = 1;
    212265
    213266        data += '&' + $.param(a);
     
    220273                    id = $('input.widget-id', widget).val();
    221274                    $('#available-widgets').find('input.widget-id').each(function(){
    222                         if ( $(this).val() == id )
     275                        if ( $(this).val() === id )
    223276                            $(this).closest('div.widget').show();
    224277                    });
     
    273326        widget.children('.widget-inside').find('label').each(function(){
    274327            var f = $(this).attr('for');
    275             if ( f && f == $('input', this).attr('id') )
     328            if ( f && f === $('input', this).attr('id') )
    276329                $(this).removeAttr('for');
    277330        });
     
    282335            widget.css({'width':'', margin:''});
    283336        });
     337    },
     338
     339    addWidget: function( chooser ) {
     340        var widget = $('#available-widgets').find('.widget-in-question').clone(),
     341            widgetId = widget.attr('id'),
     342            add = widget.find( 'input.add_new' ).val(),
     343            n = widget.find( 'input.multi_number' ).val(),
     344            sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
     345            sidebar = $( '#' + sidebarId );
     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        // No longer "new" widget
     372        widget.find( 'input.add_new' ).val('');
     373
     374        $( 'html, body' ).animate({
     375            scrollTop: sidebar.offset().top - 130
     376        }, 200 );
     377
     378        window.setTimeout( function() {
     379            // Cannot use a callback in the animation above as it fires twice,
     380            // have to queue this "by hand".
     381            widget.find( '.widget-title' ).trigger('click');
     382        }, 250 );
     383    },
     384
     385    closeChooser: function() {
     386        var self = this;
     387
     388        $( '#widgets-chooser' ).slideUp( 200, function() {
     389            $('#wpbody-content').append( this );
     390            self.clearWidgetSelection();
     391        });
     392    },
     393
     394    clearWidgetSelection: function() {
     395        $( '#widgets-left' ).removeClass( 'chooser' );
     396        $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
    284397    }
    285398};
    286399
    287 $(document).ready(function($){ wpWidgets.init(); });
     400$(document).ready( function(){ wpWidgets.init(); } );
    288401
    289402})(jQuery);
  • trunk/src/wp-admin/widgets.php

    r25880 r26054  
    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
Note: See TracChangeset for help on using the changeset viewer.