wp/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
author ymh <ymh.work@gmail.com>
Mon, 14 Oct 2019 17:39:30 +0200
changeset 7 cf61fcea0001
permissions -rw-r--r--
resynchronize code repo with production
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
 * File customize-preview.js.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
 * Instantly live-update customizer settings in the preview for improved user experience.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
(function( $ ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
	// Collect information from customize-controls.js about which panels are opening.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
	wp.customize.bind( 'preview-ready', function() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
		// Initially hide the theme option placeholders on load
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
		$( '.panel-placeholder' ).hide();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
		wp.customize.preview.bind( 'section-highlight', function( data ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
			// Only on the front page.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
			if ( ! $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
				return;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
			}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
			// When the section is expanded, show and scroll to the content placeholders, exposing the edit links.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
			if ( true === data.expanded ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
				$( 'body' ).addClass( 'highlight-front-sections' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
				$( '.panel-placeholder' ).slideDown( 200, function() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
					$.scrollTo( $( '#panel1' ), {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
						duration: 600,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
						offset: { 'top': -70 } // Account for sticky menu.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
					});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
				});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
			// If we've left the panel, hide the placeholders and scroll back to the top.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
			} else {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
				$( 'body' ).removeClass( 'highlight-front-sections' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
				// Don't change scroll when leaving - it's likely to have unintended consequences.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
				$( '.panel-placeholder' ).slideUp( 200 );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
			}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
	// Site title and description.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
	wp.customize( 'blogname', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
			$( '.site-title a' ).text( to );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
	wp.customize( 'blogdescription', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
			$( '.site-description' ).text( to );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
	// Header text color.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
	wp.customize( 'header_textcolor', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
			if ( 'blank' === to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
				$( '.site-title, .site-description' ).css({
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
					clip: 'rect(1px, 1px, 1px, 1px)',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
					position: 'absolute'
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
				});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
				// Add class for different logo styles if title and description are hidden.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
				$( 'body' ).addClass( 'title-tagline-hidden' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
			} else {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
				// Check if the text color has been removed and use default colors in theme stylesheet.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
				if ( ! to.length ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
					$( '#twentyseventeen-custom-header-styles' ).remove();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
				}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
				$( '.site-title, .site-description' ).css({
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
					clip: 'auto',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
					position: 'relative'
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
				});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
				$( '.site-branding, .site-branding a, .site-description, .site-description a' ).css({
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
					color: to
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
				});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
				// Add class for different logo styles if title and description are visible.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
				$( 'body' ).removeClass( 'title-tagline-hidden' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
			}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
	// Color scheme.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
	wp.customize( 'colorscheme', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
			// Update color body class.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
			$( 'body' )
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
				.removeClass( 'colors-light colors-dark colors-custom' )
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
				.addClass( 'colors-' + to );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
	// Custom color hue.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
	wp.customize( 'colorscheme_hue', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
			// Update custom color CSS.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
			var style = $( '#custom-theme-colors' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
				hue = style.data( 'hue' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
				css = style.html();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
			// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
			css = css.split( hue + ',' ).join( to + ',' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
			style.html( css ).data( 'hue', to );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
		});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
	});
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
	// Page layouts.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
	wp.customize( 'page_layout', function( value ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
		value.bind( function( to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
			if ( 'one-column' === to ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
				$( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
			} else {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
				$( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
			}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
		} );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
	} );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
	// Whether a header image is available.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
	function hasHeaderImage() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
		var image = wp.customize( 'header_image' )();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
		return '' !== image && 'remove-header' !== image;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
	}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
	// Whether a header video is available.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
	function hasHeaderVideo() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   127
		var externalVideo = wp.customize( 'external_header_video' )(),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   128
			video = wp.customize( 'header_video' )();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   129
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
		return '' !== externalVideo || ( 0 !== video && '' !== video );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
	}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
	// Toggle a body class if a custom header exists.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   134
	$.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   135
		wp.customize( settingId, function( setting ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   136
			setting.bind(function() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   137
				if ( hasHeaderImage() ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   138
					$( document.body ).addClass( 'has-header-image' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   139
				} else {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   140
					$( document.body ).removeClass( 'has-header-image' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
				}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
				if ( ! hasHeaderVideo() ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   144
					$( document.body ).removeClass( 'has-header-video' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   145
				}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   146
			} );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   147
		} );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
	} );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   149
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   150
} )( jQuery );