Ticket #27403: 27403.9.diff

src/wp-admin/js/customize-controls.js

@@ -5091 +5091 @@
 
                 $( '.collapse-sidebar' ).on( 'click', function() {
                         api.state( 'paneVisible' ).set( ! api.state( 'paneVisible' ).get() );
+                        api.previewer.send( 'collapse-sidebar', ! api.state( 'paneVisible' ).get() );
                 });
 
                 api.state( 'paneVisible' ).bind( function( paneVisible ) {

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

@@ -10 +10 @@
         -webkit-box-shadow: none;
         box-shadow: none;
 }
+
+.customize-partial-icon {
+        position: relative;
+        float: left;
+        width: 0;
+        height: 0;
+        padding: 0;
+        margin: 0;
+        border: 0;
+}
+
+.customize-partial-icon:active {
+        padding: 0;
+        border: 0;
+}
+
+.customize-partial-icon:before {
+        position: absolute;
+        left: -36px;
+        fill: #fff;
+        width: 30px;
+        height: 30px;
+        font-size: 18px;
+        font-family: genericons;
+        content: '\f411';
+        z-index: 5;
+        background-color: #0085ba;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        padding: 0;
+        animation-delay: 0.8s;
+        animation-fill-mode: both;
+        animation-duration: .75s;
+        opacity: 0;
+        pointer-events: none;
+}
+
+body.customize-partial-icons-shown .customize-partial-icon:before {
+        animation-name: bounce-appear;
+        pointer-events: auto;
+}
+body.customize-partial-icons-hidden .customize-partial-icon:before {
+        animation-name: bounce-disappear;
+        pointer-events: none;
+}
+
+.page-sidebar-collapsed .customize-partial-icon:before,
+.customize-partial-icon--hidden:before {
+        visibility: hidden;
+}
+
+.customize-partial-icon--left-margin:before {
+        left: 0;
+}
+
+.customize-partial-icon svg {
+        width: 18px;
+        height: 18px;
+}
+
+@keyframes bounce-appear {
+        from, 20%, 40%, 60%, 80%, to {
+                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        }
+        0% {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+        }
+        20% {
+                transform: scale3d(1.1, 1.1, 1.1);
+        }
+        40% {
+                transform: scale3d(.9, .9, .9);
+        }
+        60% {
+                opacity: 1;
+                transform: scale3d(1.03, 1.03, 1.03);
+        }
+        80% {
+                transform: scale3d(.97, .97, .97);
+        }
+        to {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+        }
+}
+
+@keyframes bounce-disappear {
+        from, 20%, 40%, 60%, 80%, to {
+                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        }
+        0% {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+        }
+        20% {
+                transform: scale3d(.97, .97, .97);
+        }
+        40% {
+                opacity: 1;
+                transform: scale3d(1.03, 1.03, 1.03);
+        }
+        60% {
+                transform: scale3d(.9, .9, .9);
+        }
+        80% {
+                transform: scale3d(1.1, 1.1, 1.1);
+        }
+        to {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+        }
+}

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

@@ -184 +184 @@
                         'renderQueryVar' => self::RENDER_QUERY_VAR,
                         'l10n'           => array(
                                 'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
+                                'clickEditMenu' => __( 'Click to edit this menu.' ),
+                                'clickEditWidget' => __( 'Click to edit this widget.' ),
+                                'clickEditTitle' => __( 'Click to edit the site title.' ),
+                                'clickEditMisc' => __( 'Click to edit this element.' ),
                                 /* translators: %s: document.write() */
                                 'badDocumentWrite' => sprintf( __( '%s is forbidden' ), 'document.write()' ),
                         ),

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

@@ -357 +357 @@
                                 widgetPartial = new self.WidgetPartial( partialId, {
                                         params: {}
                                 } );
-                                api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
                         }
 
                         // Make sure that there is a container element for the widget in the sidebar, if at least a placeholder.
@@ -400 +399 @@
                                 wasInserted = true;
                         } );
 
+                        api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
+
                         if ( wasInserted ) {
                                 sidebarPartial.reflowWidgets();
                         }

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

@@ -18 +18 @@
 
         _.extend( self, api.Events );
 
+        // Extend jQuery to notice element removal and call the 'destroyed' event
+        $.event.special.destroyed = {
+                remove: function( o ) {
+                        if ( o.handler ) {
+                                o.handler();
+                        }
+                }
+        };
+
         /**
          * A Customizer Partial.
          *
@@ -42 +51 @@
 
                 id: null,
 
-                 /**
+                /**
                  * Constructor.
                  *
                  * @since 4.5.0
@@ -84 +93 @@
                         var partial = this;
                         _.each( _.pluck( partial.placements(), 'container' ), function( container ) {
                                 $( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
+                                partial.createEditIconForElement( container );
                         } );
                         $( document ).on( 'click', partial.params.selector, function( e ) {
                                 if ( ! e.shiftKey ) {
@@ -99 +109 @@
                 },
 
                 /**
+                 * Create and show the edit icon for this element.
+                 */
+                createEditIconForElement: function( element ) {
+                        var partial = this;
+                        var $icon = this.createEditIcon();
+                        var $element = $( element );
+                        $element.before( $icon );
+                        partial.positionEditIcon( $element, $icon );
+                        $icon.on( 'click', function( evt ) {
+                                partial.showControl();
+                        } );
+                        $element.on( 'destroyed', function() {
+                                $icon.remove();
+                                partial.editIcon = null;
+                        } );
+                        api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
+                                partial.refreshEditIcon( placement.container );
+                        } );
+                        api.selectiveRefresh.bind( 'partial-content-moved', function( placement ) {
+                                partial.refreshEditIcon( placement.container );
+                        } );
+                        // TODO: this should be somewhere global
+                        api.preview.bind( 'collapse-sidebar', function( collapsed ) {
+                                $( document.body ).toggleClass( 'page-sidebar-collapsed' );
+                        } );
+                        partial.editIcon = $icon;
+                },
+
+                hideEditIcon: function() {
+                        var partial = this;
+                        if ( partial.editIcon ) {
+                                partial.editIcon.addClass( 'customize-partial-icon--hidden' );
+                        }
+                },
+
+                showEditIcon: function() {
+                        var partial = this;
+                        if ( partial.editIcon ) {
+                                partial.editIcon.removeClass( 'customize-partial-icon--hidden' );
+                        }
+                },
+
+                refreshEditIcon: function( element ) {
+                        var partial = this;
+                        if ( ! partial.editIcon ) {
+                                this.createEditIconForElement( element );
+                        }
+                },
+
+                positionEditIcon: function( $element, $icon ) {
+                        var partial = this;
+                        if ( $element.css( 'position' ) === 'absolute' ) {
+                                $icon.css( partial.getCalculatedCssForEditIcon( $element ) );
+                                partial.whenPageChanges( function() {
+                                        $icon.css( partial.getCalculatedCssForEditIcon( $element ) );
+                                } );
+                        }
+                        if ( ! $element.is( ':visible' ) || $element.css( 'display' ) === 'none' ) {
+                                $icon.addClass( 'customize-partial-icon--hidden' );
+                        }
+                        var left = $element.offset().left;
+                        if ( left < 1 ) {
+                                $icon.addClass( 'customize-partial-icon--left-margin' );
+                        }
+                },
+
+                whenPageChanges: function( callback ) {
+                        var debouncedCallaback = _.debounce( function() {
+                                // Timeout allows any page animations to finish
+                                setTimeout( callback, 100 );
+                        }, 350 );
+                        // When window is resized
+                        $( window ).resize( debouncedCallaback );
+                        // When any customizer setting changes
+                        api.bind( 'change', debouncedCallaback );
+                        var $document = $( window.document );
+                        // After scroll in case there are fixed position elements
+                        $document.on( 'scroll', debouncedCallaback );
+                        // After page click (eg: hamburger menus)
+                        $document.on( 'click', debouncedCallaback );
+                },
+
+                getCalculatedCssForEditIcon: function( $target ) {
+                        var hiddenIconPos = ( 'rtl' === window.document.dir ) ? { right: -1000, left: 'auto' } : { left: -1000, right: 'auto' };
+                        if ( ! $target.is( ':visible' ) ) {
+                                return hiddenIconPos;
+                        }
+                        var top = $target.css( 'top' );
+                        var left = $target.css( 'left' );
+                        return { top: top, left: left, right: 'auto' };
+                },
+
+                getIconClassName: function() {
+                        var partial = this;
+                        var cleanId = partial.id.replace( /\]/g, '' ).replace( /\[/g, '-' );
+                        return 'customize-partial-icon-' + cleanId;
+                },
+
+                getIconTitle: function() {
+                        var l10n = self.data.l10n;
+                        switch ( this.getType() ) {
+                                case 'widget':
+                                        return l10n.clickEditWidget;
+                                case 'blogname':
+                                        return l10n.clickEditTitle;
+                                case 'blogdescription':
+                                        return l10n.clickEditTitle;
+                                case 'nav_menu':
+                                        return l10n.clickEditMenu;
+                                default:
+                                        return l10n.clickEditMisc;
+                        }
+                },
+
+                getType: function() {
+                        var partial = this;
+                        var settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
+                        if ( partial.params.type ) {
+                                return partial.params.type;
+                        }
+                        if ( settingId.match( /^nav_menu_instance/ ) ) {
+                                return 'nav_menu';
+                        }
+                        if ( settingId.match( /^widget_/ ) ) {
+                                return 'widget';
+                        }
+                        return settingId;
+                },
+
+                createEditIcon: function() {
+                        var iconTitle = this.getIconTitle();
+                        return $( '<button aria-label="' + iconTitle + '" title="' + iconTitle + '" type="button" class="customize-partial-icon ' + this.getIconClassName() + '"/>' );
+                },
+
+                /**
                  * Find all placements for this partial int he document.
                  *
                  * @since 4.5.0
@@ -179 +324 @@
                         if ( ! settingId ) {
                                 settingId = _.first( partial.settings() );
                         }
+                        if ( this.getType() === 'nav_menu' ) {
+                                var menuSlug = partial.params.navMenuArgs.theme_location;
+                                if ( menuSlug ) {
+                                        settingId = 'nav_menu_locations[' + menuSlug + ']';
+                                }
+                        }
                         api.preview.send( 'focus-control-for-setting', settingId );
                 },
 
@@ -855 +1006 @@
                 } );
 
                 api.preview.bind( 'active', function() {
+                        var body = $( document.body );
 
                         // Make all partials ready.
                         self.partial.each( function( partial ) {
@@ -865 +1017 @@
                         self.partial.bind( 'add', function( partial ) {
                                 partial.deferred.ready.resolve();
                         } );
+
+                        body.on( 'click', function( event ) {
+                                if ( $( event.target ).is( '.customize-partial-icon, :input, a[href]' ) ) {
+                                        return;
+                                }
+                                if ( body.hasClass( 'customize-partial-icons-shown' ) ) {
+                                        body.removeClass( 'customize-partial-icons-shown' );
+                                        body.addClass( 'customize-partial-icons-hidden' );
+                                } else {
+                                        body.addClass( 'customize-partial-icons-shown' );
+                                        body.removeClass( 'customize-partial-icons-hidden' );
+                                }
+                        } );
                 } );
 
         } );