1 | <?php |
||
2 | if ( ! class_exists( 'LSX_Customizer_Colour' ) ) { |
||
3 | |||
4 | /** |
||
5 | * LSX Customizer Colour Class |
||
6 | * |
||
7 | * @package LSX Customizer |
||
8 | * @author LightSpeed |
||
9 | * @license GPL3 |
||
10 | * @link |
||
11 | * @copyright 2016 LightSpeed |
||
12 | */ |
||
13 | class LSX_Customizer_Colour extends LSX_Customizer { |
||
14 | |||
15 | /** |
||
16 | * Button customizer instance. |
||
17 | * |
||
18 | * @var string |
||
19 | * @since 1.0.0 |
||
20 | */ |
||
21 | public $button; |
||
22 | |||
23 | /** |
||
24 | * Button CTA customizer instance. |
||
25 | * |
||
26 | * @var string |
||
27 | * @since 1.0.0 |
||
28 | */ |
||
29 | public $button_cta; |
||
30 | |||
31 | /** |
||
32 | * Button secondary customizer instance. |
||
33 | * |
||
34 | * @var string |
||
35 | * @since 1.1.0 |
||
36 | */ |
||
37 | public $button_secondary; |
||
38 | |||
39 | /** |
||
40 | * Button tertiary customizer instance. |
||
41 | * |
||
42 | * @var string |
||
43 | * @since 1.1.0 |
||
44 | */ |
||
45 | public $button_tertiary; |
||
46 | |||
47 | /** |
||
48 | * Top Menu customizer instance. |
||
49 | * |
||
50 | * @var string |
||
51 | * @since 1.0.0 |
||
52 | */ |
||
53 | public $top_menu; |
||
54 | |||
55 | /** |
||
56 | * Header customizer instance. |
||
57 | * |
||
58 | * @var string |
||
59 | * @since 1.0.0 |
||
60 | */ |
||
61 | public $header; |
||
62 | |||
63 | /** |
||
64 | * Main menu customizer instance. |
||
65 | * |
||
66 | * @var string |
||
67 | * @since 1.0.0 |
||
68 | */ |
||
69 | public $main_menu; |
||
70 | |||
71 | /** |
||
72 | * Banner customizer instance. |
||
73 | * |
||
74 | * @var string |
||
75 | * @since 1.0.0 |
||
76 | */ |
||
77 | public $banner; |
||
78 | |||
79 | /** |
||
80 | * Body customizer instance. |
||
81 | * |
||
82 | * @var string |
||
83 | * @since 1.0.0 |
||
84 | */ |
||
85 | public $body; |
||
86 | |||
87 | /** |
||
88 | * Footer CTA customizer instance. |
||
89 | * |
||
90 | * @var string |
||
91 | * @since 1.0.0 |
||
92 | */ |
||
93 | public $footer_cta; |
||
94 | |||
95 | /** |
||
96 | * Footer Widgets customizer instance. |
||
97 | * |
||
98 | * @var string |
||
99 | * @since 1.0.0 |
||
100 | */ |
||
101 | public $footer_widgets; |
||
102 | |||
103 | /** |
||
104 | * Footer customizer instance. |
||
105 | * |
||
106 | * @var string |
||
107 | * @since 1.0.0 |
||
108 | */ |
||
109 | public $footer; |
||
110 | |||
111 | /** |
||
112 | * Constructor. |
||
113 | * |
||
114 | * @since 1.0.0 |
||
115 | */ |
||
116 | public function __construct() { |
||
117 | add_action( 'after_setup_theme', array( $this, 'after_setup_theme' ), 20 ); |
||
118 | add_action( 'customize_register', array( $this, 'customize_register' ), 20 ); |
||
119 | add_action( 'customize_controls_print_footer_scripts', array( $this, 'colour_scheme_css_template' ) ); |
||
120 | } |
||
121 | |||
122 | /** |
||
123 | * Customizer Controls and Settings. |
||
124 | * |
||
125 | * @param WP_Customize_Manager $wp_customize Theme Customizer object. |
||
126 | * @since 1.0.0 |
||
127 | */ |
||
128 | public function after_setup_theme() { |
||
129 | require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-options.php' ); |
||
130 | require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-deprecated.php' ); |
||
131 | require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-templates.php' ); |
||
132 | |||
133 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button.php' ); |
||
134 | $this->button = new LSX_Customizer_Colour_Button(); |
||
135 | |||
136 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-cta.php' ); |
||
137 | $this->button_cta = new LSX_Customizer_Colour_Button_CTA(); |
||
138 | |||
139 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-secondary.php' ); |
||
140 | $this->button_secondary = new LSX_Customizer_Colour_Button_Secondary(); |
||
141 | |||
142 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-tertiary.php' ); |
||
143 | $this->button_tertiary = new LSX_Customizer_Colour_Button_Tertiary(); |
||
144 | |||
145 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-top-menu.php' ); |
||
146 | $this->top_menu = new LSX_Customizer_Colour_Top_Menu(); |
||
147 | |||
148 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-header.php' ); |
||
149 | $this->header = new LSX_Customizer_Colour_Header(); |
||
150 | |||
151 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-main-menu.php' ); |
||
152 | $this->main_menu = new LSX_Customizer_Colour_Main_Menu(); |
||
153 | |||
154 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-banner.php' ); |
||
155 | $this->banner = new LSX_Customizer_Colour_Banner(); |
||
156 | |||
157 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-body.php' ); |
||
158 | $this->body = new LSX_Customizer_Colour_Body(); |
||
159 | |||
160 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-cta.php' ); |
||
161 | $this->footer_cta = new LSX_Customizer_Colour_Footer_CTA(); |
||
162 | |||
163 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-widgets.php' ); |
||
164 | $this->footer_widgets = new LSX_Customizer_Colour_Footer_Widgets(); |
||
165 | |||
166 | require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer.php' ); |
||
167 | $this->footer = new LSX_Customizer_Colour_Footer(); |
||
168 | } |
||
169 | |||
170 | /** |
||
171 | * Customizer Controls and Settings. |
||
172 | * |
||
173 | * @param WP_Customize_Manager $wp_customize Theme Customizer object. |
||
174 | * @since 1.0.0 |
||
175 | */ |
||
176 | public function customize_register( $wp_customize ) { |
||
177 | global $customizer_colour_names; |
||
178 | global $customizer_colour_choices; |
||
179 | |||
180 | /** |
||
181 | * Colors |
||
182 | */ |
||
183 | $wp_customize->add_panel( 'colors', array( |
||
184 | 'title' => esc_html__( 'Site Design', 'lsx-customizer' ), |
||
0 ignored issues
–
show
introduced
by
![]() |
|||
185 | 'priority' => 60, |
||
0 ignored issues
–
show
|
|||
186 | ) ); |
||
187 | |||
188 | $wp_customize->add_section( 'colors-palette', array( |
||
189 | 'title' => esc_html__( 'Block Editor', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
190 | 'description' => esc_html__( 'Define the block editor colour pallette.', 'lsx-customizer' ), |
||
191 | 'priority' => 2, |
||
0 ignored issues
–
show
|
|||
192 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
193 | ) ); |
||
194 | |||
195 | $wp_customize->add_section( 'colors-button', array( |
||
196 | 'title' => esc_html__( 'Button', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
197 | 'priority' => 3, |
||
0 ignored issues
–
show
|
|||
198 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
199 | ) ); |
||
200 | |||
201 | $wp_customize->add_section( 'colors-button-cta', array( |
||
202 | 'title' => esc_html__( 'Button CTA', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
203 | 'priority' => 4, |
||
0 ignored issues
–
show
|
|||
204 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
205 | ) ); |
||
206 | |||
207 | $wp_customize->add_section( 'colors-button-secondary', array( |
||
208 | 'title' => esc_html__( 'Button Secondary', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
209 | 'priority' => 5, |
||
0 ignored issues
–
show
|
|||
210 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
211 | ) ); |
||
212 | |||
213 | $wp_customize->add_section( 'colors-button-tertiary', array( |
||
214 | 'title' => esc_html__( 'Button Tertiary', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
215 | 'priority' => 6, |
||
0 ignored issues
–
show
|
|||
216 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
217 | ) ); |
||
218 | |||
219 | $wp_customize->add_section( 'colors-top-menu', array( |
||
220 | 'title' => esc_html__( 'Top Menu', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
221 | 'priority' => 7, |
||
0 ignored issues
–
show
|
|||
222 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
223 | ) ); |
||
224 | |||
225 | $wp_customize->add_section( 'colors-header', array( |
||
226 | 'title' => esc_html__( 'Header', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
227 | 'priority' => 8, |
||
0 ignored issues
–
show
|
|||
228 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
229 | ) ); |
||
230 | |||
231 | $wp_customize->add_section( 'colors-main-menu', array( |
||
232 | 'title' => esc_html__( 'Main Menu', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
233 | 'priority' => 9, |
||
0 ignored issues
–
show
|
|||
234 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
235 | ) ); |
||
236 | |||
237 | $wp_customize->add_section( 'colors-banner', array( |
||
238 | 'title' => esc_html__( 'Banner', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
239 | 'priority' => 10, |
||
0 ignored issues
–
show
|
|||
240 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
241 | ) ); |
||
242 | |||
243 | $wp_customize->add_section( 'colors-body', array( |
||
244 | 'title' => esc_html__( 'Body', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
245 | 'priority' => 11, |
||
0 ignored issues
–
show
|
|||
246 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
247 | ) ); |
||
248 | |||
249 | $wp_customize->add_section( 'colors-footer-cta', array( |
||
250 | 'title' => esc_html__( 'Footer CTA', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
251 | 'priority' => 12, |
||
0 ignored issues
–
show
|
|||
252 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
253 | ) ); |
||
254 | |||
255 | $wp_customize->add_section( 'colors-footer-widgets', array( |
||
256 | 'title' => esc_html__( 'Footer Widgets', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
257 | 'priority' => 13, |
||
0 ignored issues
–
show
|
|||
258 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
259 | ) ); |
||
260 | |||
261 | $wp_customize->add_section( 'colors-footer', array( |
||
262 | 'title' => esc_html__( 'Footer', 'lsx-customizer' ), |
||
0 ignored issues
–
show
|
|||
263 | 'priority' => 14, |
||
0 ignored issues
–
show
|
|||
264 | 'panel' => 'colors', |
||
0 ignored issues
–
show
|
|||
265 | ) ); |
||
266 | |||
267 | /** |
||
268 | * Colour Palette |
||
269 | */ |
||
270 | $colors = $this->get_color_scheme(); |
||
271 | |||
272 | $customizer_colour_defaults = array( |
||
273 | __( 'Primary Colour', 'lsx-customizer' ) => get_theme_mod( 'button_background_color', $colors['button_background_color'] ), |
||
274 | __( 'Strong Primary Colour', 'lsx-button_shadow' ) => get_theme_mod( 'button_background_hover_color', $colors['button_background_hover_color'] ), |
||
275 | __( 'Call To Action Colour', 'lsx-customizer' ) => get_theme_mod( 'button_cta_background_color', $colors['button_cta_background_color'] ), |
||
276 | __( 'Strong CTA Colour', 'lsx-button_shadow' ) => get_theme_mod( 'button_cta_shadow', $colors['button_cta_shadow'] ), |
||
277 | __( 'Secondary Colour', 'lsx-customizer' ) => get_theme_mod( 'button_secondary_background_color', $colors['button_secondary_background_color'] ), |
||
278 | __( 'Strong Secondary Colour', 'lsx-button_shadow' ) => get_theme_mod( 'button_secondary_shadow', $colors['button_secondary_shadow'] ), |
||
279 | __( 'Tertiary Colour', 'lsx-customizer' ) => get_theme_mod( 'button_tertiary_background_color', $colors['button_tertiary_background_color'] ), |
||
280 | __( 'Strong Tertiary Colour', 'lsx-button_shadow' ) => get_theme_mod( 'button_tertiary_shadow', $colors['button_tertiary_shadow'] ), |
||
281 | ); |
||
282 | foreach ( $customizer_colour_defaults as $key => $value ) { |
||
283 | |||
284 | $color_name = strtolower( str_replace( ' ', '_', $key ) ); |
||
285 | $color_name = $color_name; |
||
286 | |||
287 | $wp_customize->add_setting( $color_name, array( |
||
288 | 'default' => $value, |
||
289 | 'type' => 'theme_mod', |
||
290 | 'transport' => 'postMessage', |
||
291 | 'sanitize_callback' => 'sanitize_hex_color', |
||
292 | ) ); |
||
293 | $wp_customize->add_control( |
||
294 | new WP_Customize_Color_Control( |
||
295 | $wp_customize, |
||
296 | $color_name, |
||
297 | array( |
||
298 | 'label' => $key, |
||
299 | 'section' => 'colors-palette', |
||
300 | 'settings' => $color_name, |
||
301 | ) |
||
302 | ) |
||
303 | ); |
||
304 | } |
||
305 | |||
306 | /** |
||
307 | * Colors |
||
308 | */ |
||
309 | foreach ( $customizer_colour_names as $key => $value ) { |
||
310 | $sanitize_callback = 'sanitize_hex_color'; |
||
311 | |||
312 | if ( 'background_color' === $key ) { |
||
313 | $sanitize_callback = 'sanitize_hex_color_no_hash'; |
||
314 | } |
||
315 | |||
316 | $section = 'colors-core'; |
||
317 | |||
318 | if ( preg_match( '/^button_cta_.*/', $key ) ) { |
||
319 | $section = 'colors-button-cta'; |
||
320 | } elseif ( preg_match( '/^button_secondary_.*/', $key ) ) { |
||
321 | $section = 'colors-button-secondary'; |
||
322 | } elseif ( preg_match( '/^button_tertiary_.*/', $key ) ) { |
||
323 | $section = 'colors-button-tertiary'; |
||
324 | } elseif ( preg_match( '/^button_.*/', $key ) ) { |
||
325 | $section = 'colors-button'; |
||
326 | } elseif ( preg_match( '/^top_menu_.*/', $key ) ) { |
||
327 | $section = 'colors-top-menu'; |
||
328 | } elseif ( preg_match( '/^header_.*/', $key ) ) { |
||
329 | $section = 'colors-header'; |
||
330 | } elseif ( preg_match( '/^main_menu_.*/', $key ) ) { |
||
331 | $section = 'colors-main-menu'; |
||
332 | } elseif ( preg_match( '/^banner_.*/', $key ) ) { |
||
333 | $section = 'colors-banner'; |
||
334 | } elseif ( preg_match( '/^body_.*/', $key ) || 'background_color' === $key ) { |
||
335 | $section = 'colors-body'; |
||
336 | } elseif ( preg_match( '/^footer_cta_.*/', $key ) ) { |
||
337 | $section = 'colors-footer-cta'; |
||
338 | } elseif ( preg_match( '/^footer_widgets_.*/', $key ) ) { |
||
339 | $section = 'colors-footer-widgets'; |
||
340 | } elseif ( preg_match( '/^footer_.*/', $key ) ) { |
||
341 | $section = 'colors-footer'; |
||
342 | } |
||
343 | |||
344 | $wp_customize->add_setting( $key, array( |
||
345 | 'default' => $customizer_colour_choices['default']['colors'][ $key ], |
||
346 | 'type' => 'theme_mod', |
||
347 | 'transport' => 'postMessage', |
||
348 | 'sanitize_callback' => $sanitize_callback, |
||
349 | ) ); |
||
350 | |||
351 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array( |
||
352 | 'label' => $value, |
||
0 ignored issues
–
show
|
|||
353 | 'section' => $section, |
||
0 ignored issues
–
show
|
|||
354 | 'settings' => $key, |
||
0 ignored issues
–
show
|
|||
355 | ) ) ); |
||
356 | } |
||
357 | } |
||
358 | |||
359 | /** |
||
360 | * Outputs an Underscore template for generating CSS for the color scheme. |
||
361 | * |
||
362 | * @since 1.0.0 |
||
363 | */ |
||
364 | public function colour_scheme_css_template() { |
||
365 | global $customizer_colour_names; |
||
366 | |||
367 | $colors = array(); |
||
368 | |||
369 | foreach ( $customizer_colour_names as $key => $value ) { |
||
370 | $colors[ $key ] = 'unquote("{{ data.' . $key . ' }}")'; |
||
371 | } |
||
372 | ?> |
||
373 | <script type="text/html" id="tmpl-lsx-color-scheme"> |
||
374 | <?php echo esc_attr( $this->top_menu->get_css( $colors ) ); ?> |
||
375 | <?php echo esc_attr( $this->header->get_css( $colors ) ); ?> |
||
376 | <?php echo esc_attr( $this->main_menu->get_css( $colors ) ); ?> |
||
377 | |||
378 | <?php echo esc_attr( $this->banner->get_css( $colors ) ); ?> |
||
379 | <?php echo esc_attr( $this->body->get_css( $colors ) ); ?> |
||
380 | |||
381 | <?php echo esc_attr( $this->footer_cta->get_css( $colors ) ); ?> |
||
382 | <?php echo esc_attr( $this->footer_widgets->get_css( $colors ) ); ?> |
||
383 | <?php echo esc_attr( $this->footer->get_css( $colors ) ); ?> |
||
384 | |||
385 | <?php echo esc_attr( $this->button->get_css( $colors ) ); ?> |
||
386 | <?php echo esc_attr( $this->button_cta->get_css( $colors ) ); ?> |
||
387 | <?php echo esc_attr( $this->button_secondary->get_css( $colors ) ); ?> |
||
388 | <?php echo esc_attr( $this->button_tertiary->get_css( $colors ) ); ?> |
||
389 | </script> |
||
390 | <?php |
||
391 | } |
||
392 | |||
393 | /** |
||
394 | * Transform SCSS to CSS. |
||
395 | * |
||
396 | * @since 1.0.0 |
||
397 | */ |
||
398 | public function scss_to_css( $scss ) { |
||
399 | $css = ''; |
||
400 | $scss_php_file = LSX_CUSTOMIZER_PATH . 'vendor/leafo/scssphp/scss.inc.php'; |
||
401 | $lsx_theme_sass_file = get_template_directory() . '/assets/css/scss/lsx.scss'; |
||
402 | |||
403 | if ( ! empty( $scss ) && file_exists( $scss_php_file ) && file_exists( $lsx_theme_sass_file ) ) { |
||
404 | require_once $scss_php_file; |
||
405 | |||
406 | $compiler = new \Leafo\ScssPhp\Compiler(); |
||
407 | $compiler->setFormatter( 'Leafo\ScssPhp\Formatter\Compact' ); |
||
408 | |||
409 | try { |
||
410 | $scss = ' |
||
411 | @import "' . LSX_CUSTOMIZER_PATH . '/assets/css/scss/include-media"; |
||
412 | @import "' . get_template_directory() . '/assets/css/scss/global/lsx-variables"; |
||
413 | @import "' . get_template_directory() . '/assets/css/scss/global/mixins/colours-helper"; |
||
414 | ' . $scss . ' |
||
415 | '; |
||
416 | |||
417 | $css = $compiler->compile( $scss ); |
||
418 | } catch ( \Exception $e ) { |
||
419 | $error = $e->getMessage(); |
||
420 | return "/*\n\n\$error:\n\n{$error}\n\n\$scss:\n\n{$scss} */"; |
||
421 | } |
||
422 | } |
||
423 | |||
424 | return $css; |
||
425 | } |
||
426 | |||
427 | /** |
||
428 | * Converts a HEX value to RGB. |
||
429 | * |
||
430 | * @since 1.0.0 |
||
431 | */ |
||
432 | public static function hex2rgb( $color ) { |
||
433 | $color = trim( $color, '#' ); |
||
434 | |||
435 | if ( strlen( $color ) === 3 ) { |
||
436 | $r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) ); |
||
437 | $g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) ); |
||
438 | $b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) ); |
||
439 | } elseif ( strlen( $color ) === 6 ) { |
||
440 | $r = hexdec( substr( $color, 0, 2 ) ); |
||
441 | $g = hexdec( substr( $color, 2, 2 ) ); |
||
442 | $b = hexdec( substr( $color, 4, 2 ) ); |
||
443 | } else { |
||
444 | return array(); |
||
445 | } |
||
446 | |||
447 | return array( |
||
448 | 'red' => $r, |
||
449 | 'green' => $g, |
||
450 | 'blue' => $b, |
||
451 | ); |
||
452 | } |
||
453 | |||
454 | /** |
||
455 | * Retrieves the current color scheme. |
||
456 | * |
||
457 | * @since 1.0.0 |
||
458 | */ |
||
459 | public function get_color_scheme() { |
||
460 | global $customizer_colour_choices; |
||
461 | |||
462 | //$color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
||
463 | $color_schemes = $customizer_colour_choices; |
||
464 | |||
465 | // if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { |
||
466 | // return $color_schemes[ $color_scheme_option ]['colors']; |
||
467 | // } |
||
468 | |||
469 | return $color_schemes['default']['colors']; |
||
470 | } |
||
471 | |||
472 | } |
||
473 | |||
474 | new LSX_Customizer_Colour(); |
||
475 | |||
476 | } |
||
477 |