← Back to branch summary

~canonical-sysadmins/wordpress/4.5.2

« back to all changes in this revision

Viewing changes to wp-content/themes/twentysixteen/js/color-scheme-control.js

  • Committer: Manuel Seelaus
  • Date: 2015-12-09 17:47:18 UTC
  • mfrom: (1.1.11 upstream)
  • Revision ID: manuel.seelaus@canonical.com-20151209174718-coxethm2swbeqksy
Merge WP4.4 from upstream

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-content/themes/twentysixteen/js/color-scheme-control.js
 
1
/* global colorScheme, Color */
 
2
/**
 
3
 * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
 
4
 * Also trigger an update of the Color Scheme CSS when a color is changed.
 
5
 */
 
6
 
 
7
( function( api ) {
 
8
        var cssTemplate = wp.template( 'twentysixteen-color-scheme' ),
 
9
                colorSchemeKeys = [
 
10
                        'background_color',
 
11
                        'page_background_color',
 
12
                        'link_color',
 
13
                        'main_text_color',
 
14
                        'secondary_text_color'
 
15
                ],
 
16
                colorSettings = [
 
17
                        'background_color',
 
18
                        'page_background_color',
 
19
                        'link_color',
 
20
                        'main_text_color',
 
21
                        'secondary_text_color'
 
22
                ];
 
23
 
 
24
        api.controlConstructor.select = api.Control.extend( {
 
25
                ready: function() {
 
26
                        if ( 'color_scheme' === this.id ) {
 
27
                                this.setting.bind( 'change', function( value ) {
 
28
                                        var colors = colorScheme[value].colors;
 
29
 
 
30
                                        // Update Background Color.
 
31
                                        var color = colors[0];
 
32
                                        api( 'background_color' ).set( color );
 
33
                                        api.control( 'background_color' ).container.find( '.color-picker-hex' )
 
34
                                                .data( 'data-default-color', color )
 
35
                                                .wpColorPicker( 'defaultColor', color );
 
36
 
 
37
                                        // Update Page Background Color.
 
38
                                        color = colors[1];
 
39
                                        api( 'page_background_color' ).set( color );
 
40
                                        api.control( 'page_background_color' ).container.find( '.color-picker-hex' )
 
41
                                                .data( 'data-default-color', color )
 
42
                                                .wpColorPicker( 'defaultColor', color );
 
43
 
 
44
                                        // Update Link Color.
 
45
                                        color = colors[2];
 
46
                                        api( 'link_color' ).set( color );
 
47
                                        api.control( 'link_color' ).container.find( '.color-picker-hex' )
 
48
                                                .data( 'data-default-color', color )
 
49
                                                .wpColorPicker( 'defaultColor', color );
 
50
 
 
51
                                        // Update Main Text Color.
 
52
                                        color = colors[3];
 
53
                                        api( 'main_text_color' ).set( color );
 
54
                                        api.control( 'main_text_color' ).container.find( '.color-picker-hex' )
 
55
                                                .data( 'data-default-color', color )
 
56
                                                .wpColorPicker( 'defaultColor', color );
 
57
 
 
58
                                        // Update Secondary Text Color.
 
59
                                        color = colors[4];
 
60
                                        api( 'secondary_text_color' ).set( color );
 
61
                                        api.control( 'secondary_text_color' ).container.find( '.color-picker-hex' )
 
62
                                                .data( 'data-default-color', color )
 
63
                                                .wpColorPicker( 'defaultColor', color );
 
64
                                } );
 
65
                        }
 
66
                }
 
67
        } );
 
68
 
 
69
        // Generate the CSS for the current Color Scheme.
 
70
        function updateCSS() {
 
71
                var scheme = api( 'color_scheme' )(),
 
72
                        css,
 
73
                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
 
74
 
 
75
                // Merge in color scheme overrides.
 
76
                _.each( colorSettings, function( setting ) {
 
77
                        colors[ setting ] = api( setting )();
 
78
                } );
 
79
 
 
80
                // Add additional color.
 
81
                // jscs:disable
 
82
                colors.border_color = Color( colors.main_text_color ).toCSS( 'rgba', 0.2 );
 
83
                // jscs:enable
 
84
 
 
85
                css = cssTemplate( colors );
 
86
 
 
87
                api.previewer.send( 'update-color-scheme-css', css );
 
88
        }
 
89
 
 
90
        // Update the CSS whenever a color setting is changed.
 
91
        _.each( colorSettings, function( setting ) {
 
92
                api( setting, function( setting ) {
 
93
                        setting.bind( updateCSS );
 
94
                } );
 
95
        } );
 
96
} )( wp.customize );