File: /var/www/wp-content/plugins/pojo-accessibility/modules/legacy/components/customizer.php
<?php
namespace EA11y\Modules\Legacy\Components;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/**
* Class Customizer
*/
class Customizer {
private $css_rules = [];
private $css_code = '';
public function get_customizer_fields() {
$fields = [];
$fields[] = [
'id' => 'a11y_toolbar_icon',
'title' => __( 'Toolbar Icon', 'pojo-accessibility' ),
'type' => 'select',
'choices' => [
'one-click' => __( 'One Click', 'pojo-accessibility' ),
'wheelchair' => __( 'Wheelchair', 'pojo-accessibility' ),
'accessibility' => __( 'Accessibility', 'pojo-accessibility' ),
],
'std' => 'one-click',
'description' => __( 'Set Toolbar Icon', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_toolbar_position',
'title' => __( 'Toolbar Position', 'pojo-accessibility' ),
'type' => 'select',
'choices' => [
'left' => __( 'Left', 'pojo-accessibility' ),
'right' => __( 'Right', 'pojo-accessibility' ),
],
'std' => is_rtl() ? 'right' : 'left',
'description' => __( 'Set Toolbar Position', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_toolbar_distance_top',
'title' => __( 'Offset from Top (Desktop)', 'pojo-accessibility' ),
'type' => 'text',
'std' => '100px',
'description' => __( 'Set Toolbar top offset (Desktop)', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_toolbar_distance_top_mobile',
'title' => __( 'Offset from Top (Mobile)', 'pojo-accessibility' ),
'type' => 'text',
'std' => '50px',
'description' => __( 'Set Toolbar top offset (Mobile)', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_bg_toolbar',
'title' => __( 'Toolbar Background', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#ffffff',
'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay',
'change_type' => 'bg_color',
'description' => __( 'Set Toolbar background color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_color_toolbar',
'title' => __( 'Toolbar Color', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#333333',
'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title',
'change_type' => 'color',
'description' => __( 'Set Toolbar text color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_toggle_button_bg_color',
'title' => __( 'Toggle Button Background', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#4054b2',
'description' => __( 'Set Toolbar toggle button background color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_toggle_button_color',
'title' => __( 'Toggle Button Color', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#ffffff',
'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a',
'change_type' => 'color',
'description' => __( 'Set Toolbar toggle button icon color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_bg_active',
'title' => __( 'Active Background', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#4054b2',
'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
'change_type' => 'bg_color',
'description' => __( 'Set Toolbar active background color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_color_active',
'title' => __( 'Active Color', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#ffffff',
'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
'change_type' => 'color',
'description' => __( 'Set Toolbar active text color', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_focus_outline_style',
'title' => __( 'Focus Outline Style', 'pojo-accessibility' ),
'type' => 'select',
'choices' => [
'solid' => __( 'Solid', 'pojo-accessibility' ),
'dotted' => __( 'Dotted', 'pojo-accessibility' ),
'dashed' => __( 'Dashed', 'pojo-accessibility' ),
'double' => __( 'Double', 'pojo-accessibility' ),
'groove' => __( 'Groove', 'pojo-accessibility' ),
'ridge' => __( 'Ridge', 'pojo-accessibility' ),
'outset' => __( 'Outset', 'pojo-accessibility' ),
'initial' => __( 'Initial', 'pojo-accessibility' ),
],
'std' => 'solid',
'description' => __( 'Set Focus outline style', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_focus_outline_width',
'title' => __( 'Focus Outline Width', 'pojo-accessibility' ),
'type' => 'select',
'choices' => [
'1px' => '1px',
'2px' => '2px',
'3px' => '3px',
'4px' => '4px',
'5px' => '5px',
'6px' => '6px',
'7px' => '7px',
'8px' => '8px',
'9px' => '9px',
'10px' => '10px',
],
'std' => '1px',
'description' => __( 'Set Focus outline width', 'pojo-accessibility' ),
];
$fields[] = [
'id' => 'a11y_focus_outline_color',
'title' => __( 'Focus Outline Color', 'pojo-accessibility' ),
'type' => 'color',
'std' => '#FF0000',
'description' => __( 'Set Focus outline color', 'pojo-accessibility' ),
];
return $fields;
}
public function customize_a11y( $wp_customize ) {
$fields = $this->get_customizer_fields();
$section_description = '<p>' . __( 'Use the control below to customize the appearance and layout of the Accessibility Toolbar', 'pojo-accessibility' ) . '</p><p>' .
sprintf( __( 'Additional Toolbar settings can be configured at the %s page.', 'pojo-accessibility' ),
'<a href="' . admin_url( 'admin.php?page=accessibility-toolbar' ) . '" target="blank">' . __( 'Accessibility Toolbar', 'pojo-accessibility' ) . '</a>'
) . '</p>' . apply_filters( 'pojo_a11y_customizer_section_description', '' );
$wp_customize->add_section( 'accessibility', [
'title' => __( 'Accessibility', 'pojo-accessibility' ),
'priority' => 30,
'description' => $section_description,
] );
foreach ( $fields as $field ) {
$customizer_id = POJO_A11Y_CUSTOMIZER_OPTIONS . '[' . $field['id'] . ']';
$wp_customize->add_setting( $customizer_id, [
'default' => $field['std'] ? $field['std'] : null,
'type' => 'option',
] );
switch ( $field['type'] ) {
case 'color':
$wp_customize->add_control( new \WP_Customize_Color_Control( $wp_customize, $field['id'], [
'label' => $field['title'],
'section' => 'accessibility',
'settings' => $customizer_id,
'description' => isset( $field['description'] ) ? $field['description'] : null,
] ) );
break;
case 'select':
case 'text':
$wp_customize->add_control( $field['id'], [
'label' => $field['title'],
'section' => 'accessibility',
'settings' => $customizer_id,
'type' => $field['type'],
'choices' => isset( $field['choices'] ) ? $field['choices'] : null,
'description' => isset( $field['description'] ) ? $field['description'] : null,
] );
break;
}
}
}
public function get_custom_css_code() {
$options = $this->get_customizer_options();
$bg_color = $options['a11y_toggle_button_bg_color']; // get_theme_mod( 'a11y_toggle_button_bg_color', '#4054b2' );
if ( ! empty( $bg_color ) ) {
$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a', 'background-color', $bg_color );
$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links',
'border-color', $bg_color );
}
$outline_style = $options['a11y_focus_outline_style']; //get_theme_mod( 'a11y_focus_outline_style', 'solid' );
if ( ! empty( $outline_style ) ) {
$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-style', $outline_style . ' !important' );
}
$outline_width = $options['a11y_focus_outline_width']; // get_theme_mod( 'a11y_focus_outline_width', '1px' );
if ( ! empty( $outline_width ) ) {
$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-width', $outline_width . ' !important' );
}
$outline_color = $options['a11y_focus_outline_color']; //get_theme_mod( 'a11y_focus_outline_color', '#FF0000' );
if ( ! empty( $outline_color ) ) {
$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-color', $outline_color . ' !important' );
}
$distance_top = $options['a11y_toolbar_distance_top']; //get_theme_mod( 'a11y_toolbar_distance_top', '100px' );
if ( ! empty( $distance_top ) ) {
$this->add_css_rule( '#pojo-a11y-toolbar', 'top', $distance_top . ' !important' );
}
$distance_top_mobile = $options['a11y_toolbar_distance_top_mobile']; // get_theme_mod( 'a11y_toolbar_distance_top_mobile', '50px' );
if ( ! empty( $distance_top_mobile ) ) {
$this->add_css_code( "@media (max-width: 767px) { #pojo-a11y-toolbar { top: {$distance_top_mobile} !important; } }" );
}
$fields = $this->get_customizer_fields();
foreach ( $fields as $field ) {
if ( empty( $field['selector'] ) || empty( $field['change_type'] ) ) {
continue;
}
$option = $options[ $field['id'] ];
if ( 'color' === $field['change_type'] ) {
$this->add_css_rule( $field['selector'], 'color', $option );
} elseif ( 'bg_color' === $field['change_type'] ) {
$this->add_css_rule( $field['selector'], 'background-color', $option );
}
}
}
private function get_customizer_options() {
static $options = false;
if ( false === $options ) {
$options = get_option( POJO_A11Y_CUSTOMIZER_OPTIONS );
}
return $options;
}
private function add_css_rule( $selector, $rule, $value ) {
if ( ! isset( $this->css_rules[ $selector ] ) ) {
$this->css_rules[ $selector ] = [];
}
$this->css_rules[ $selector ][] = $rule . ': ' . $value . ';';
}
private function add_css_code( $code ) {
$this->css_code .= "\n" . $code;
}
public function print_css_code() {
$this->get_custom_css_code();
$css = '';
foreach ( $this->css_rules as $selector => $css_rules ) {
$css .= "\n" . $selector . '{ ' . implode( "\t", $css_rules ) . '}';
}
echo '<style type="text/css">' . $css . $this->css_code . '</style>';
}
public function __construct() {
add_filter( 'customize_register', [ $this, 'customize_a11y' ], 610 );
add_filter( 'wp_head', [ $this, 'print_css_code' ] );
}
}