Added color picker to the settings page

and and added that you can set the titles for the buttons to!
This commit is contained in:
2025-06-29 23:33:54 -07:00
parent 7cac0343ba
commit ee36079405
3 changed files with 95 additions and 66 deletions

View File

@ -0,0 +1,3 @@
jQuery(document).ready(function ($) {
$('.wp-color-picker').wpColorPicker();
});

1
assets/js/cw-color-picker.min.js vendored Normal file
View File

@ -0,0 +1 @@
jQuery(document).ready(function(o){o(".wp-color-picker").wpColorPicker()});

View File

@ -2,7 +2,7 @@
/**
* Plugin Name: Better Content Warning
* Description: Blocks access to content behind a content warning popup with optional trigger warnings.
* Version: 1.0
* Version: 1.1
* Author: Sophia Atkinson
* Author URI: https://sophia.wtf
* Text Domain: better-content-warning
@ -70,10 +70,11 @@ add_filter(
$warnings = trim(get_post_meta($post_id, '_cw_warnings', true));
$prefix = get_option('cw_prefix', 'Content Warning');
$default = get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.');
$button = get_option('cw_button_text', 'Continue');
$cookie_duration = 180;
$continue_button = get_option('cw_button_text', 'Continue');
$exit_button = get_option('cw_exit_button_text', 'Exit');
$exit_button_title = esc_attr(get_option('cw_exit_button_title', 'No shame in exiting <3'));
$continue_button_title = esc_attr(get_option('cw_continue_button_title', 'Lets get this party started /s'));
$cookie_duration = 180;
$header = esc_html($prefix);
$warning = $warnings ? esc_html($warnings) : esc_html($default);
@ -83,9 +84,9 @@ add_filter(
<div class="cw-box">
<p><strong><?php echo $header; ?></strong></p>
<p><?php echo $warning; ?></p>
<button title="Lets get this party started /s" id="cw-continue"><?php echo esc_html($button); ?></button>
<button title="<?php echo esc_html($continue_button_title); ?>" id="cw-continue"><?php echo esc_html($continue_button); ?></button>
<br>
<button title="No shame in exiting <3" id="cw-exit" aria-label="<?php echo esc_attr($exit_button); ?>"><?php echo esc_html($exit_button); ?></button>
<button title="<?php echo esc_html($exit_button_title); ?>" id="cw-exit" aria-label="<?php echo esc_attr($exit_button); ?>"><?php echo esc_html($exit_button); ?></button>
</div>
</div>
<script>
@ -187,14 +188,21 @@ add_action(
register_setting('cw_settings_group', 'cw_prefix');
register_setting('cw_settings_group', 'cw_default_message');
register_setting('cw_settings_group', 'cw_button_text');
register_setting('cw_settings_group', 'cw_bg_color');
register_setting('cw_settings_group', 'cw_exit_button_text');
register_setting('cw_settings_group', 'cw_font_size');
register_setting('cw_settings_group', 'cw_button_color');
register_setting('cw_settings_group', 'cw_bg_color');
register_setting('cw_settings_group', 'cw_overlay_bg_color');
register_setting('cw_settings_group', 'cw_button_color');
register_setting('cw_settings_group', 'cw_button_hover_color');
register_setting('cw_settings_group', 'cw_show_to_admins');
register_setting('cw_settings_group', 'cw_exit_button_text');
}
register_setting('cw_settings_group', 'cw_continue_button_title');
register_setting('cw_settings_group', 'cw_exit_button_title');
});
add_action('admin_enqueue_scripts', function ($hook) {
if ($hook !== 'settings_page_cw-settings') return;
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('cw-color-picker-init', plugin_dir_url(__FILE__) . 'assets/js/' . 'cw-color-picker.js', ['wp-color-picker'], null, true);
}
);
// Settings page output
@ -202,60 +210,77 @@ function cw_settings_page()
{
?>
<div class="wrap">
<h1>Content Warning Settings</h1>
<h1><?php esc_html_e('Content Warning Settings', 'better-content-warning'); ?></h1>
<form method="post" action="options.php">
<?php settings_fields('cw_settings_group'); do_settings_sections('cw_settings_group'); ?>
<br>
<legend><strong><?php esc_html_e('Main Options', 'better-content-warning'); ?></strong></legend>
<table class="form-table">
<tr>
<th><label for="cw_show_to_admins">Show Popup to Admins</label></th>
<th scope="row"><label for="cw_show_to_admins"><?php esc_html_e('Show Popup to Admins', 'better-content-warning'); ?></label></th>
<td>
<input name="cw_show_to_admins" type="checkbox" id="cw_show_to_admins" value="1" <?php checked(get_option('cw_show_to_admins'), '1'); ?>>
<label for="cw_show_to_admins">Enable content warnings for administrator accounts</label>
<label for="cw_show_to_admins"><?php esc_html_e('Enable content warnings for administrator accounts', 'better-content-warning'); ?></label>
</td>
</tr>
<tr>
<th><label for="cw_prefix">Warning Prefix</label></th>
<th scope="row"><label for="cw_prefix"><?php esc_html_e('Warning Prefix', 'better-content-warning'); ?></label></th>
<td><input name="cw_prefix" type="text" id="cw_prefix" value="<?php echo esc_attr(get_option('cw_prefix', 'Content Warning:')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_default_message">Default Warning Message</label></th>
<th scope="row"><label for="cw_default_message"><?php esc_html_e('Default Warning Message', 'better-content-warning'); ?></label></th>
<td><input name="cw_default_message" type="text" id="cw_default_message" value="<?php echo esc_attr(get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_button_text">Continue Button Text</label></th>
<th scope="row"><label for="cw_button_text"><?php esc_html_e('Continue Button Text', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_text" type="text" id="cw_button_text" value="<?php echo esc_attr(get_option('cw_button_text', 'Continue')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_exit_button_text">Exit Button Text</label></th>
<th scope="row"><label for="cw_exit_button_text"><?php esc_html_e('Exit Button Text', 'better-content-warning'); ?></label></th>
<td><input name="cw_exit_button_text" type="text" id="cw_exit_button_text" value="<?php echo esc_attr(get_option('cw_exit_button_text', 'Exit')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_bg_color">Popup Background Color</label></th>
<td><input name="cw_bg_color" type="text" id="cw_bg_color" value="<?php echo esc_attr(get_option('cw_bg_color', '#1E1F22')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_overlay_bg_color">Overlay Background Color</label></th>
<td><input name="cw_overlay_bg_color" type="text" id="cw_overlay_bg_color" value="<?php echo esc_attr(get_option('cw_overlay_bg_color', '#2E3035')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_font_size">Font Size</label></th>
<th scope="row"><label for="cw_font_size"><?php esc_html_e('Font Size', 'better-content-warning'); ?></label></th>
<td><input name="cw_font_size" type="text" id="cw_font_size" value="<?php echo esc_attr(get_option('cw_font_size', '1.1em')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_button_color">Button Color</label></th>
<td><input name="cw_button_color" type="text" id="cw_button_color" value="<?php echo esc_attr(get_option('cw_button_color', '#e67c73')); ?>" class="regular-text"></td>
<th scope="row"><label for="cw_bg_color"><?php esc_html_e('Popup Background Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_bg_color" type="text" id="cw_bg_color" value="<?php echo esc_attr(get_option('cw_bg_color', '#1E1F22')); ?>" class="regular-text wp-color-picker"></td>
</tr>
<tr>
<th><label for="cw_button_hover_color">Button Hover Color</label></th>
<td><input name="cw_button_hover_color" type="text" id="cw_button_hover_color" value="<?php echo esc_attr(get_option('cw_button_hover_color', '#8179d5')); ?>" class="regular-text"></td>
<th scope="row"><label for="cw_overlay_bg_color"><?php esc_html_e('Overlay Background Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_overlay_bg_color" type="text" id="cw_overlay_bg_color" value="<?php echo esc_attr(get_option('cw_overlay_bg_color', '#2E3035')); ?>" class="regular-text wp-color-picker"></td>
</tr>
<tr>
<th scope="row"><label for="cw_button_color"><?php esc_html_e('Button Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_color" type="text" id="cw_button_color" value="<?php echo esc_attr(get_option('cw_button_color', '#9E93DC')); ?>" class="regular-text wp-color-picker"></td>
</tr>
<tr>
<th scope="row"><label for="cw_button_hover_color"><?php esc_html_e('Button Hover Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_hover_color" type="text" id="cw_button_hover_color" value="<?php echo esc_attr(get_option('cw_button_hover_color', '#8179d5')); ?>" class="regular-text wp-color-picker"></td>
</tr>
</table>
<?php submit_button(); ?>
<fieldset style="margin-top: 2em;">
<legend><strong><?php esc_html_e('Extra Options', 'better-content-warning'); ?></strong></legend>
<table class="form-table">
<tr>
<th scope="row"><label for="cw_continue_button_title"><?php esc_html_e('Continue Button Title', 'better-content-warning'); ?></label></th>
<td><input name="cw_continue_button_title" type="text" id="cw_continue_button_title" value="<?php echo esc_attr(get_option('cw_continue_button_title', 'Lets get this party started /s')); ?>" class="regular-text"></td>
</tr>
<tr>
<th scope="row"><label for="cw_exit_button_title"><?php esc_html_e('Exit Button Title', 'better-content-warning'); ?></label></th>
<td><input name="cw_exit_button_title" type="text" id="cw_exit_button_title" value="<?php echo esc_attr(get_option('cw_exit_button_title', 'No shame in exiting <3')); ?>" class="regular-text"></td>
</tr>
</table>
</fieldset>
<?php submit_button(__('Save Changes', 'better-content-warning')); ?>
</form>
</div>
</div>
<div style="margin-top:2em; color:#666;">
<p>If you like this plugin, please consider supporting my work on <a href="https://liberapay.com/sophiaxd" target="_blank">Liberapay</a> or <a href="https://ko-fi.com/sophiaatkinson" target="_blank">Ko-fi</a>.</p>
<div>
<p><?php echo wp_kses_post(__('If you like this plugin, please consider supporting my work on <a href="https://liberapay.com/sophiaxd" target="_blank">Liberapay</a> or <a href="https://ko-fi.com/sophiaatkinson" target="_blank">Ko-fi</a>.', 'better-content-warning')); ?></p>
</div>
<?php
}