WordPress.org
Get WordPress

Plugin Directory

Changeset 3429998


Ignore:
Timestamp:
12/31/2025 09:03:23 AM (8 weeks ago)
Author:
techlogica
Message:

Fix accessibility panel grid overflow and responsive padding

Location:
adjust-accessibility/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • adjust-accessibility/trunk/adjust-accessibility.php

    r3426598 r3429998  
    1515}
    1616
    17 // Run activation to set up defaults.
    1817register_activation_hook( __FILE__, [ 'Adjst_Acsiblty', 'activate' ] );
    1918
    2019class Adjst_Acsiblty {
     20
     21    private static $rendered = false;
    2122
    2223    public function __construct() {
    … …  
    2425        add_action( 'wp_enqueue_scripts',      [ $this, 'adjst_acsiblty_enqueue_styles' ] );
    2526        add_action( 'wp_enqueue_scripts',      [ $this, 'adjst_acsiblty_enqueue_assets' ] );
     27
     28        // Render in footer (most themes) + body open (some builders/themes)
     29        add_action( 'wp_body_open',            [ $this, 'adjst_acsiblty_render_panel' ] );
    2630        add_action( 'wp_footer',               [ $this, 'adjst_acsiblty_render_panel' ] );
     31
    2732        add_action( 'admin_menu',              [ $this, 'add_admin_menu' ] );
    2833        add_action( 'admin_init',              [ $this, 'adjst_acsiblty_register_settings' ] );
    … …  
    3136    }
    3237
    33     /**
    34      * On plugin activation, ensure defaults.
    35      */
    3638    public static function activate() {
    3739        if ( get_option( 'adjst_acsiblty_primary_color' ) === false ) {
    3840            add_option( 'adjst_acsiblty_primary_color', '#0073aa' );
    3941        }
    40 
    4142        if ( get_option( 'adjst_acsiblty_enabled_features' ) === false ) {
    4243            add_option( 'adjst_acsiblty_enabled_features', [ 'brightness' ] );
    4344        }
    44     }
    45 
    46     /**
    47      * Load text domain for translations.
    48      */
     45        if ( get_option( 'adjst_acsiblty_settings' ) === false ) {
     46            add_option( 'adjst_acsiblty_settings', [ 'desktop_enabled' => 1, 'mobile_enabled' => 1 ] );
     47        }
     48    }
     49
    4950    public function load_textdomain() {
    5051        load_plugin_textdomain(
    … …  
    5556    }
    5657
    57     /**
    58      * Enqueue color picker assets on correct admin page.
    59      */
    6058    public function enqueue_color_picker_assets( $hook_suffix ) {
    6159        if ( $hook_suffix !== 'toplevel_page_adjst_acsiblty_settings' ) {
    6260            return;
    6361        }
    64 
    6562        wp_enqueue_style( 'wp-color-picker' );
    6663        wp_enqueue_script( 'wp-color-picker' );
    67 
    6864        wp_enqueue_script(
    6965            'adjst_acsiblty_color_picker_init',
    … …  
    7571    }
    7672
    77     /**
    78      * Enqueue admin CSS on every admin page.
    79      */
    8073    public function adjst_acsiblty_enqueue_admin_styles() {
    8174        wp_enqueue_style(
    … …  
    8780    }
    8881
    89     /**
    90      * Front-end main CSS (Tailwind compiled).
    91      */
    92 
    93 
    94     // public function adjst_acsiblty_enqueue_styles() {
    95     //     $css_file = plugin_dir_path( __FILE__ ) . 'assets/css/accessibility.tailwind.css';
    96 
    97     //     wp_enqueue_style(
    98     //         'adjst_acsiblty_front',
    99     //         plugin_dir_url( __FILE__ ) . 'assets/css/accessibility.tailwind.css',
    100     //         [],
    101     //         file_exists( $css_file ) ? filemtime( $css_file ) : '1.0.0'
    102     //     );
    103     // }
    104 
    105 
    10682    public function adjst_acsiblty_enqueue_styles() {
    107     $css_file = plugin_dir_path(__FILE__) . 'assets/css/accessibility.tailwind.css';
    108 
    109     wp_enqueue_style(
    110         'adjst_acsiblty_front',
    111         plugin_dir_url(__FILE__) . 'assets/css/accessibility.tailwind.css',
    112         [],
    113         filemtime( $css_file )
    114     );
    115 
    116     // ✅ INLINE CSS MUST BE HERE
    117     $primary = get_option( 'adjst_acsiblty_primary_color', '#0073aa' );
    118     wp_add_inline_style(
    119         'adjst_acsiblty_front',
    120         ":root { --aa-primary-color: " . esc_attr( $primary ) . "; }"
    121         );
    122     }
    123 
    124 
    125     /**
    126      * Front-end JS + Font Awesome + inline CSS vars.
    127      */
     83        $css_file = plugin_dir_path(__FILE__) . 'assets/css/accessibility.tailwind.css';
     84
     85        wp_enqueue_style(
     86            'adjst_acsiblty_front',
     87            plugin_dir_url(__FILE__) . 'assets/css/accessibility.tailwind.css',
     88            [],
     89            file_exists( $css_file ) ? filemtime( $css_file ) : '1.0.0'
     90        );
     91
     92        $primary = get_option( 'adjst_acsiblty_primary_color', '#0073aa' );
     93        wp_add_inline_style(
     94            'adjst_acsiblty_front',
     95            ":root { --aa-primary-color: " . esc_attr( $primary ) . "; }"
     96        );
     97    }
     98
    12899    public function adjst_acsiblty_enqueue_assets() {
    129         // Local Font Awesome CSS (no CDN).
    130100        wp_enqueue_style(
    131101            'adjst_acsiblty_fontawesome',
    … …  
    135105        );
    136106
    137         // Plugin JS.
    138107        wp_enqueue_script(
    139108            'adjst_acsiblty_script',
    … …  
    144113        );
    145114
    146         // Inject primary color as a CSS variable onto the main front stylesheet.
    147         $primary = get_option( 'adjst_acsiblty_primary_color', '#0073aa' );
    148 
    149         // wp_add_inline_style(
    150         //     'adjst_acsiblty_front',
    151         //     ':root { --aa-primary-color: ' . esc_attr( $primary ) . '; }'
    152         // );
    153 
    154         // Pass enabled features & device flags to JS; defaults if none saved.
    155115        $enabled = get_option( 'adjst_acsiblty_enabled_features', [ 'brightness' ] );
    156116        $opts    = get_option(
    157117            'adjst_acsiblty_settings',
    158             [
    159                 'desktop_enabled' => 1,
    160                 'mobile_enabled'  => 1,
    161             ]
     118            [ 'desktop_enabled' => 1, 'mobile_enabled' => 1 ]
    162119        );
    163120
    … …  
    173130    }
    174131
    175     /**
    176      * Render the front-end accessibility panel.
    177      */
    178132    public function adjst_acsiblty_render_panel() {
     133
     134        // Prevent double output (because we hook wp_body_open + wp_footer)
     135        if ( self::$rendered ) {
     136            return;
     137        }
     138        self::$rendered = true;
     139
    179140        $opts = get_option(
    180141            'adjst_acsiblty_settings',
    181             [
    182                 'desktop_enabled' => 1,
    183                 'mobile_enabled'  => 1,
    184             ]
    185         );
    186 
    187         // Device visibility checks.
    188         if ( wp_is_mobile() && empty( $opts['mobile_enabled'] ) ) {
    189             return;
    190         }
    191 
    192         if ( ! wp_is_mobile() && empty( $opts['desktop_enabled'] ) ) {
    193             return;
    194         }
    195 
    196         // Features to output; default to ['brightness'].
     142            [ 'desktop_enabled' => 1, 'mobile_enabled' => 1 ]
     143        );
     144
     145        if ( wp_is_mobile() && empty( $opts['mobile_enabled'] ) ) return;
     146        if ( ! wp_is_mobile() && empty( $opts['desktop_enabled'] ) ) return;
     147
    197148        $enabled = get_option( 'adjst_acsiblty_enabled_features', [ 'brightness' ] );
    198149
    … …  
    203154        <div class="aa-wrap">
    204155            <div id="aa-panel" class="aa-panel aa-pos-<?php echo esc_attr( $pos ); ?>">
    205                 <button id="aa-toggle" class="aa-toggle">
     156                <button id="aa-toggle" class="aa-toggle" type="button" aria-label="Accessibility">
    206157                    <img src="<?php echo esc_url( plugin_dir_url( __FILE__ ) . 'assets/img/accessibility.png' ); ?>" alt="">
    207158                </button>
    208159            </div>
     160
    209161            <div id="aa-panel-main" class="aa-panel-main aa-pos-<?php echo esc_attr( $pos ); ?>">
    210162                <div class="aa-header">
    … …  
    213165                    </div>
    214166                    <div class="aa-header-rt">
    215                         <button id="aa-clear" class="aa-clear" aria-label="<?php esc_attr_e( 'Clear', 'adjust-accessibility' ); ?>">&#8635;</button>
    216                         <button id="aa-close" class="aa-close" aria-label="<?php esc_attr_e( 'Close', 'adjust-accessibility' ); ?>">&#10799;</button>
     167                        <button id="aa-clear" class="aa-clear" type="button" aria-label="<?php esc_attr_e( 'Clear', 'adjust-accessibility' ); ?>">&#8635;</button>
     168                        <button id="aa-close" class="aa-close" type="button" aria-label="<?php esc_attr_e( 'Close', 'adjust-accessibility' ); ?>">&#10799;</button>
    217169                    </div>
    218170                </div>
     171
    219172                <div id="aa-controls" class="aa-controls">
    220173                    <?php if ( in_array( 'brightness', $enabled, true ) ) : ?>
    … …  
    224177                            <input type="range" id="aa-brightness" min="50" max="150" value="100">
    225178                        </label>
     179
    226180                        <label>
    227181                            <i class="fa-solid fa-droplet"></i>
    … …  
    229183                            <input type="range" id="aa-saturation" min="0" max="200" value="100">
    230184                        </label>
     185
    231186                        <label>
    232187                            <i class="fa-solid fa-sun"></i>
    … …  
    261216
    262217                    <?php if ( in_array( 'dark_light_mode', $enabled, true ) ) : ?>
    263                         <button id="aa-darkmode" class="aa-btn">
     218                        <button id="aa-darkmode" class="aa-btn" type="button">
    264219                            <i class="fa-solid fa-moon"></i>
    265220                            <?php esc_html_e( 'Dark Mode', 'adjust-accessibility' ); ?>
    266221                        </button>
    267                         <button id="aa-lightmode" class="aa-btn">
     222
     223                        <button id="aa-lightmode" class="aa-btn" type="button">
    268224                            <i class="fa-solid fa-sun"></i>
    269225                            <?php esc_html_e( 'Light Mode', 'adjust-accessibility' ); ?>
    … …  
    272228
    273229                    <?php if ( in_array( 'highlight_links', $enabled, true ) ) : ?>
    274                         <button id="aa-highlight-links" class="aa-btn">
     230                        <button id="aa-highlight-links" class="aa-btn" type="button">
    275231                            <i class="fa-solid fa-link"></i>
    276232                            <?php esc_html_e( 'Highlight Links', 'adjust-accessibility' ); ?>
    … …  
    279235
    280236                    <?php if ( in_array( 'highlight_titles', $enabled, true ) ) : ?>
    281                         <button id="aa-highlight-titles" class="aa-btn">
     237                        <button id="aa-highlight-titles" class="aa-btn" type="button">
    282238                            <i class="fa-solid fa-wand-magic-sparkles"></i>
    283239                            <?php esc_html_e( 'Highlight Titles', 'adjust-accessibility' ); ?>
    … …  
    290246    }
    291247
    292     /**
    293      * Add admin menu page.
    294      */
    295248    public function add_admin_menu() {
    296249        add_menu_page(
    … …  
    300253            'adjst_acsiblty_settings',
    301254            [ $this, 'settings_page' ],
    302             plugins_url( 'assets/img/wp-images.png', __FILE__ ),
     255            plugins_url( 'assets/img/wp-image.png', __FILE__ ), // (your zip has wp-image.png)
    303256            80
    304257        );
    305258    }
    306259
    307     /**
    308      * Register plugin settings and fields.
    309      */
    310260    public function adjst_acsiblty_register_settings() {
    311         // Device visibility.
    312261        register_setting(
    313262            'adjst_acsiblty_settings_group',
    … …  
    341290        );
    342291
    343         // Primary color picker.
    344292        register_setting(
    345293            'adjst_acsiblty_settings_group',
    346294            'adjst_acsiblty_primary_color',
    347             [
    348                 'sanitize_callback' => 'sanitize_hex_color',
    349                 'default'           => '#0073aa',
    350             ]
     295            [ 'sanitize_callback' => 'sanitize_hex_color', 'default' => '#0073aa' ]
    351296        );
    352297
    … …  
    369314        );
    370315
    371         // Feature toggles.
    372316        register_setting(
    373317            'adjst_acsiblty_settings_group',
    374318            'adjst_acsiblty_enabled_features',
    375             [
    376                 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_features' ],
    377                 'default'           => [ 'brightness' ],
    378             ]
     319            [ 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_features' ], 'default' => [ 'brightness' ] ]
    379320        );
    380321
    … …  
    388329        );
    389330
    390         // Panel position options.
    391331        register_setting(
    392332            'adjst_acsiblty_settings_group',
    393333            'adjst_acsiblty_panel_position',
    394             [
    395                 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_panel_position' ],
    396                 'default'           => 'bottom-right',
    397             ]
     334            [ 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_panel_position' ], 'default' => 'bottom-right' ]
    398335        );
    399336
    … …  
    410347            'adjst_acsiblty_settings_group',
    411348            'adjst_acsiblty_mobile_panel_position',
    412             [
    413                 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_panel_position' ],
    414                 'default'           => 'bottom-left',
    415             ]
     349            [ 'sanitize_callback' => [ $this, 'adjst_acsiblty_sanitize_panel_position' ], 'default' => 'bottom-left' ]
    416350        );
    417351
    … …  
    425359        );
    426360
    427         // Feature list.
    428361        $features = [
    429362            'brightness'       => 'Brightness / Saturation / Contrast',
    … …  
    448381    }
    449382
    450     /**
    451      * Color picker field callback.
    452      */
    453383    public function adjst_acsiblty_color_picker_field_cb( $args ) {
    454384        $color = get_option( 'adjst_acsiblty_primary_color', '#0073aa' );
    455 
    456385        printf(
    457386            '<input type="text" id="%1$s" name="adjst_acsiblty_primary_color" value="%2$s" class="wp-color-picker-field" data-default-color="#0073aa" />',
    … …  
    461390    }
    462391
    463     /**
    464      * Sanitize settings for device visibility.
    465      */
    466392    public function adjst_acsiblty_sanitize_settings( $input ) {
    467393        return [
    … …  
    471397    }
    472398
    473     /**
    474      * Sanitize panel position.
    475      */
    476399    public function adjst_acsiblty_sanitize_panel_position( $input ) {
    477400        $allowed = [ 'center-right', 'center-left', 'bottom-right', 'bottom-left' ];
    … …  
    479402    }
    480403
    481     /**
    482      * Checkbox field for device visibility.
    483      */
    484404    public function field_checkbox_cb( $args ) {
    485         $opts    = get_option(
    486             'adjst_acsiblty_settings',
    487             [
    488                 'desktop_enabled' => 1,
    489                 'mobile_enabled'  => 1,
    490             ]
    491         );
    492         $id      = $args['label_for'];
     405        $opts = get_option( 'adjst_acsiblty_settings', [ 'desktop_enabled' => 1, 'mobile_enabled' => 1 ] );
     406        $id = $args['label_for'];
    493407        $checked = ! empty( $opts[ $id ] ) ? 'checked' : '';
    494 
    495408        printf(
    496409            '<input type="checkbox" id="%1$s" name="adjst_acsiblty_settings[%1$s]" value="1" %2$s />',
    … …  
    500413    }
    501414
    502     /**
    503      * Sanitize enabled features.
    504      */
    505415    public function adjst_acsiblty_sanitize_features( $input ) {
    506         $allowed = [
    507             'brightness',
    508             'font_size',
    509             'line_height',
    510             'letter_spacing',
    511             'dark_light_mode',
    512             'highlight_links',
    513             'highlight_titles',
    514         ];
    515 
     416        $allowed = [ 'brightness','font_size','line_height','letter_spacing','dark_light_mode','highlight_links','highlight_titles' ];
    516417        $vals = array_intersect( $allowed, (array) $input );
    517 
    518         if ( empty( $vals ) ) {
    519             $vals = [ 'brightness' ];
    520         }
    521 
     418        if ( empty( $vals ) ) $vals = [ 'brightness' ];
    522419        return array_values( $vals );
    523420    }
    524421
    525     /**
    526      * Feature checkbox callbacks.
    527      */
    528422    public function feature_checkbox_cb( $args ) {
    529         $opts    = get_option( 'adjst_acsiblty_enabled_features', [ 'brightness' ] );
    530         $key     = $args['feature_key'];
    531         $id      = 'adjst_acsiblty_feat_' . $key;
     423        $opts = get_option( 'adjst_acsiblty_enabled_features', [ 'brightness' ] );
     424        $key = $args['feature_key'];
     425        $id = 'adjst_acsiblty_feat_' . $key;
    532426        $checked = in_array( $key, $opts, true ) ? 'checked="checked"' : '';
    533 
    534427        printf(
    535428            '<input type="checkbox" id="%1$s" name="adjst_acsiblty_enabled_features[]" value="%2$s" %3$s />',
    … …  
    540433    }
    541434
    542     /**
    543      * Panel position select field (desktop & mobile).
    544      */
    545435    public function adjst_acsiblty_panel_position_field_cb( $args ) {
    546436        $option_key = $args['label_for'];
    547         $current    = get_option( $option_key, 'bottom-right' );
     437        $current = get_option( $option_key, 'bottom-right' );
    548438
    549439        $options = [
    … …  
    554444        ];
    555445
    556         printf(
    557             '<select id="%1$s" name="%1$s">',
    558             esc_attr( $option_key )
    559         );
    560 
     446        printf( '<select id="%1$s" name="%1$s">', esc_attr( $option_key ) );
    561447        foreach ( $options as $value => $label ) {
    562448            printf(
    … …  
    567453            );
    568454        }
    569 
    570455        echo '</select>';
    571456    }
    572457
    573     /**
    574      * Settings page output.
    575      */
    576458    public function settings_page() {
    577459        ?>

  • adjust-accessibility/trunk/assets/css/accessibility.tailwind.css

    r3426200 r3429998  
    240240    transform: none !important;
    241241}
     242
     243
     244
     245
     246
     247
     248/* =========================================
     249   REQUIRED: PANEL POSITION CLASSES
     250   (Your PHP uses aa-pos-*, but CSS had none)
     251   ========================================= */
     252.aa-panel.aa-pos-bottom-right { right: 20px; bottom: 20px; }
     253.aa-panel.aa-pos-bottom-left  { left: 20px;  bottom: 20px; }
     254.aa-panel.aa-pos-center-right { right: 20px; top: 50%; transform: translateY(-50%); }
     255.aa-panel.aa-pos-center-left  { left: 20px;  top: 50%; transform: translateY(-50%); }
     256
     257/* main panel appears above icon in bottom positions */
     258.aa-panel-main.aa-pos-bottom-right { right: 20px; bottom: 85px; }
     259.aa-panel-main.aa-pos-bottom-left  { left: 20px;  bottom: 85px; }
     260.aa-panel-main.aa-pos-center-right { right: 20px; top: 50%; transform: translateY(-50%); }
     261.aa-panel-main.aa-pos-center-left  { left: 20px;  top: 50%; transform: translateY(-50%); }
     262
     263
     264
     265
     266/* ===============================
     267   2 COLUMN GRID FOR CONTROLS
     268   =============================== */
     269
     270#aa-controls{
     271    display: grid !important;
     272    grid-template-columns: repeat(2, 1fr);
     273    gap: 8px;
     274}
     275
     276/* Make labels & buttons consistent */
     277#aa-controls label,
     278#aa-controls .aa-btn{
     279    width: 100% !important;
     280    margin: 0 !important;
     281    box-sizing: border-box;
     282}
     283
     284/* Sliders inside labels */
     285#aa-controls label input[type=range]{
     286    margin-top: 6px;
     287}
     288
     289/* Full width header row spacing fix */
     290.aa-header{
     291    margin-bottom: 6px;
     292}
     293
     294
     295
     296.aa-btn.active{
     297    background: var(--aa-primary-color) !important;
     298    color: #fff !important;
     299    border-color: var(--aa-primary-color) !important;
     300}
     301
     302
     303
     304
     305/* =====================================
     306   FIX RIGHT-SIDE OVERFLOW & RESPONSIVE
     307   ===================================== */
     308
     309/* Ensure box sizing everywhere */
     310.aa-wrap,
     311.aa-wrap * {
     312    box-sizing: border-box;
     313}
     314
     315/* Main panel padding fix */
     316#aa-panel-main {
     317    padding: 0 !important;
     318    max-width: 95vw;
     319}
     320
     321/* Controls grid spacing */
     322#aa-controls {
     323    display: grid !important;
     324    grid-template-columns: repeat(2, 1fr);
     325    gap: 10px;
     326    padding: 10px;
     327}
     328
     329/* Label & button boxes */
     330#aa-controls label,
     331#aa-controls .aa-btn {
     332    width: 100% !important;
     333    padding: 10px !important;
     334    margin: 0 !important;
     335    overflow: hidden;
     336}
     337
     338/* Slider width fix */
     339#aa-controls input[type="range"] {
     340    width: 100% !important;
     341    max-width: 100%;
     342}
     343
     344/* Icons + text alignment */
     345#aa-controls label i,
     346.aa-controls .aa-btn i {
     347    display: block;
     348    margin-bottom: 4px;
     349}
     350
     351/* Header padding alignment */
     352.aa-header {
     353    padding: 10px 12px !important;
     354}
     355
     356/* Buttons (dark/light/highlight) height consistency */
     357.aa-btn {
     358    min-height: 64px;
     359    display: flex;
     360    flex-direction: column;
     361    align-items: center;
     362    justify-content: center;
     363}
     364
     365/* =========================
     366   MOBILE RESPONSIVE FIX
     367   ========================= */
     368@media (max-width: 480px) {
     369
     370    #aa-panel-main {
     371        width: 94vw !important;
     372        right: 3vw !important;
     373        left: auto !important;
     374    }
     375
     376    #aa-controls {
     377        gap: 8px;
     378        padding: 8px;
     379    }
     380
     381    .aa-controls label,
     382    .aa-controls .aa-btn {
     383        padding: 8px !important;
     384        font-size: 13px !important;
     385    }
     386}

  • adjust-accessibility/trunk/assets/js/accessibility.js

    r3425784 r3429998  
    11(function($){
    2  $(document).ready(function(){
    3      
    4     if ( /iP(hone|od|ad)/.test(navigator.userAgent) ) {
    5         $('html').addClass('aa-ios');
     2  $(document).ready(function(){
     3
     4    if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
     5      $('html').addClass('aa-ios');
    66    }
    7  
    8     var $body          = $('body'),
    9         $texts         = $('h1,h2,h3,h4,h5,h6,p,li,span,a,button,label'),
    10         $sliderFS      = $('#aa-font-size'),
    11         $displayFS     = $('#aa-font-size-value'),
    12         $sliderLH      = $('#aa-line-height'),
    13         $displayLH     = $('#aa-line-height-value'),
    14         $letterSlider  = $('#aa-letter-spacing'),
    15         $letterValue   = $('#aa-letter-spacing-value');
    16        
    17         $texts.each(function(){
    18           var $el = $(this);
    19           $el.data('aaOriginalFontSize',       parseFloat($el.css('font-size')));
    20         //   $el.data('aaOriginalLineHeight',     parseFloat($el.css('line-height')));
    21           $el.data('aaOriginalLetterSpacing',  parseFloat($el.css('letter-spacing')) || 0 );
    22         });
    237
    24          // 1) Cache the *computed* line-height in px for each element
    25         $texts.each(function(){
    26           var compLH = window.getComputedStyle(this).lineHeight; // e.g. "19.2px"
    27           $(this).data('aaOriginalLineHeight', parseFloat(compLH));
    28         });
     8    // ✅ IMPORTANT: exclude plugin UI from resizing
     9    var $texts = $('h1,h2,h3,h4,h5,h6,p,li,span,a,button,label')
     10      .not('.aa-wrap, .aa-wrap *');
    2911
     12    var $sliderFS     = $('#aa-font-size');
     13    var $sliderLH     = $('#aa-line-height');
     14    var $letterSlider = $('#aa-letter-spacing');
    3015
    31         $('#aa-toggle').on('click', function(){
    32             $('#aa-panel-main').toggle();
    33         });
    34         // Close panel
    35         $('#aa-close').on('click', function(){
    36             $('#aa-panel-main').hide();
    37         });
     16    // Cache originals
     17    $texts.each(function(){
     18      var $el = $(this);
     19      $el.data('aaOriginalFontSize', parseFloat($el.css('font-size')) || 16);
     20      $el.data('aaOriginalLetterSpacing', parseFloat($el.css('letter-spacing')) || 0);
    3821
    39         function applyFilters() {
    40             var b = $('#aa-brightness').val();
    41             var s = $('#aa-saturation').val();
    42             var p = $('#aa-contrast').val();
    43             $('html').css('filter', 'brightness('+ b +'%) saturate('+ s +'%) contrast('+ p +'%)');
    44         }
    45         $('#aa-brightness, #aa-saturation, #aa-contrast').on('input', applyFilters);
     22      var lh = window.getComputedStyle(this).lineHeight;
     23      $el.data('aaOriginalLineHeight', parseFloat(lh) || 16);
     24    });
    4625
    47         // Dark mode toggle
    48         $('#aa-darkmode').on('click', function(){
    49           $('body, div, span')
    50           .not('#aa-panel-main, #aa-panel, .aa-wrap, .aa-wrap *, #aa-panel-main *')
    51             .toggleClass('aa-darkmode')
    52             .removeClass('aa-lightmode');
    53           $(this).toggleClass('active');
    54           $('#aa-lightmode').removeClass('active');
    55         });
    56        
    57         // Light mode toggle
    58         $('#aa-lightmode').on('click', function(){
    59           $('body, div, span')
    60           .not('#aa-panel-main, #aa-panel, .aa-wrap, .aa-wrap *, #aa-panel-main *')
    61             .toggleClass('aa-lightmode')
    62             .removeClass('aa-darkmode');
    63           $(this).toggleClass('active');
    64           $('#aa-darkmode').removeClass('active');
    65         });
     26    $('#aa-toggle').on('click', function(){
     27      $('#aa-panel-main').toggle();
     28    });
    6629
    67         $('#aa-highlight-links').on('click', function(){
    68             $('a, button').toggleClass('aa-highlight-link');
    69             $(this).toggleClass('active');
    70         });
     30    $('#aa-close').on('click', function(){
     31      $('#aa-panel-main').hide();
     32    });
    7133
    72         $('#aa-highlight-titles').on('click', function(){
    73             $('h1, h2, h3, h4, h5, h6').toggleClass('aa-highlight-title');
    74             $(this).toggleClass('active');
    75         });
     34    function applyFilters() {
     35      var b = $('#aa-brightness').val();
     36      var s = $('#aa-saturation').val();
     37      var c = $('#aa-contrast').val();
     38      $('html').css('filter', 'brightness('+ b +'%) saturate('+ s +'%) contrast('+ c +'%)');
     39    }
     40    $('#aa-brightness, #aa-saturation, #aa-contrast').on('input', applyFilters);
    7641
    77     // Font-size slider
     42    // Dark / Light
     43    // $('#aa-darkmode').on('click', function(){
     44    //   $('body').addClass('aa-darkmode').removeClass('aa-lightmode');
     45    //   $(this).addClass('active');
     46    //   $('#aa-lightmode').removeClass('active');
     47    // });
     48
     49    $('#aa-darkmode').on('click', function(){
     50
     51  if ($('body').hasClass('aa-darkmode')) {
     52    // turn OFF
     53    $('body').removeClass('aa-darkmode');
     54    $(this).removeClass('active');
     55  } else {
     56    // turn ON
     57    $('body').addClass('aa-darkmode').removeClass('aa-lightmode');
     58    $(this).addClass('active');
     59    $('#aa-lightmode').removeClass('active');
     60  }
     61});
     62    //light
     63    // $('#aa-lightmode').on('click', function(){
     64    //   $('body').addClass('aa-lightmode').removeClass('aa-darkmode');
     65    //   $(this).addClass('active');
     66    //   $('#aa-darkmode').removeClass('active');
     67    // });
     68
     69    $('#aa-lightmode').on('click', function(){
     70
     71  if ($('body').hasClass('aa-lightmode')) {
     72    // turn OFF
     73    $('body').removeClass('aa-lightmode');
     74    $(this).removeClass('active');
     75  } else {
     76    // turn ON
     77    $('body').addClass('aa-lightmode').removeClass('aa-darkmode');
     78    $(this).addClass('active');
     79    $('#aa-darkmode').removeClass('active');
     80  }
     81});
     82
     83    $('#aa-highlight-links').on('click', function(){
     84      $('a, button').toggleClass('aa-highlight-link');
     85      $(this).toggleClass('active');
     86    });
     87
     88    $('#aa-highlight-titles').on('click', function(){
     89      $('h1, h2, h3, h4, h5, h6').toggleClass('aa-highlight-title');
     90      $(this).toggleClass('active');
     91    });
     92
     93    // Font size
    7894    $sliderFS.on('input change', function(){
    7995      var pct = +this.value;
    80       $displayFS.text(pct + '%');
    8196      $texts.each(function(){
    8297        var orig = $(this).data('aaOriginalFontSize');
    83         if (orig) $(this).css('font-size', orig * pct/100 + 'px');
     98        $(this).css('font-size', (orig * pct/100) + 'px');
    8499      });
    85100    });
    86101
    87     // Line-height slider
     102    // Line height
    88103    $sliderLH.on('input change', function(){
    89       var pct = +this.value;                   // 50–200
    90       $displayLH.text(pct + '%');
    91 
     104      var pct = +this.value;
    92105      $texts.each(function(){
    93106        var origLH = $(this).data('aaOriginalLineHeight');
    94         if (!isNaN(origLH)) {
    95           $(this).css('line-height', (origLH * pct/100) + 'px');
    96         }
     107        $(this).css('line-height', (origLH * pct/100) + 'px');
    97108      });
    98109    });
    99    
    100     // Letter-spacing slider
     110
     111    // Letter spacing
    101112    $letterSlider.on('input change', function(){
    102113      var extra = +this.value;
    103       $letterValue.text(extra + 'px');
    104114      $texts.each(function(){
    105115        var origLS = $(this).data('aaOriginalLetterSpacing');
    … …  
    108118    });
    109119
    110     // Clear button (resets *all* controls)
    111         $('#aa-clear').on('click', function(){
    112           // 1) reset filters
    113           $('#aa-brightness, #aa-saturation, #aa-contrast').val(100).trigger('input');
    114        
    115           // 2) reset font-size
    116           $sliderFS.val(100).trigger('input');
    117        
    118           // 3) reset line-height
    119             // $sliderLH.val(100);
    120             //   $displayLH.text('100%');
    121             //   $texts.each(function(){
    122             //     var origLH = $(this).data('aaOriginalLineHeight');
    123             //     if (!isNaN(origLH)) {
    124             //       $(this).css('line-height', origLH + 'px');
    125             //     }
    126             //   });
    127             $sliderLH.val(100).trigger('input');
    128        
    129           // 4) reset letter-spacing slider *and* all elements
    130           $letterSlider.val(0).trigger('input');      // fires your slider handler
    131           $letterValue.text('0px');                   // update the label
    132           $texts.each(function(){
    133             var origLS = $(this).data('aaOriginalLetterSpacing') || 0;
    134             $(this).css('letter-spacing', origLS + 'px');
    135           });
    136        
    137           // 5) reset dark/light modes & highlights
    138           $('body, div, span').removeClass('aa-darkmode aa-lightmode');
    139           $('.aa-btn').removeClass('active');
    140           $('a').removeClass('aa-highlight-link');
    141           $('h1, h2, h3, h4, h5, h6').removeClass('aa-highlight-title');
    142         });
    143            
    144                
    145     // input type range style
     120    // Clear
     121    $('#aa-clear').on('click', function(){
     122      $('#aa-brightness, #aa-saturation, #aa-contrast').val(100).trigger('input');
     123      $sliderFS.val(100).trigger('input');
     124      $sliderLH.val(100).trigger('input');
     125      $letterSlider.val(0).trigger('input');
     126
     127      $('html').css('filter', '');
     128      $('body').removeClass('aa-darkmode aa-lightmode');
     129      $('.aa-btn').removeClass('active');
     130      $('a,button').removeClass('aa-highlight-link');
     131      $('h1,h2,h3,h4,h5,h6').removeClass('aa-highlight-title');
     132    });
     133
     134    // Range background fill
    146135    $('input[type=range]').on('input', function(e){
    147       var min = e.target.min,
    148           max = e.target.max,
    149           val = e.target.value;
    150      
    151       $(e.target).css({
    152         'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
    153       });
     136      var min = e.target.min, max = e.target.max, val = e.target.value;
     137      $(e.target).css({ 'backgroundSize': (val - min) * 100 / (max - min) + '% 100%' });
    154138    }).trigger('input');
    155139
    156140  });
    157141})(jQuery);
    158 
    159 
    160 

  • adjust-accessibility/trunk/readme.txt

    r3426598 r3429998  
    44Requires at least: 4.5
    55Tested up to: 6.9
    6 Stable tag: 1.0.4
     6Stable tag: 1.0.5
    77License: GPLv2 or later
    88License URI: https://www.gnu.org/licenses/gpl-2.0.html
Note: See TracChangeset for help on using the changeset viewer.