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