color-scheme-control.js
2.88 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
/* global colorScheme, Color */
/**
* Add a listener to the Color Scheme control to update other color controls to new values/defaults.
* Also trigger an update of the Color Scheme CSS when a color is changed.
*/
( function( api ) {
var cssTemplate = wp.template( 'twentysixteen-color-scheme' ),
colorSchemeKeys = [
'background_color',
'page_background_color',
'link_color',
'main_text_color',
'secondary_text_color'
],
colorSettings = [
'background_color',
'page_background_color',
'link_color',
'main_text_color',
'secondary_text_color'
];
api.controlConstructor.select = api.Control.extend( {
ready: function() {
if ( 'color_scheme' === this.id ) {
this.setting.bind( 'change', function( value ) {
var colors = colorScheme[value].colors;
// Update Background Color.
var color = colors[0];
api( 'background_color' ).set( color );
api.control( 'background_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
// Update Page Background Color.
color = colors[1];
api( 'page_background_color' ).set( color );
api.control( 'page_background_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
// Update Link Color.
color = colors[2];
api( 'link_color' ).set( color );
api.control( 'link_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
// Update Main Text Color.
color = colors[3];
api( 'main_text_color' ).set( color );
api.control( 'main_text_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
// Update Secondary Text Color.
color = colors[4];
api( 'secondary_text_color' ).set( color );
api.control( 'secondary_text_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
} );
}
}
} );
// Generate the CSS for the current Color Scheme.
function updateCSS() {
var scheme = api( 'color_scheme' )(),
css,
colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
// Merge in color scheme overrides.
_.each( colorSettings, function( setting ) {
colors[ setting ] = api( setting )();
} );
// Add additional color.
// jscs:disable
colors.border_color = Color( colors.main_text_color ).toCSS( 'rgba', 0.2 );
// jscs:enable
css = cssTemplate( colors );
api.previewer.send( 'update-color-scheme-css', css );
}
// Update the CSS whenever a color setting is changed.
_.each( colorSettings, function( setting ) {
api( setting, function( setting ) {
setting.bind( updateCSS );
} );
} );
} )( wp.customize );