Changeset 39131

Timestamp:

11/03/2016 10:22:43 PM (8 years ago)

Author:

westonruter

Message:

Customize: Let edit shortcuts be persistently visible when controls pane is expanded, hidden when collapsed, and always visible in mobile preview. Remove initial flash of edit shortcuts.

Props westonruter, sirbrillig.
Fixes #27403.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (2 diffs)
• wp-includes/css/customize-preview.css (modified) (1 diff)
• wp-includes/js/customize-selective-refresh.js (modified) (2 diffs)

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

@@ -5208 +5208 @@
             expandedSection( false );
             previewerAlive( true );
-            editShortcutVisibility( 'initial' );
+            editShortcutVisibility( 'visible' );
 
             api.bind( 'change', function() {
@@ -5814 +5814 @@
 
         // Update the edit shortcut visibility state.
+        api.state( 'paneVisible' ).bind( function( isPaneVisible ) {
+            var isMobileScreen;
+            if ( window.matchMedia ) {
+                isMobileScreen = window.matchMedia( 'screen and ( max-width: 640px )' ).matches;
+            } else {
+                isMobileScreen = $( window ).width() <= 640;
+            }
+            api.state( 'editShortcutVisibility' ).set( isPaneVisible || isMobileScreen ? 'visible' : 'hidden' );
+        } );
+        if ( window.matchMedia ) {
+            window.matchMedia( 'screen and ( max-width: 640px )' ).addListener( function() {
+                var state = api.state( 'paneVisible' );
+                state.callbacks.fireWith( state, [ state.get(), state.get() ] );
+            } );
+        }
         api.previewer.bind( 'edit-shortcut-visibility', function( visibility ) {
             api.state( 'editShortcutVisibility' ).set( visibility );

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

@@ -81 +81 @@
 }
 
-body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
-    animation-duration: 1.5s;
-    animation-delay: 0.4s;
-    animation-name: customize-partial-edit-shortcut-bounce-disappear;
-    pointer-events: none;
-}
-
 .page-sidebar-collapsed .customize-partial-edit-shortcut:before,
 .customize-partial-edit-shortcut-hidden:before {

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

@@ -997 +997 @@
             body.toggleClass( 'customize-partial-edit-shortcuts-hidden', shouldAnimateHide );
             body.toggleClass( 'customize-partial-edit-shortcuts-shown', 'visible' === visibility );
-            body.toggleClass( 'customize-partial-edit-shortcuts-flash', 'initial' === visibility );
         } );
 
@@ -1023 +1022 @@
                 partial.deferred.ready.resolve();
             } );
-
-            body.on( 'click', function( event ) {
-                if ( event.shiftKey || $( event.target ).is( '.customize-partial-edit-shortcut, :input, button *, a[href], a[href] *, object, object *, [tabindex], [tabindex] *' ) ) {
-                    return; // Don't toggle shortcuts on shift-clicks or clicks on (or in) interactive elements.
-                }
-                api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
-                api.preview.send( 'edit-shortcut-visibility', api.selectiveRefresh.editShortcutVisibility.get() );
-            } );
         } );