WordPress.org
Get WordPress

Make WordPress Core

Ticket #27403: 27403.4.diff

File 27403.4.diff, 7.8 KB (added by sirbrillig, 9 years ago)

Updated patch to include translations and added widgets

  • src/wp-includes/class-wp-customize-manager.php

     
    837837                        'nonce' => $this->get_nonces(),
    838838                        'l10n' => array(
    839839                                'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
     840                                'clickIconToEdit' => __( 'Click to edit' ),
     841                                'clickEditMenu' => __( 'Click to edit this menu.' ),
     842                                'clickEditWidget' => __( 'Click to edit this widget.' ),
     843                                'clickEditTitle' => __( 'Click to edit the site title.' ),
     844                                'clickEditMisc' => __( 'Click to edit this element.' ),
    840845                        ),
    841846                        '_dirty' => array_keys( $this->unsanitized_post_values() ),
    842847                );

  • src/wp-includes/css/customize-preview.css

     
    1010        -webkit-box-shadow: none;
    1111        box-shadow: none;
    1212}
     13
     14.customize-partial-icon {
     15        fill: #fff;
     16        width: 30px;
     17        height: 30px;
     18        font-size: 18px;
     19        z-index: 5;
     20        background: #0087BE;
     21        border-radius: 50%;
     22        border: 2px solid #fff;
     23        box-shadow: 0 2px 1px rgba(46,68,83,0.15);
     24        text-align: center;
     25        display: flex;
     26        flex-direction: row;
     27        justify-content: center;
     28        align-items: center;
     29        cursor: pointer;
     30        animation-name: bounce-appear;
     31        animation-delay: 0.8s;
     32        animation-duration: 1s;
     33        animation-fill-mode: both;
     34        animation-duration: .75s;
     35        padding: 0;
     36}
     37
     38.customize-partial-icon.hidden {
     39        opacity: 0;
     40}
     41
     42.customize-partial-icon svg {
     43        width: 18px;
     44        height: 18px;
     45}
     46
     47@keyframes bounce-appear {
     48        from, 20%, 40%, 60%, 80%, to {
     49                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     50        }
     51        0% {
     52                opacity: 0;
     53                transform: scale3d(.3, .3, .3);
     54        }
     55        20% {
     56                transform: scale3d(1.1, 1.1, 1.1);
     57        }
     58        40% {
     59                transform: scale3d(.9, .9, .9);
     60        }
     61        60% {
     62                opacity: 1;
     63                transform: scale3d(1.03, 1.03, 1.03);
     64        }
     65        80% {
     66                transform: scale3d(.97, .97, .97);
     67        }
     68        to {
     69                opacity: 1;
     70                transform: scale3d(1, 1, 1);
     71        }
     72}

  • src/wp-includes/customize/class-wp-customize-selective-refresh.php

     
    184184                        'renderQueryVar' => self::RENDER_QUERY_VAR,
    185185                        'l10n'           => array(
    186186                                'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
     187                                'clickEditMenu' => __( 'Click to edit this menu.' ),
     188                                'clickEditWidget' => __( 'Click to edit this widget.' ),
     189                                'clickEditTitle' => __( 'Click to edit the site title.' ),
     190                                'clickEditMisc' => __( 'Click to edit this element.' ),
    187191                                /* translators: %s: document.write() */
    188192                                'badDocumentWrite' => sprintf( __( '%s is forbidden' ), 'document.write()' ),
    189193                        ),

  • src/wp-includes/js/customize-preview-widgets.js

     
    357357                                widgetPartial = new self.WidgetPartial( partialId, {
    358358                                        params: {}
    359359                                } );
    360                                 api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
    361360                        }
    362361
    363362                        // Make sure that there is a container element for the widget in the sidebar, if at least a placeholder.
    … …  
    400399                                wasInserted = true;
    401400                        } );
    402401
     402                        api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
     403
    403404                        if ( wasInserted ) {
    404405                                sidebarPartial.reflowWidgets();
    405406                        }

  • src/wp-includes/js/customize-selective-refresh.js

     
    1919
    2020        _.extend( self, api.Events );
    2121
     22        // Extend jQuery to notice element removal and call the 'destroyed' event
     23        $.event.special.destroyed = {
     24                remove: function( o ) {
     25                        if ( o.handler ) {
     26                                o.handler();
     27                        }
     28                }
     29        };
     30
    2231        /**
    2332         * A Customizer Partial.
    2433         *
    … …  
    4352
    4453                id: null,
    4554
     55                editIconSource: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 6l5 5-9.507 9.507c-.686-.686-.69-1.794-.012-2.485l-.002-.003c-.69.676-1.8.673-2.485-.013-.677-.677-.686-1.762-.036-2.455l-.008-.008c-.694.65-1.78.64-2.456-.036L13 6zm7.586-.414l-2.172-2.172c-.78-.78-2.047-.78-2.828 0L14 5l5 5 1.586-1.586c.78-.78.78-2.047 0-2.828zM3 18v3h3c0-1.657-1.343-3-3-3z"/></g></svg>',
     56
    4657                 /**
    4758                 * Constructor.
    4859                 *
    … …  
    8596                        var partial = this;
    8697                        _.each( _.pluck( partial.placements(), 'container' ), function( container ) {
    8798                                $( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
     99                                partial.showEditIconForElement( container );
    88100                        } );
    89101                        $( document ).on( 'click', partial.params.selector, function( e ) {
    90102                                if ( ! e.shiftKey ) {
    … …  
    100112                },
    101113
    102114                /**
     115                 * Create and show the edit icon for this element.
     116                 */
     117                showEditIconForElement: function( element ) {
     118                        console.log('showEditIconForElement', element);
     119                        var partial = this;
     120                        var $icon = this.createEditIcon();
     121                        // TODO: hide icon when sidebar is collapsed
     122                        var $element = $( element );
     123                        $element.before( $icon );
     124                        $icon.on( 'click', partial.showControl.bind( this ) );
     125                        $element.on( 'destroyed', function() {
     126                                $icon.remove();
     127                                partial.editIcon = null;
     128                        } );
     129                        api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     130                                partial.refreshEditIcon( placement.container );
     131                        } );
     132                        api.selectiveRefresh.bind( 'partial-content-moved', function( placement ) {
     133                                partial.refreshEditIcon( placement.container );
     134                        } );
     135                        partial.editIcon = $icon;
     136                },
     137
     138                refreshEditIcon: function( element ) {
     139                        var partial = this;
     140                        console.log('refreshEditIcon', element, partial);
     141                        if ( ! partial.editIcon ) {
     142                                this.showEditIconForElement( element );
     143                        }
     144                },
     145
     146                getIconClassName: function() {
     147                        var partial = this;
     148                        var cleanId = partial.id.replace( /\]/g, '' ).replace( /\[/g, '-' );
     149                        return 'customize-partial-icon-' + cleanId;
     150                },
     151
     152                getIconTitle: function() {
     153                        var l10n = self.data.l10n;
     154                        switch ( this.getType() ) {
     155                                case 'widget':
     156                                        return l10n.clickEditWidget;
     157                                case 'blogname':
     158                                        return l10n.clickEditTitle;
     159                                case 'blogdescription':
     160                                        return l10n.clickEditTitle;
     161                                case 'nav_menu':
     162                                        return l10n.clickEditMenu;
     163                                default:
     164                                        return l10n.clickEditMisc;
     165                        }
     166                },
     167
     168                getType: function() {
     169                        var partial = this;
     170                        var settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
     171                        if ( partial.params.type ) {
     172                                return partial.params.type;
     173                        }
     174                        if ( settingId.match( /^nav_menu_instance/ ) ) {
     175                                return 'nav_menu';
     176                        }
     177                        if ( settingId.match( /^widget_/ ) ) {
     178                                return 'widget';
     179                        }
     180                        return settingId;
     181                },
     182
     183                createEditIcon: function() {
     184                        var iconTitle = this.getIconTitle();
     185                        return $( '<button aria-label="' + iconTitle + '" title="' + iconTitle + '" type="button" class="customize-partial-icon ' + this.getIconClassName() + '">' + this.editIconSource + '</button>' );
     186                },
     187
     188                /**
    103189                 * Find all placements for this partial int he document.
    104190                 *
    105191                 * @since 4.5.0
    … …  
    180266                        if ( ! settingId ) {
    181267                                settingId = _.first( partial.settings() );
    182268                        }
     269                        if ( this.getType() === 'nav_menu' ) {
     270                                var menuSlug = partial.params.navMenuArgs.theme_location;
     271                                if ( menuSlug ) {
     272                                        settingId = 'nav_menu_locations[' + menuSlug + ']';
     273                                }
     274                        }
    183275                        api.preview.send( 'focus-control-for-setting', settingId );
    184276                },
    185277