123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- /* 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 );
|