Ticket #27403: 27403.diff

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

@@ -10 +10 @@
         -webkit-box-shadow: none;
         box-shadow: none;
 }
+
+.customize-partial-icon {
+        fill: #fff;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+        font-size: 18px;
+        z-index: 5;
+        background: #0087BE;
+        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;
+        animation-name: bounce-appear;
+        animation-delay: 0.8s;
+        animation-duration: 1s;
+        animation-fill-mode: both;
+        animation-duration: .75s;
+}
+
+.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);
+        }
+}
+Contact GitHub API Training Shop Blog About

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

@@ -85 +85 @@
                         var partial = this;
                         _.each( _.pluck( partial.placements(), 'container' ), function( container ) {
                                 $( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
+                                partial.showEditIconForElement( container );
                         } );
                         $( document ).on( 'click', partial.params.selector, function( e ) {
                                 if ( ! e.shiftKey ) {
@@ -100 +101 @@
                 },
 
                 /**
+                 * Create and show the edit icon for this element.
+                 *
+                 * Specifically:
+                 *  - create icon element
+                 *  - add icon to DOM
+                 *  - position icon relative to target
+                 *  - add click handler to icon
+                 *  - monitor DOM for changes and reposition icon when changed
+                 *  - monitor DOM for sidebar collapse and hide/show icon
+                 */
+                showEditIconForElement: function( element ) {
+                        var partial = this;
+                        var $icon = this.createEditIcon();
+                        $( window.document.body ).append( $icon );
+                        $icon.on( 'click', partial.showControl.bind( this ) );
+                        this.positionIcon( element, $icon );
+                        this.repositionIconWhenDomChanges( element, $icon );
+                },
+
+                positionIcon: function( element, $icon ) {
+                        var css = this.getCalculatedCssForIcon( $( element ) );
+                        $icon.css( css );
+                },
+
+                repositionIconWhenDomChanges: function( element, $icon ) {
+                        var reposition = _.debounce( this.positionIcon.bind( this, element, $icon ), 350 );
+                        // Reposition after page changes (if browser supports it)
+                        var page = window.document.querySelector( '#page' );
+                        if ( page && 'undefined' !== typeof MutationObserver ) {
+                                var observer = new MutationObserver( reposition );
+                                observer.observe( page, { attributes: true, childList: true, characterData: true } );
+                        }
+                        // Reposition when window is resized
+                        $( window ).resize( reposition );
+                        // Reposition when any customizer setting changes
+                        api.bind( 'change', reposition );
+                        var $document = $( window.document );
+                        // Reposition after scroll in case there are fixed position elements
+                        $document.on( 'scroll', reposition );
+                        // Reposition after page click (eg: hamburger menus)
+                        $document.on( 'click', reposition );
+                        // TODO: reposition in other cases as well
+                },
+
+                getCalculatedCssForIcon: function( $target ) {
+                        var hiddenIconPos = ( 'rtl' === window.document.dir ) ? { right: -1000, left: 'auto' } : { left: -1000, right: 'auto' };
+                        if ( ! $target.is( ':visible' ) ) {
+                                return hiddenIconPos;
+                        }
+                        var offset = $target.offset();
+                        var top = offset.top;
+                        var left = offset.left;
+                        if ( top < 0 ) {
+                                return hiddenIconPos;
+                        }
+                        return this.adjustCoordinates( { top: top, left: left, right: 'auto' } );
+                },
+
+                adjustCoordinates: function( coords ) {
+                        var minWidth = 35;
+                        // Try to avoid overlapping hamburger menus
+                        var maxWidth = window.innerWidth - 110;
+                        if ( coords.left < minWidth ) {
+                                coords.left = minWidth;
+                        }
+                        if ( coords.left >= maxWidth ) {
+                                coords.left = maxWidth;
+                        }
+                        return coords;
+                },
+
+                getIconClassName: function() {
+                        var partial = this;
+                        // TODO: simplify the id string to avoid brackets, etc
+                        return 'customize-partial-icon-' + partial.id;
+                },
+
+                createEditIcon: function() {
+                        // TODO: get translated text for title/hover text
+                        var 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>';
+                        return $( '<div class="customize-partial-icon ' + this.getIconClassName() + '">' + editIconSource + '</div>' );
+                },
+
+                /**
                  * Find all placements for this partial int he document.
                  *
                  * @since 4.5.0