| 1 |
<?php |
| 2 |
|
| 3 |
/** |
| 4 |
* Class Pix_Customize_Preset_Control |
| 5 |
* A simple Select2 Control |
| 6 |
*/ |
| 7 |
class Pix_Customize_Preset_Control extends Pix_Customize_Control { |
| 8 |
public $type = 'preset'; |
| 9 |
public $choices_type = 'select'; |
| 10 |
public $description = null; |
| 11 |
|
| 12 |
/** |
| 13 |
* Render the control's content. |
| 14 |
* |
| 15 |
* @since 3.4.0 |
| 16 |
*/ |
| 17 |
public function render_content() { |
| 18 |
|
| 19 |
switch ( $this->choices_type ) { |
| 20 |
|
| 21 |
case 'select' : { ?> |
| 22 |
<label> |
| 23 |
<?php if ( ! empty( $this->label ) ) { ?> |
| 24 |
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> |
| 25 |
<?php } |
| 26 |
if ( ! empty( $this->description ) ) { ?> |
| 27 |
<span class="description customize-control-description"><?php echo $this->description; ?></span> |
| 28 |
<?php } ?> |
| 29 |
|
| 30 |
<select <?php $this->link(); ?> class="customify_preset select"> |
| 31 |
<?php |
| 32 |
foreach ( $this->choices as $choice_value => $choice_config ){ |
| 33 |
if ( ! isset( $choice_config['options']) || ! isset( $choice_config['label'] ) ) { |
| 34 |
continue; |
| 35 |
} |
| 36 |
$label = $choice_config['label']; |
| 37 |
$options = $this->convertChoiceOptionsIdsToSettingIds( $choice_config['options'] ); |
| 38 |
$data = ' data-options=\'' . json_encode($options) . '\''; |
| 39 |
echo '<option value="' . esc_attr( $choice_value ) . '" ' . selected( $this->value(), $choice_value, false ) . $data . ' >' . $label . '</option>'; |
| 40 |
} ?> |
| 41 |
</select> |
| 42 |
</label> |
| 43 |
<?php break; |
| 44 |
} |
| 45 |
|
| 46 |
case 'radio' : { ?> |
| 47 |
<label> |
| 48 |
<?php if ( ! empty( $this->label ) ) { ?> |
| 49 |
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> |
| 50 |
<?php } |
| 51 |
if ( ! empty( $this->description ) ) { ?> |
| 52 |
<span class="description customize-control-description"><?php echo $this->description; ?></span> |
| 53 |
<?php } ?> |
| 54 |
|
| 55 |
<div class="customify_preset radio customize-control customize-control-radio"> |
| 56 |
<?php |
| 57 |
foreach ( $this->choices as $choice_value => $choice_config ){ |
| 58 |
if ( ! isset( $choice_config['options']) || ! isset( $choice_config['label'] ) ) { |
| 59 |
continue; |
| 60 |
} |
| 61 |
$color = ''; |
| 62 |
if ( isset( $choice_config['color'] ) ) { |
| 63 |
$color .= ' style="background-color: ' . $choice_config['color'] . '"'; |
| 64 |
} |
| 65 |
|
| 66 |
$label = $choice_config['label']; |
| 67 |
$options = $this->convertChoiceOptionsIdsToSettingIds( $choice_config['options'] ); |
| 68 |
$data = ' data-options=\'' . json_encode( $options ) . '\''; ?> |
| 69 |
|
| 70 |
<span class="customize-inside-control-row"> |
| 71 |
<input <?php $this->link(); echo 'name="' . $this->setting->id . '" id="' . esc_attr( $choice_value ) . '" type="radio" value="' . esc_attr( $choice_value ) . '" ' . selected( $this->value(), $choice_value, false ) . $data . $color .' />'; ?> |
| 72 |
<label for="<?php echo esc_attr( $choice_value ); ?>"> |
| 73 |
<?php echo $label; ?> |
| 74 |
</label> |
| 75 |
</span> |
| 76 |
<?php } ?> |
| 77 |
</div> |
| 78 |
</label> |
| 79 |
<?php break; |
| 80 |
} |
| 81 |
|
| 82 |
case 'buttons' : { ?> |
| 83 |
<label> |
| 84 |
<?php if ( ! empty( $this->label ) ) { ?> |
| 85 |
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> |
| 86 |
<?php } |
| 87 |
if ( ! empty( $this->description ) ) { ?> |
| 88 |
<span class="description customize-control-description"><?php echo $this->description; ?></span> |
| 89 |
<?php } ?> |
| 90 |
|
| 91 |
<div class="customify_preset radio_buttons"> |
| 92 |
<?php |
| 93 |
foreach ( $this->choices as $choice_value => $choice_config ){ |
| 94 |
if ( ! isset( $choice_config['options']) || ! isset( $choice_config['label'] ) ) { |
| 95 |
continue; |
| 96 |
} |
| 97 |
$color = ''; |
| 98 |
if ( isset( $choice_config['color'] ) ) { |
| 99 |
$color .= ' style="border-left-color: ' . $choice_config['color'] . '; color: ' . $choice_config['color'] . ';"'; |
| 100 |
} |
| 101 |
|
| 102 |
$label = $choice_config['label']; |
| 103 |
$options = $this->convertChoiceOptionsIdsToSettingIds( $choice_config['options'] ); |
| 104 |
$data = ' data-options=\'' . json_encode($options) . '\'';?> |
| 105 |
|
| 106 |
<fieldset class="customify_radio_button"> |
| 107 |
<input <?php $this->link(); echo 'name="' . $this->setting->id . '" type="radio" value="' . esc_attr( $choice_value ) . '" ' . selected( $this->value(), $choice_value, false ) . $data .' />'; ?> |
| 108 |
<label class="button" for="<?php echo $this->setting->id; ?>" <?php echo $color; ?>> |
| 109 |
<?php echo $label; ?> |
| 110 |
</label> |
| 111 |
</fieldset> |
| 112 |
<?php } ?> |
| 113 |
</div> |
| 114 |
</label> |
| 115 |
<?php break; |
| 116 |
} |
| 117 |
|
| 118 |
case 'color_palette' : { ?> |
| 119 |
<label> |
| 120 |
<?php if ( ! empty( $this->label ) ) { ?> |
| 121 |
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> |
| 122 |
<?php } |
| 123 |
|
| 124 |
if ( ! empty( $this->description ) ) { ?> |
| 125 |
<span class="description customize-control-description"><?php echo $this->description; ?></span> |
| 126 |
<?php } ?> |
| 127 |
|
| 128 |
<div class="customify_preset color_palette customize-control customize-control-radio"> |
| 129 |
<?php |
| 130 |
foreach ( $this->choices as $choice_value => $choice_config ){ |
| 131 |
if ( empty( $choice_config['options'] ) ) { |
| 132 |
continue; |
| 133 |
} |
| 134 |
|
| 135 |
// Make sure that the defaults are in place |
| 136 |
$choice_config = wp_parse_args( $choice_config, array( |
| 137 |
'label' => '', |
| 138 |
'preview' => array(), |
| 139 |
) ); |
| 140 |
|
| 141 |
// Make sure that the preview defaults are in place |
| 142 |
$choice_config['preview'] = wp_parse_args( $choice_config['preview'], array( |
| 143 |
'sample_letter' => 'A', |
| 144 |
'background_image_url' => plugins_url( 'images/color_palette_image.jpg', PixCustomifyPlugin()->file ), |
| 145 |
) ); |
| 146 |
|
| 147 |
// Determine a (primary) color with fallback for missing options |
| 148 |
$sm_color = '#777777'; |
| 149 |
if ( isset( $choice_config['options']['sm_color_primary'] ) ) { |
| 150 |
$sm_color = $choice_config['options']['sm_color_primary']; |
| 151 |
} elseif ( isset( $choice_config['options']['sm_color_secondary'] ) ) { |
| 152 |
$sm_color = $choice_config['options']['sm_color_secondary']; |
| 153 |
} elseif ( isset( $choice_config['options']['sm_color_tertiary'] ) ) { |
| 154 |
$sm_color = $choice_config['options']['sm_color_tertiary']; |
| 155 |
} elseif ( isset( $choice_config['options']['sm_color_quaternary'] ) ) { |
| 156 |
$sm_color = $choice_config['options']['sm_color_quaternary']; |
| 157 |
} elseif ( isset( $choice_config['options']['sm_color_quinary'] ) ) { |
| 158 |
$sm_color = $choice_config['options']['sm_color_quinary']; |
| 159 |
} |
| 160 |
|
| 161 |
// Determine a (primary) dark color with fallback for missing options |
| 162 |
$sm_dark = '#000000'; |
| 163 |
if ( isset( $choice_config['options']['sm_dark_primary'] ) ) { |
| 164 |
$sm_dark = $choice_config['options']['sm_dark_primary']; |
| 165 |
} elseif ( isset( $choice_config['options']['sm_dark_secondary'] ) ) { |
| 166 |
$sm_dark = $choice_config['options']['sm_dark_secondary']; |
| 167 |
} elseif ( isset( $choice_config['options']['sm_dark_tertiary'] ) ) { |
| 168 |
$sm_dark = $choice_config['options']['sm_dark_tertiary']; |
| 169 |
} elseif ( isset( $choice_config['options']['sm_dark_quaternary'] ) ) { |
| 170 |
$sm_dark = $choice_config['options']['sm_dark_quaternary']; |
| 171 |
} elseif ( isset( $choice_config['options']['sm_dark_quinary'] ) ) { |
| 172 |
$sm_dark = $choice_config['options']['sm_dark_quinary']; |
| 173 |
} |
| 174 |
|
| 175 |
// Determine a (primary) light color with fallback for missing options |
| 176 |
$sm_light = '#FFFFFF'; |
| 177 |
if ( isset( $choice_config['options']['sm_light_primary'] ) ) { |
| 178 |
$sm_light = $choice_config['options']['sm_light_primary']; |
| 179 |
} elseif ( isset( $choice_config['options']['sm_light_secondary'] ) ) { |
| 180 |
$sm_light = $choice_config['options']['sm_light_secondary']; |
| 181 |
} elseif ( isset( $choice_config['options']['sm_light_tertiary'] ) ) { |
| 182 |
$sm_light = $choice_config['options']['sm_light_tertiary']; |
| 183 |
} elseif ( isset( $choice_config['options']['sm_light_quaternary'] ) ) { |
| 184 |
$sm_light = $choice_config['options']['sm_light_quaternary']; |
| 185 |
} elseif ( isset( $choice_config['options']['sm_light_quinary'] ) ) { |
| 186 |
$sm_light = $choice_config['options']['sm_light_quinary']; |
| 187 |
} |
| 188 |
|
| 189 |
$label = $choice_config['label']; |
| 190 |
$options = $this->convertChoiceOptionsIdsToSettingIds( $choice_config['options'] ); |
| 191 |
$data = ' data-options=\'' . json_encode( $options ) . '\''; ?> |
| 192 |
|
| 193 |
<span class="customize-inside-control-row <?php echo ( (string) $this->value() === (string) $choice_value ? 'current-color-palette' : '' );?>" style="background-image: url( <?php echo esc_url( $choice_config['preview']['background_image_url'] ); ?> );"> |
| 194 |
<input <?php $this->link(); echo 'name="' . $this->setting->id . '" id="' . esc_attr( $choice_value ) . '" type="radio" value="' . esc_attr( $choice_value ) . '" ' . selected( $this->value(), $choice_value, false ) . $data .' />'; ?> |
| 195 |
<label for="<?php echo esc_attr( $choice_value ); ?>"> |
| 196 |
<span class="label__inner" style="color: <?php echo esc_attr( $this->lightOrDark( $sm_light ) ); ?>; background: <?php echo esc_attr( $sm_light ); ?>;"><span class="preview__letter" style="background: <?php echo $sm_color; ?>"><?php echo $choice_config['preview']['sample_letter']; ?></span><?php echo esc_html( $label ); ?></span> |
| 197 |
</label> |
| 198 |
<div class="palette"> |
| 199 |
<?php foreach ( $choice_config['options'] as $color_name => $color_value ) { |
| 200 |
echo '<div class="palette__item ' . esc_attr( $color_name ) . '" style="background: ' . esc_attr( $color_value ) . '"></div>' . PHP_EOL; |
| 201 |
} ?> |
| 202 |
</div> |
| 203 |
</span> |
| 204 |
<?php } ?> |
| 205 |
</div> |
| 206 |
</label> |
| 207 |
|
| 208 |
<?php break; |
| 209 |
} |
| 210 |
|
| 211 |
case 'awesome' : { ?> |
| 212 |
<label> |
| 213 |
<?php if ( ! empty( $this->label ) ) { ?> |
| 214 |
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> |
| 215 |
<?php } ?> |
| 216 |
|
| 217 |
<div class="customify_preset awesome_presets"> |
| 218 |
<?php |
| 219 |
|
| 220 |
$google_links = array(); |
| 221 |
|
| 222 |
foreach ( $this->choices as $choice_value => $choice_config ){ |
| 223 |
if ( ! isset( $choice_config['options']) || ! isset( $choice_config['label'] ) ) { |
| 224 |
continue; |
| 225 |
} |
| 226 |
|
| 227 |
$preset_style = ' style="background-color: #444;'; |
| 228 |
$preset_name_style = ' style=" color: #000; background-color: #ccc; border-color: #aaa;'; |
| 229 |
$preset_text_color = ' style=" color: #ebebeb'; |
| 230 |
|
| 231 |
$first_font = $second_font = ''; |
| 232 |
if ( isset( $choice_config['preview'] ) ) { |
| 233 |
|
| 234 |
if ( isset( $choice_config['preview']['background-card'] ) ) { |
| 235 |
$preset_style = ' style="'; |
| 236 |
$preset_style .= 'background-color: ' . $choice_config['preview']['background-card'] . ';'; |
| 237 |
} |
| 238 |
|
| 239 |
if ( isset( $choice_config['preview']['background-label'] ) ) { |
| 240 |
|
| 241 |
$this_preset_color = $choice_config['preview']['background-label']; |
| 242 |
|
| 243 |
if ( $this->isLight( $this_preset_color ) ) { |
| 244 |
$this_preset_color = '#000000'; |
| 245 |
} else { |
| 246 |
$this_preset_color = '#ffffff'; |
| 247 |
} |
| 248 |
$preset_name_style = ' style="'; |
| 249 |
$preset_name_style .= 'color: ' .$this_preset_color . ';background-color: ' . $choice_config['preview']['background-label'] . '; border-color: ' . $choice_config['preview']['background-label']; |
| 250 |
} |
| 251 |
|
| 252 |
if ( isset( $choice_config['preview']['color-text'] ) ) { |
| 253 |
$preset_text_color = ' style="'; |
| 254 |
$preset_text_color .= 'color: ' . $choice_config['preview']['color-text'] . ';"'; |
| 255 |
} |
| 256 |
|
| 257 |
if ( isset( $choice_config['preview']['font-main'] ) ) { |
| 258 |
$first_font = ' style="font-family: ' . $choice_config['preview']['font-main'] . '"' ; |
| 259 |
$google_links[] = str_replace( ' ', '+', $choice_config['preview']['font-main'] ); |
| 260 |
} |
| 261 |
|
| 262 |
if ( isset( $choice_config['preview']['font-alt'] ) ) { |
| 263 |
$second_font = ' style="font-family: ' . $choice_config['preview']['font-alt'] . '"' ; |
| 264 |
$google_links[] = str_replace( ' ', '+', $choice_config['preview']['font-alt'] ); |
| 265 |
} |
| 266 |
} |
| 267 |
|
| 268 |
$preset_style .= '"'; |
| 269 |
$preset_text_color .= '"'; |
| 270 |
$preset_name_style .= '"'; |
| 271 |
|
| 272 |
$label = $choice_config['label']; |
| 273 |
$options = $this->convertChoiceOptionsIdsToSettingIds( $choice_config['options'] ); |
| 274 |
$data = ' data-options=\'' . json_encode($options) . '\'';?> |
| 275 |
<div class="awesome_preset" <?php echo $preset_text_color; ?>> |
| 276 |
<input <?php $this->link(); echo 'name="' . $this->setting->id . '" type="radio" value="' . esc_attr( $choice_value ) . '" ' . selected( $this->value(), $choice_value, false ) . $data .' >' . '</input>'; ?> |
| 277 |
<div class="preset-wrap"> |
| 278 |
<div class="preset-color" <?php echo $preset_style; ?>> |
| 279 |
<span class="first-font" <?php echo $first_font; ?>><?php echo substr( get_bloginfo('name'), 0, 2); ?></span> |
| 280 |
<span class="secondary-font" <?php echo $second_font; ?>>AaBbCc</span> |
| 281 |
</div> |
| 282 |
<div class="preset-name" <?php echo $preset_name_style; ?>> |
| 283 |
<?php echo $label; ?> |
| 284 |
</div> |
| 285 |
</div> |
| 286 |
</div> |
| 287 |
<?php } |
| 288 |
|
| 289 |
// ok now we have our preview fonts, let's ask them from google |
| 290 |
// note that we request only these chars "AaBbCc" so it should be a small request |
| 291 |
echo '<link href="//fonts.googleapis.com/css?family=' . implode('|', $google_links ) . '&text=AaBbCc' . substr( get_bloginfo('name'), 0, 2) . '" rel=\'stylesheet\' type=\'text/css\'>';?> |
| 292 |
</div> |
| 293 |
|
| 294 |
<?php |
| 295 |
if ( ! empty( $this->description ) ) { ?> |
| 296 |
<span class="description customize-control-description"><?php echo $this->description; ?></span> |
| 297 |
<?php } ?> |
| 298 |
</label> |
| 299 |
<?php break; |
| 300 |
} |
| 301 |
|
| 302 |
default: |
| 303 |
break; |
| 304 |
} |
| 305 |
} |
| 306 |
|
| 307 |
/** |
| 308 |
* Returns whether or not given color is considered "light" |
| 309 |
* @param string|Boolean $color |
| 310 |
* @return boolean |
| 311 |
*/ |
| 312 |
public function isLight( $color = FALSE ){ |
| 313 |
// Get our color |
| 314 |
$color = ($color) ? $color : $this->_hex; |
| 315 |
// Calculate straight from rbg |
| 316 |
$r = hexdec($color[0].$color[1]); |
| 317 |
$g = hexdec($color[2].$color[3]); |
| 318 |
$b = hexdec($color[4].$color[5]); |
| 319 |
return (( $r*299 + $g*587 + $b*114 )/1000 > 130); |
| 320 |
} |
| 321 |
|
| 322 |
/** |
| 323 |
* Detect if we should use a light or dark color on a background color. |
| 324 |
* |
| 325 |
* Taken from WooCommerce: woocommerce/includes/wc-formatting-functions.php |
| 326 |
* @link http://woocommerce.wp-a2z.org/oik_api/wc_light_or_dark/ |
| 327 |
* |
| 328 |
* @param mixed $color Color. |
| 329 |
* @param string $dark Darkest reference. |
| 330 |
* Defaults to '#000000'. |
| 331 |
* @param string $light Lightest reference. |
| 332 |
* Defaults to '#FFFFFF'. |
| 333 |
* @return string |
| 334 |
*/ |
| 335 |
function lightOrDark( $color, $dark = '#000000', $light = '#FFFFFF' ) { |
| 336 |
|
| 337 |
$hex = str_replace( '#', '', $color ); |
| 338 |
|
| 339 |
$c_r = hexdec( substr( $hex, 0, 2 ) ); |
| 340 |
$c_g = hexdec( substr( $hex, 2, 2 ) ); |
| 341 |
$c_b = hexdec( substr( $hex, 4, 2 ) ); |
| 342 |
|
| 343 |
$brightness = ( ( $c_r * 299 ) + ( $c_g * 587 ) + ( $c_b * 114 ) ) / 1000; |
| 344 |
|
| 345 |
return $brightness > 180 ? $dark : $light; |
| 346 |
} |
| 347 |
|
| 348 |
/** |
| 349 |
* We will receive the choice options IDs as defined in the Customify config (the options array keys) and we will convert them to actual setting IDs. |
| 350 |
* |
| 351 |
* @param array $options |
| 352 |
* |
| 353 |
* @return array |
| 354 |
*/ |
| 355 |
protected function convertChoiceOptionsIdsToSettingIds( $options ) { |
| 356 |
$settings = array(); |
| 357 |
|
| 358 |
if ( empty( $options ) ) { |
| 359 |
return $settings; |
| 360 |
} |
| 361 |
|
| 362 |
$localPlugin = PixCustomifyPlugin(); |
| 363 |
$customizer_config = $localPlugin->get_customizer_config(); |
| 364 |
|
| 365 |
// first check the very needed options name |
| 366 |
if ( empty( $customizer_config['opt-name'] ) ) { |
| 367 |
return $settings; |
| 368 |
} |
| 369 |
$options_name = $customizer_config['opt-name']; |
| 370 |
|
| 371 |
// Coerce a single string into an array and treat it as a field ID. |
| 372 |
if ( is_string( $options ) ) { |
| 373 |
$options = array( $options ); |
| 374 |
} |
| 375 |
|
| 376 |
foreach ( $options as $option_id => $option_value ) { |
| 377 |
$option_config = $localPlugin->get_option_customizer_config( $option_id ); |
| 378 |
if ( empty( $option_config ) ) { |
| 379 |
continue; |
| 380 |
} |
| 381 |
|
| 382 |
// If we have been explicitly given a setting ID we will use that |
| 383 |
if ( ! empty( $option_config['setting_id'] ) ) { |
| 384 |
$setting_id = $option_config['setting_id']; |
| 385 |
} else { |
| 386 |
$setting_id = $options_name . '[' . $option_id . ']'; |
| 387 |
} |
| 388 |
|
| 389 |
$settings[ $setting_id ] = $option_value; |
| 390 |
} |
| 391 |
|
| 392 |
return $settings; |
| 393 |
} |
| 394 |
} |
| 395 |
|
