Feature Request - Add hide_class (hide-if-js)

[wordpressvn]

I propose the following additional feature, which has been tested and works well.

In the file vendor\jeffreyvanrossum\wp-settings\src\Options\OptionAbstract.php, add the code at line 89:

public function get_hide_class_attribute()
{
    $class = $this->get_css()['hide_class'] ?? null;

    return !empty($class) ? $this->section->tab->settings->option_name . esc_attr($class) . ' hide-if-js' : null;
}

Replace all tags in vendor\jeffreyvanrossum\wp-settings\resources\views\options:

<tr valign="top" class="<?php echo $option->get_hide_class_attribute(); ?>">

In the file vendor\jeffreyvanrossum\wp-settings\src\WPSettings.php, add the following code:

add_action('admin_footer', [$this, 'scripting'], 20);
public function scripting()
{
?><script>
    (function($){
        $('[class^="<?php echo $this->option_name; ?>"]').each(function(){
            var classList = this.className.split(" "),
                parentId = classList.find(function(cls) { return cls.startsWith("<?php echo $this->option_name; ?>"); }),
                parent = $('#' + parentId),
                children = $(this);
            parent.on('change', function(){
                children.toggleClass('hide-if-js', !this.checked);
            });
            children.toggleClass('hide-if-js', !parent.is(':checked'));
        });
    })(jQuery);
</script>
<?php
}

Thanks

[wordpressvn]

$section->add_option('checkbox', [
            'name' => 'okcheck',
            'label' => __('Checkbox', 'textdomain')
        ]);
        $section->add_option('text', [
            'name' => 'text',
            'label' => __('Hidden Text', 'textdomain'),
            'css' => [ 
            'input_class' => 'regular-text code', 
            'hide_class' => 'okcheck',
            ]
        ]);

[wordpressvn]

Add Password same Text field

<tr valign="top" class="<?php echo $option->get_hide_class_attribute(); ?>">
    <th scope="row" class="titledesc">
        <label for="<?php echo $option->get_id_attribute(); ?>" class="<?php echo $option->get_label_class_attribute(); ?>"><?php echo $option->get_label(); ?></label>
    </th>
    <td class="forminp forminp-text">
        <input name="<?php echo esc_attr($option->get_name_attribute()); ?>" id="<?php echo $option->get_id_attribute(); ?>" type="password" value="<?php echo $option->get_value_attribute(); ?>" class="<?php echo $option->get_input_class_attribute(); ?>">

        <?php if($description = $option->get_arg('description')) { ?>
            <p class="description"><?php echo $description; ?></p>
        <?php } ?>

        <?php if($error = $option->has_error()) { ?>
            <div class="wps-error-feedback"><?php echo $error; ?></div>
        <?php } ?>
    </td>
</tr>

[jeffreyvr]

Hi @wordpressvn, thanks for the suggestions! I need to think a little about if and how I'm going to implement this feature of hiding fields. Will certainly look at your implementation for inspiration.

Password field makes a lot of sense and will be added.