Skip to content

Commit 4929bd5

Browse files
RomaixnRomaixn
authored
feat: add progress color settings configuration (#138)
Fix Custom loader color #3
1 parent c732ec2 commit 4929bd5

File tree

3 files changed

+221
-0
lines changed

3 files changed

+221
-0
lines changed

‎assets/main.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
11
import * as Turbo from "@hotwired/turbo"
2+
3+
document.addEventListener("turbo:load", () => {
4+
if (window.turboDriveOptions && window.turboDriveOptions.progressBarColor) {
5+
let style = document.getElementById("turbo-progress-style");
6+
if (!style) {
7+
style = document.createElement("style");
8+
style.id = "turbo-progress-style";
9+
document.head.appendChild(style);
10+
}
11+
12+
style.textContent = `.turbo-progress-bar { background-color: ${window.turboDriveOptions.progressBarColor} !important; }`;
13+
}
14+
});

‎includes/class-turbo-drive-settings.php

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<?php
2+
/**
3+
* Class Turbo_Drive_Settings
4+
*
5+
* Manages the settings page for Turbo Drive in WordPress admin
6+
*
7+
* @package Turbo_Drive
8+
*/
9+
10+
// Exit if accessed directly.
11+
if (! defined('ABSPATH')) {
12+
exit;
13+
}
14+
15+
class Turbo_Drive_Settings
16+
{
17+
/**
18+
* Instance of the class
19+
*
20+
* @var Turbo_Drive_Settings
21+
*/
22+
private static $instance = null;
23+
24+
/**
25+
* Option name in the database
26+
*
27+
* @var string
28+
*/
29+
private $option_name = 'turbo_drive_options';
30+
31+
/**
32+
* Default options
33+
*
34+
* @var array
35+
*/
36+
private $default_options = array(
37+
'progress_bar_color' => '#29d',
38+
);
39+
40+
/**
41+
* Constructor
42+
*/
43+
private function __construct()
44+
{
45+
add_action('admin_menu', array( $this, 'add_settings_page' ));
46+
add_action('admin_init', array( $this, 'register_settings' ));
47+
}
48+
49+
/**
50+
* Get the unique instance of the class
51+
*
52+
* @return Turbo_Drive_Settings
53+
*/
54+
public static function get_instance()
55+
{
56+
if (self::$instance === null) {
57+
self::$instance = new self();
58+
}
59+
60+
return self::$instance;
61+
}
62+
63+
/**
64+
* Add settings page to admin menu
65+
*/
66+
public function add_settings_page()
67+
{
68+
add_options_page(
69+
__('Turbo Drive Settings', 'turbo-drive'),
70+
__('Turbo Drive', 'turbo-drive'),
71+
'manage_options',
72+
'turbo-drive-settings',
73+
array( $this, 'render_settings_page' )
74+
);
75+
}
76+
77+
/**
78+
* Register settings
79+
*/
80+
public function register_settings()
81+
{
82+
register_setting(
83+
'turbo_drive_settings_group',
84+
$this->option_name,
85+
array( $this, 'sanitize_options' )
86+
);
87+
88+
add_settings_section(
89+
'turbo_drive_general_section',
90+
__('General Settings', 'turbo-drive'),
91+
array( $this, 'render_general_section' ),
92+
'turbo-drive-settings'
93+
);
94+
95+
add_settings_field(
96+
'progress_bar_color',
97+
__('Progress Bar Color', 'turbo-drive'),
98+
array( $this, 'render_progress_bar_color_field' ),
99+
'turbo-drive-settings',
100+
'turbo_drive_general_section'
101+
);
102+
}
103+
104+
/**
105+
* Sanitize options before saving
106+
*
107+
* @param array $input Options to sanitize.
108+
* @return array Sanitized options.
109+
*/
110+
public function sanitize_options($input)
111+
{
112+
$sanitized_input = array();
113+
114+
// Sanitize progress bar color
115+
if (isset($input['progress_bar_color'])) {
116+
$sanitized_input['progress_bar_color'] = sanitize_hex_color($input['progress_bar_color']);
117+
if (empty($sanitized_input['progress_bar_color'])) {
118+
$sanitized_input['progress_bar_color'] = $this->default_options['progress_bar_color'];
119+
}
120+
}
121+
122+
return $sanitized_input;
123+
}
124+
125+
/**
126+
* Display general section description
127+
*/
128+
public function render_general_section()
129+
{
130+
echo '<p>' . esc_html__('Configure Turbo Drive options for your site.', 'turbo-drive') . '</p>';
131+
}
132+
133+
/**
134+
* Display progress bar color field
135+
*/
136+
public function render_progress_bar_color_field()
137+
{
138+
$options = $this->get_options();
139+
$color = isset($options['progress_bar_color']) ? $options['progress_bar_color'] : $this->default_options['progress_bar_color'];
140+
141+
echo '<input type="color" id="turbo_drive_progress_bar_color" name="' . esc_attr($this->option_name) . '[progress_bar_color]" value="' . esc_attr($color) . '">';
142+
echo '<p class="description">' . esc_html__('Choose the color of the progress bar that appears during page loads.', 'turbo-drive') . '</p>';
143+
}
144+
145+
/**
146+
* Display settings page
147+
*/
148+
public function render_settings_page()
149+
{
150+
if (! current_user_can('manage_options')) {
151+
return;
152+
}
153+
154+
?>
155+
<div class="wrap">
156+
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
157+
<form action="options.php" method="post">
158+
<?php
159+
settings_fields('turbo_drive_settings_group');
160+
do_settings_sections('turbo-drive-settings');
161+
submit_button();
162+
?>
163+
</form>
164+
</div>
165+
<?php
166+
}
167+
168+
/**
169+
* Get options with default values if necessary
170+
*
171+
* @return array
172+
*/
173+
public function get_options()
174+
{
175+
$options = get_option($this->option_name, $this->default_options);
176+
return wp_parse_args($options, $this->default_options);
177+
}
178+
179+
/**
180+
* Get value of a specific option
181+
*
182+
* @param string $key Option key.
183+
* @param mixed $default Default value.
184+
* @return mixed
185+
*/
186+
public function get_option($key, $default = null)
187+
{
188+
$options = $this->get_options();
189+
190+
if (isset($options[$key])) {
191+
return $options[$key];
192+
}
193+
194+
return $default !== null ? $default : $this->default_options[$key] ?? null;
195+
}
196+
}

‎turbo-drive.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,20 @@
1212
* @package Turbo_Drive
1313
*/
1414

15+
// Include settings class file
16+
require_once plugin_dir_path(__FILE__) . 'includes/class-turbo-drive-settings.php';
17+
18+
// Initialize settings class
19+
$turbo_drive_settings = Turbo_Drive_Settings::get_instance();
20+
1521
add_action('wp_enqueue_scripts', function () {
1622
wp_enqueue_script('turbo-drive', plugins_url('/dist/main.js', __FILE__));
23+
24+
// Add progress bar color to JavaScript parameters
25+
$options = Turbo_Drive_Settings::get_instance()->get_options();
26+
wp_localize_script('turbo-drive', 'turboDriveOptions', array(
27+
'progressBarColor' => $options['progress_bar_color'],
28+
));
1729
}, 10);
1830

1931
add_action('admin_head', function () {

0 commit comments

Comments
 (0)