mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-21 04:22:21 +08:00
6b093b85b0
* Added `Notice_Base` and `Notices` component to core module
* Always load core module and load all other modules based on legacy status
* added filter in customizer settings
* added bubble / pimple in admin menu to indicate upgrade
* added `Dismissible_Deprecated_Nag` notice to none legacy pages
* added `Dismissible_Deprecated_Nag` notice to legacy pages
* Added `Upgrade` component to legacy module
includes:
* loading of notices
* introduction modal
* admin menu pimple
* customizer notice
* pointer
* confirmation modal
* upgrade logic and handler
* ✅ Fixed legacy module test
* added `local:quick-run` command to run in browser mode
* update phpunit workflow
* ensure wp.ajax is loaded
* wrong translations
* Updated strings
* added "Equally"
* remove unused test
295 lines
11 KiB
PHP
295 lines
11 KiB
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' ] );
|
|
}
|
|
}
|
