From 3badc143abb2596501da9fcffdd50702f81bc84c Mon Sep 17 00:00:00 2001
From: Felipe <felipe@superhuit.ch>
Date: Thu, 13 Jul 2023 21:26:43 +0200
Subject: [PATCH] Style switch #2

---
 README.md              |  1 +
 include/Fields.php     | 22 ++++++++++++++++++--
 src/switch-nice-ui.css | 46 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/switch-nice-ui.css

diff --git a/README.md b/README.md
index 6d295be..ccc8739 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,7 @@ Arguments:
 | name | string | true | Name of the input
 | checked | boolean | true |
 | help | string | false | Optional. Help / description
+| nice_ui | boolean | false | Optional. Display as a nicer ui. Default true.
 
 > Example of usage
 
diff --git a/include/Fields.php b/include/Fields.php
index c1f836d..47e28bb 100644
--- a/include/Fields.php
+++ b/include/Fields.php
@@ -94,14 +94,27 @@ public static function dropdown( $args ) {
 	}
 
 	public static function switch($args) {
+
+		$defaults = [
+			'name'    => '',
+			'checked' => false,
+			'help'    => '',
+			'nice_ui' => true,
+		];
+
+		// Parse incoming $args and merge it with $defaults.
+		$args = wp_parse_args( $args, $defaults );
+
+		if ( $args['nice_ui'] ) self::include_switch_assets();
+
 		printf(
-			'<div class="switch"><input class="switch__chk" type="checkbox" id="%1$s" name="%2$s" %3$s><label for="%1$s" class="switch__label" tabindex="-1"></label></div>',
+			'<div class="wsfd-switch"><input class="wsfd-switch__chk" type="checkbox" id="%1$s" name="%2$s" %3$s><label for="%1$s" class="wsfd-switch__label" tabindex="-1"></label></div>',
 			$args['id'] ?? $args['name'],
 			$args['name'],
 			($args['checked']  ? 'checked' : '')
 		);
 
-		if ( isset($args['help']) ) {
+		if ( !empty($args['help']) ) {
 			printf( '<p class="description">%s</p>', $args['help']);
 		}
 	}
@@ -292,6 +305,11 @@ private static function get_lib_uri() {
 		return  trailingslashit(get_site_url()) . preg_replace("/(\/[^\/]+)$/", '', str_replace(ABSPATH, '', __DIR__) );
 	}
 
+	private static function include_switch_assets() {
+		$lib_uri = self::get_lib_uri();
+		wp_enqueue_style('wsfd-switch-nice-ui', untrailingslashit($lib_uri). '/src/switch-nice-ui.css', null, WSFD_VERSION );
+	}
+
 	private static function include_select2() {
 
 		if ( wp_script_is('select2', 'enqueued') ) return;
diff --git a/src/switch-nice-ui.css b/src/switch-nice-ui.css
new file mode 100644
index 0000000..56c5604
--- /dev/null
+++ b/src/switch-nice-ui.css
@@ -0,0 +1,46 @@
+.wsfd-switch {
+	position: relative;
+	display: flex;
+	font-size: 14px;
+}
+.wsfd-switch__chk {
+	position: absolute;
+	z-index: -1;
+	opacity: 0;
+}
+.wsfd-switch__label {
+	position: relative;
+	z-index: 1;
+	height: 20px;
+	width: 38px;
+	order: 2;
+	cursor: pointer;
+	border-radius: 34px;
+	font-size: 0;
+	box-shadow: none;
+	background-color: #858585;
+	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+.wsfd-switch__label::before {
+	content: '';
+	position: absolute;
+	top: calc(50% - 8px);
+	left: 2px;
+	display: block;
+	height: 12px;
+	width: 12px;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 2px solid #ffffff;
+	transition: background-color 0.2s ease-out, transform 0.2s ease-out;
+}
+.wsfd-switch__chk:checked + label {
+	background-color: #00a54b;
+}
+.wsfd-switch__chk:checked + label::before {
+	transform: translateX(18px);
+	background-color: #ffffff;
+}
+.wsfd-switch__chk:focus + label {
+	box-shadow: inset #007cba 0px 0px 1px 1px, #007cba 0px 0px 1px 1px;
+}