Changeset 39220

Timestamp:

11/14/2016 11:22:25 AM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Make custom header preview match front end in Customizer when changed

• Toggles has-header-image body class in Customizer preview whenever images or videos are added or removed.
• Hides the .custom-header-imagediv in CSS when an image or video haven't been set so preview changes are smoother.
• Also fixes the main issues in #38391 – making the preview match.

Props bradyvercher.

Fixes #38627.
See #38391.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/js/customize-preview.js (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

@@ -103 +103 @@
         } );
     } );
+
+    // Whether a header image is available.
+    function hasHeaderImage() {
+        var image = wp.customize( 'header_image' )();
+        return '' !== image && 'remove-header' !== image;
+    }
+
+    // Whether a header video is available.
+    function hasHeaderVideo() {
+        var externalVideo = wp.customize( 'external_header_video' )(),
+            video = wp.customize( 'header_video' )();
+
+        return '' !== externalVideo || ( 0 !== video && '' !== video );
+    }
+
+    // Toggle a body class if a custom header exists.
+    $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
+        wp.customize( settingId, function( setting ) {
+            setting.bind(function() {
+                if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
+                    $( document.body ).addClass( 'has-header-image' );
+                } else {
+                    $( document.body ).removeClass( 'has-header-image' );
+                }
+            } );
+        } );
+    } );
+
 } )( jQuery );

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1691 +1691 @@
 }
 
+/* Hides div in Customizer preview when header images or videos change. */
+
 body:not(.has-header-image) .custom-header-image {
-    padding: 5% 0;
+    display: none;
 }