diff --git a/changelog.txt b/changelog.txt index c21b67cfeb3a0ea78d21e852f119709f861baebd..fd474440a98f2308b5b90d105621ec6fab185b24 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,9 @@ # Changelog +## [3.3.0] - 2025-04-XX +### Added +- ToggleField class, extends CheckboxField for toggle button functionality. + ## [3.2.1] - 2024-10-30 ### Changed - Raised required PHP version to 7.4. diff --git a/src/Field/ToggleField.php b/src/Field/ToggleField.php new file mode 100644 index 0000000000000000000000000000000000000000..79ff440bb27bd98ede1e6fedab22b42d6544c32a --- /dev/null +++ b/src/Field/ToggleField.php @@ -0,0 +1,14 @@ +<?php + +namespace WPDesk\Forms\Field; + +class ToggleField extends CheckboxField { + + public function __construct() { + $this->add_class( 'wpd-toggle-field' ); + } + + public function get_template_name(): string { + return 'input-toggle'; + } +} diff --git a/templates/input-toggle.php b/templates/input-toggle.php new file mode 100644 index 0000000000000000000000000000000000000000..848cdf819581485a2b5eeceb54b648c11bf1d2a8 --- /dev/null +++ b/templates/input-toggle.php @@ -0,0 +1,56 @@ +<?php +/** + * @var \WPDesk\Forms\Field $field + * @var \WPDesk\View\Renderer\Renderer $renderer + * @var string $name_prefix + * @var string $value + * @var string $template_name Real field template. + */ + +?> + +<style> + input[type="checkbox"].wpd-toggle-field { + all:unset; + background: #fff; + border:1px solid #949494; + width:32px; + height: 16px; + position: relative; + cursor: pointer; + border-radius: 200px; + } + input[type="checkbox"].wpd-toggle-field::before { + all:unset; + content: ""; + display: block !important; + height: 14px; + width:14px; + background: #1c1c1c; + border-radius: 100%; + position: absolute; + left: 1px; + top:1px; + transition: 0.25s; + transition-timing-function: ease-out; + } + input[type="checkbox"].wpd-toggle-field:checked { + background: var(--wp-admin-theme-color, #1851e0); + border-color: var(--wp-admin-theme-color, #1851e0); + } + input[type="checkbox"].wpd-toggle-field:checked:before { + left: 17px; + background: #fff; + } + +</style> +<?php +$renderer->output_render( + 'input', + [ + 'field' => $field, + 'renderer' => $renderer, + 'name_prefix' => $name_prefix, + 'value' => $value, + ] +);