Completed
Push — develop ( 5b38e4...41b308 )
by Aristeides
07:47
created

Kirki_Modules_Customizer_Styling   B

Complexity

Total Complexity 40

Size/Duplication

Total Lines 230
Duplicated Lines 0 %

Coupling/Cohesion

Components 0
Dependencies 0

Importance

Changes 0
Metric Value
dl 0
loc 230
rs 8.2608
c 0
b 0
f 0
wmc 40
lcom 0
cbo 0

2 Methods

Rating   Name   Duplication   Size   Complexity  
A __construct() 0 3 1
F custom_css() 0 213 39

How to fix   Complexity   

Complex Class

Complex classes like Kirki_Modules_Customizer_Styling often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes. You can also have a look at the cohesion graph to spot any un-connected, or weakly-connected components.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

While breaking up the class, it is a good idea to analyze how other classes use Kirki_Modules_Customizer_Styling, and based on these observations, apply Extract Interface, too.

1
<?php
2
/**
3
 * Changes the styling of the customizer
4
 * based on the settings set using the kirki/config filter.
5
 * For documentation please see
6
 * https://github.com/aristath/kirki/wiki/Styling-the-Customizer
7
 *
8
 * @package     Kirki
9
 * @category    Modules
10
 * @author      Aristeides Stathopoulos
11
 * @copyright   Copyright (c) 2017, Aristeides Stathopoulos
12
 * @license     http://opensource.org/licenses/https://opensource.org/licenses/MIT
13
 * @since       3.0.0
14
 */
15
16
// Exit if accessed directly.
17
if ( ! defined( 'ABSPATH' ) ) {
18
	exit;
19
}
20
21
/**
22
 * Adds styles to the customizer.
23
 */
24
class Kirki_Modules_Customizer_Styling {
25
26
	/**
27
	 * Constructor.
28
	 *
29
	 * @access public
30
	 */
31
	public function __construct() {
32
		add_action( 'customize_controls_print_styles', array( $this, 'custom_css' ), 99 );
33
	}
34
35
	/**
36
	 * Add custom CSS rules to the head, applying our custom styles.
37
	 *
38
	 * @access public
39
	 */
40
	public function custom_css() {
41
42
		$config = apply_filters( 'kirki/config', array() );
43
		?>
44
		<style>
45
		.wp-full-overlay-sidebar,
46
		#customize-controls .customize-info .accordion-section-title,
47
		#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
48
		#customize-theme-controls .accordion-section-title,
49
		.customize-section-title,
50
		#customize-theme-controls .control-section-themes .accordion-section-title,
51
		#customize-theme-controls .control-section-themes .accordion-section-title:hover {
52
			<?php if ( isset( $config['color_back'] ) ) : ?>
53
				background: <?php echo esc_attr( $config['color_back'] ); ?>;
54
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
55
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
56
				color: <?php echo esc_attr( $text_color ); ?>
57
			<?php endif; ?>
58
		}
59
60
		#customize-theme-controls .control-section-themes .accordion-section-title,
61
		#customize-theme-controls .control-section-themes .accordion-section-title:hover {
62
			<?php if ( isset( $config['color_back'] ) ) : ?>
63
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
64
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
65
				color: <?php echo esc_attr( $text_color ); ?>
66
			<?php endif; ?>
67
		}
68
69
		#customize-controls .control-section .accordion-section-title:focus,
70
		#customize-controls .control-section .accordion-section-title:hover,
71
		#customize-controls .control-section.open .accordion-section-title,
72
		#customize-controls .control-section:hover > .accordion-section-title,
73
		.customize-panel-back:focus,
74
		.customize-panel-back:hover,
75
		.customize-section-back:focus,
76
		.customize-section-back:hover {
77
			<?php if ( isset( $config['color_back'] ) ) : ?>
78
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
79
				<?php $hover_color = ( 90 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 3 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 3 )->toCSS( $color_obj->mode ); ?>
80
				background: <?php echo esc_attr( $hover_color ); ?>;
81
			<?php endif; ?>
82
			<?php if ( isset( $config['color_accent'] ) ) : ?>
83
				color: <?php echo esc_attr( $config['color_accent'] ); ?>;
84
				border-left-color: <?php echo esc_attr( $config['color_accent'] ); ?>;
85
			<?php endif; ?>
86
		}
87
88
		#customize-controls .customize-info,
89
		#customize-header-actions,
90
		.customize-section-title {
91
			<?php if ( isset( $config['color_back'] ) ) : ?>
92
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
93
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 4 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 4 )->toCSS( $color_obj->mode ); ?>
94
				border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
95
			<?php endif; ?>
96
		}
97
98
		.wp-full-overlay-sidebar .wp-full-overlay-header,
99
		.customize-controls-close,
100
		.expanded .wp-full-overlay-footer {
101
			<?php if ( isset( $config['color_back'] ) ) : ?>
102
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
103
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 15 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 15 )->toCSS( $color_obj->mode ); ?>
104
				<?php $bg_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 5 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 5 )->toCSS( $color_obj->mode ); ?>
105
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
106
				color: <?php echo esc_attr( $text_color ); ?>;
107
				background-color: <?php echo esc_attr( $bg_color ); ?>;
108
				border-color: <?php echo esc_attr( $border_color ); ?>;
109
			<?php endif; ?>
110
		}
111
112
		.customize-controls-close:hover {
113
			<?php if ( isset( $config['color_back'] ) ) : ?>
114
				background-color: <?php echo esc_attr( $config['color_back'] ); ?>;
115
			<?php endif; ?>
116
			<?php if ( isset( $config['color_accent'] ) ) : ?>
117
				color: <?php echo esc_attr( $config['color_accent'] ); ?>;
118
				border-color: <?php echo esc_attr( $config['color_accent'] ); ?>;
119
			<?php endif; ?>
120
		}
121
122
		#accordion-section-themes+.control-section,
123
		#customize-theme-controls .control-section:last-of-type.open,
124
		#customize-theme-controls .control-section:last-of-type > .accordion-section-title,
125
		#customize-theme-controls .control-section.open {
126
			<?php if ( isset( $config['color_back'] ) ) : ?>
127
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
128
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 4 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 4 )->toCSS( $color_obj->mode ); ?>
129
				border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
130
				border-top-color: <?php echo esc_attr( $border_color ); ?>;
131
			<?php endif; ?>
132
		}
133
134
		#customize-theme-controls .accordion-section-title {
135
			<?php if ( isset( $config['color_back'] ) ) : ?>
136
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
137
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 4 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 4 )->toCSS( $color_obj->mode ); ?>
138
				border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
139
			<?php endif; ?>
140
			border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
0 ignored issues
show
Bug introduced by
The variable $border_color does not seem to be defined for all execution paths leading up to this point.

If you define a variable conditionally, it can happen that it is not defined for all execution paths.

Let’s take a look at an example:

function myFunction($a) {
    switch ($a) {
        case 'foo':
            $x = 1;
            break;

        case 'bar':
            $x = 2;
            break;
    }

    // $x is potentially undefined here.
    echo $x;
}

In the above example, the variable $x is defined if you pass “foo” or “bar” as argument for $a. However, since the switch statement has no default case statement, if you pass any other value, the variable $x would be undefined.

Available Fixes

  1. Check for existence of the variable explicitly:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        if (isset($x)) { // Make sure it's always set.
            echo $x;
        }
    }
    
  2. Define a default value for the variable:

    function myFunction($a) {
        $x = ''; // Set a default which gets overridden for certain paths.
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        echo $x;
    }
    
  3. Add a value for the missing path:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
    
            // We add support for the missing case.
            default:
                $x = '';
                break;
        }
    
        echo $x;
    }
    
Loading history...
141
			border-left-color: <?php echo esc_attr( $border_color ); ?>;
142
		}
143
144
		#customize-theme-controls .control-section-themes .accordion-section-title,
145
		#customize-theme-controls .control-section-themes .accordion-section-title:hover {
146
			<?php if ( isset( $config['color_back'] ) ) : ?>
147
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
148
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 4 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 4 )->toCSS( $color_obj->mode ); ?>
149
				border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
150
			<?php endif; ?>
151
			border-top-color: <?php echo esc_attr( $border_color ); ?>;
152
			border-bottom-color: <?php echo esc_attr( $border_color ); ?>;
153
		}
154
155
		#customize-theme-controls .accordion-section-title:after {
156
			<?php if ( isset( $config['color_back'] ) ) : ?>
157
				<?php $color_obj = ariColor::newColor( $config['color_back'] ); ?>
158
				<?php $arrows_color = ( 50 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 30 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 30 )->toCSS( $color_obj->mode ); ?>
159
				color: <?php echo esc_attr( $arrows_color ); ?>;
160
			<?php endif; ?>
161
		}
162
163
		#customize-theme-controls .control-section .accordion-section-title:focus:after,
164
		#customize-theme-controls .control-section .accordion-section-title:hover:after,
165
		#customize-theme-controls .control-section.open .accordion-section-title:after,
166
		#customize-theme-controls .control-section:hover>.accordion-section-title:after {
167
			<?php if ( isset( $config['color_accent'] ) ) : ?>
168
				color: <?php echo esc_attr( $config['color_accent'] ); ?>;
169
			<?php endif; ?>
170
		}
171
172
		.wp-core-ui .button-primary {
173
			<?php if ( isset( $config['color_accent'] ) ) : ?>
174
				<?php $color_obj = ariColor::newColor( $config['color_accent'] ); ?>
175
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness -15 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 15 )->toCSS( $color_obj->mode ); ?>
176
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
177
				background-color: <?php echo esc_attr( $config['color_accent'] ); ?>;
178
				border-color: <?php echo esc_attr( $border_color ); ?>;
179
				box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?>;
180
				-webkit-box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?>;
181
				text-shadow: 0 -1px 1px <?php echo esc_attr( $border_color ); ?>, 1px 0 1px <?php echo esc_attr( $border_color ); ?>, 0 1px 1px <?php echo esc_attr( $border_color ); ?>, -1px 0 1px <?php echo esc_attr( $border_color ); ?>;
182
				color: <?php echo esc_attr( $text_color ); ?>;
183
			<?php endif; ?>
184
		}
185
186
		.wp-core-ui .button-primary.focus,
187
		.wp-core-ui .button-primary.hover,
188
		.wp-core-ui .button-primary:focus,
189
		.wp-core-ui .button-primary:hover {
190
			<?php if ( isset( $config['color_accent'] ) ) : ?>
191
				<?php $color_obj = ariColor::newColor( $config['color_accent'] ); ?>
192
				<?php $color_obj = ( 90 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 3 ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 3 ); ?>
193
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 15 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 15 )->toCSS( $color_obj->mode ); ?>
194
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
195
				background-color: <?php echo esc_attr( $color_obj->toCSS( $color_obj->mode ) ); ?>;
196
				border-color: <?php echo esc_attr( $border_color ); ?>;
197
				box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?>;
198
				-webkit-box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?>;
199
				text-shadow: 0 -1px 1px <?php echo esc_attr( $border_color ); ?>, 1px 0 1px <?php echo esc_attr( $border_color ); ?>, 0 1px 1px <?php echo esc_attr( $border_color ); ?>, -1px 0 1px <?php echo esc_attr( $border_color ); ?>;
200
				color: <?php echo esc_attr( $text_color ); ?>;
201
			<?php endif; ?>
202
		}
203
204
		.wp-core-ui .button-primary-disabled,
205
		.wp-core-ui .button-primary.disabled,
206
		.wp-core-ui .button-primary:disabled,
207
		.wp-core-ui .button-primary[disabled] {
208
			<?php if ( isset( $config['color_accent'] ) ) : ?>
209
				<?php $color_obj = ariColor::newColor( $config['color_accent'] ); ?>
210
				<?php $color_obj = ( 35 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness - 30 ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 30 ); ?>
211
				<?php $border_color = ( 50 < $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness -15 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness + 15 )->toCSS( $color_obj->mode ); ?>
212
				<?php $text_color = ( 60 > $color_obj->lightness ) ? $color_obj->getNew( 'lightness', $color_obj->lightness + 60 )->toCSS( $color_obj->mode ) : $color_obj->getNew( 'lightness', $color_obj->lightness - 60 )->toCSS( $color_obj->mode ); ?>
213
				background-color: <?php echo esc_attr( $color_obj->toCSS( $color_obj->mode ) ); ?> !important;
214
				border-color: <?php echo esc_attr( $border_color ); ?> !important;
215
				box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?> !important;
216
				-webkit-box-shadow: 0 1px 0 <?php echo esc_attr( $border_color ); ?> !important;
217
				text-shadow: 0 -1px 1px <?php echo esc_attr( $border_color ); ?>, 1px 0 1px <?php echo esc_attr( $border_color ); ?>, 0 1px 1px <?php echo esc_attr( $border_color ); ?>, -1px 0 1px <?php echo esc_attr( $border_color ); ?> !important;
218
				color: <?php echo esc_attr( $text_color ); ?> !important;
219
			<?php endif; ?>
220
		}
221
		<?php if ( isset( $config['color_back'] ) ) : ?>
222
			.wp-full-overlay-footer .devices {
223
				background: none;
224
				background: transparent;
225
				box-shadow: none;
226
				-webkit-box-shadow: none;
227
			}
228
		<?php endif; ?>
229
		<?php if ( isset( $config['width'] ) ) : ?>
230
			.wp-full-overlay-sidebar {
231
			  width: <?php echo esc_attr( $config['width'] ); ?>;
232
			}
233
			.expanded .wp-full-overlay-footer {
234
				<?php if ( false === strpos( $config['width'], 'calc' ) ) : ?>
235
					width: calc(<?php echo esc_attr( $config['width'] ); ?> - 1px);
236
				<?php else : ?>
237
					width: <?php echo esc_attr( $config['width'] ); ?>
238
				<?php endif; ?>
239
			}
240
241
			.wp-full-overlay.expanded {
242
				margin-left: <?php echo esc_attr( $config['width'] ); ?>;
243
			}
244
			.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
245
				margin-left: -<?php echo esc_attr( $config['width'] ); ?>;
246
			}
247
		<?php endif; ?>
248
249
		</style>
250
		<?php
251
252
	}
253
}
254