|
1 | 1 | ( function( wp, $ ) { |
| 2 | + 'use strict'; |
2 | 3 |
|
3 | | - wp.customize.ColorSchemeControl = wp.customize.Control.extend({ |
| 4 | + wp.customize.ColorSchemeControl = wp.customize.Control.extend( { |
4 | 5 | ready: function() { |
5 | 6 | var control = this, |
6 | 7 | radios = $( '.radios', this.container ), |
7 | 8 | selection = $( '.selection', this.container ), |
8 | 9 | $schemes = $( '.scheme', selection ), |
9 | 10 | schemes = control.params.schemes, |
10 | 11 | colors = control.setting.get() !== 'custom' ? schemes[ control.setting.get() ].colors : {}, |
11 | | - colors_handler, |
| 12 | + colorsHandler, |
12 | 13 | apply = $( '.apply-scheme', this.container ); |
13 | 14 |
|
14 | | - var schemes_colors = []; |
15 | | - |
16 | | - colors_handler = function( to ) { |
17 | | - if ( schemes_colors.length == 0 ) { |
18 | | - for ( scheme in schemes ) { |
19 | | - schemes_colors.push( schemes[scheme].color ); |
20 | | - |
21 | | - $.each( schemes[scheme].colors, function( key, value ) { |
22 | | - if ( wp.customize.has( key ) ) { |
23 | | - wp.customize( key, function( setting ) { |
24 | | - if ( setting.color_scheme_binded !== true ) { |
25 | | - setting.bind( colors_change_handler ); |
26 | | - setting.color_scheme_binded = true; |
27 | | - } |
28 | | - } ); |
29 | | - } |
30 | | - } ); |
| 15 | + var schemesColors = []; |
| 16 | + |
| 17 | + var addColorsChangeHandler = function( key ) { |
| 18 | + if ( wp.customize.has( key ) ) { |
| 19 | + wp.customize( key, function( setting ) { |
| 20 | + if ( true !== setting.colorSchemeBinded ) { |
| 21 | + setting.bind( colorsChangeHandler ); |
| 22 | + setting.colorSchemeBinded = true; |
| 23 | + } |
| 24 | + } ); |
| 25 | + } |
| 26 | + }; |
| 27 | + |
| 28 | + colorsHandler = function( to ) { |
| 29 | + if ( 0 === schemesColors.length ) { |
| 30 | + for ( var scheme in schemes ) { |
| 31 | + schemesColors.push( schemes[scheme].color ); |
| 32 | + |
| 33 | + $.each( schemes[scheme].colors, addColorsChangeHandler ); |
31 | 34 | } |
32 | 35 | } |
33 | 36 |
|
34 | | - if ( to == 'custom' ) return; |
| 37 | + if ( 'custom' === to ) { |
| 38 | + return; |
| 39 | + } |
| 40 | + |
35 | 41 | colors = schemes[ to ].colors; |
36 | 42 | $.each( colors, function( key, value ) { |
37 | 43 | if ( wp.customize.has( key ) ) { |
|
48 | 54 | } ); |
49 | 55 | }; |
50 | 56 |
|
51 | | - var change_handler = function() { |
| 57 | + var changeHandler = function() { |
52 | 58 | var scheme = $( '[data-value="' + control.setting.get() + '"]', selection ); |
53 | 59 | $( '.scheme.selected', selection ).removeClass( 'selected' ); |
54 | 60 |
|
55 | 61 | scheme.addClass( 'selected' ); |
56 | 62 | }; |
57 | 63 |
|
58 | | - var change_timeout = null; |
| 64 | + var changeTimeout = null; |
59 | 65 |
|
60 | | - var colors_change_handler = function() { |
61 | | - if ( change_timeout !== null ) |
62 | | - clearTimeout( change_timeout ); |
| 66 | + var colorsChangeHandler = function() { |
| 67 | + if ( changeTimeout !== null ) { |
| 68 | + clearTimeout( changeTimeout ); |
| 69 | + } |
63 | 70 |
|
64 | | - if ( control.setting.get() == 'custom' ) return false; |
| 71 | + if ( 'custom' === control.setting.get() ) { |
| 72 | + return false; |
| 73 | + } |
65 | 74 |
|
66 | 75 | var equal = true; |
67 | | - var is_first = true; |
68 | | - var last_color = ''; |
69 | | - var current_color = ''; |
| 76 | + var isFirst = true; |
| 77 | + var lastColor = ''; |
| 78 | + var currentColor = ''; |
| 79 | + var allSettings = wp.customize.get(); |
70 | 80 |
|
71 | | - for ( color in colors ) { |
| 81 | + for ( var color in colors ) { |
72 | 82 | if ( wp.customize.has( color ) ) { |
73 | | - wp.customize( color, function( setting ) { |
74 | | - current_color = setting.get(); |
75 | | - } ); |
| 83 | + currentColor = allSettings[ color ]; |
76 | 84 |
|
77 | | - if ( ! is_first ) { |
78 | | - if ( last_color !== current_color ) { |
| 85 | + if ( ! isFirst ) { |
| 86 | + if ( lastColor !== currentColor ) { |
79 | 87 | equal = false; |
80 | 88 | break; |
81 | 89 | } |
82 | 90 | } |
83 | 91 | else { |
84 | | - is_first = false; |
85 | | - last_color = current_color; |
86 | | - if ( schemes_colors.indexOf( last_color ) < 0 ) { |
| 92 | + isFirst = false; |
| 93 | + lastColor = currentColor; |
| 94 | + if ( schemesColors.indexOf( lastColor ) < 0 ) { |
87 | 95 | equal = false; |
88 | 96 | break; |
89 | 97 | } |
90 | 98 | } |
91 | 99 | } |
92 | 100 | } |
93 | 101 |
|
94 | | - if ( equal == false ) { |
95 | | - change_timeout = setTimeout( function() { |
| 102 | + if ( false === equal ) { |
| 103 | + changeTimeout = setTimeout( function() { |
96 | 104 | control.setting.set( 'custom' ); |
97 | | - change_timeout = null; |
| 105 | + changeTimeout = null; |
98 | 106 | }, 200 ); |
99 | 107 | } |
100 | 108 |
|
|
104 | 112 | radios.hide(); |
105 | 113 | $( '.scheme[data-value="' + control.setting.get() + '"]', selection ).addClass( 'selected' ); |
106 | 114 |
|
107 | | - control.setting.bind( change_handler ); |
108 | | - colors_handler( control.setting.get() ); |
109 | | - change_handler(); |
| 115 | + control.setting.bind( changeHandler ); |
| 116 | + colorsHandler( control.setting.get() ); |
| 117 | + changeHandler(); |
110 | 118 |
|
111 | 119 | apply.on( 'click', function( event ) { |
112 | 120 | event.preventDefault(); |
113 | 121 |
|
114 | | - colors_handler( control.setting.get() ); |
| 122 | + colorsHandler( control.setting.get() ); |
115 | 123 | } ); |
116 | 124 |
|
117 | 125 | $( '.color', $schemes ).on( 'click', function( event ) { |
118 | 126 | event.preventDefault(); |
119 | 127 |
|
120 | 128 | var scheme = $( this ).closest( '.scheme' ); |
121 | | - if ( scheme.hasClass( 'selected' ) ) return; |
| 129 | + if ( scheme.hasClass( 'selected' ) ) { |
| 130 | + return; |
| 131 | + } |
122 | 132 |
|
123 | 133 | control.setting.set( scheme.data( 'value' ) ); |
124 | 134 | } ); |
|
0 commit comments