Merge branch 'develop'

* develop: bump to 1.17.0 introduce true_false field for CMB2
lipemat · Dec 18, 2018 · 0a87fa9 · 0a87fa9
2 parents f49ef13 + 6605019
commit 0a87fa9
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # WordPress Libs
 WordPress library which supports a core plugin and theme.
 
-**Version [1.16.0](https://github.com/lipemat/wordpress-lipe-libs/releases/tag/1.16.0)**
+**Version [1.17.0](https://github.com/lipemat/wordpress-lipe-libs/releases/tag/1.17.0)**
 
 ### Requirements
 1. PHP Version 7.1.3+ (Recommended 7.2.0+)

diff --git a/src/CMB2/Field/True_False.php b/src/CMB2/Field/True_False.php
@@ -0,0 +1,185 @@
+<?php
+
+namespace Lipe\Lib\CMB2\Field;
+
+/**
+ * A True/False checkbox toggle field
+ *
+ * @author Mat Lipe
+ * @since  1.17.0
+ *
+ */
+class True_False extends \CMB2_Type_Checkbox {
+
+	/**
+	 * Identical to the parent render except we use our own method
+	 * for wrapping the input in the appropriate elements
+	 *
+	 * @param array $args - not actually used for anything
+	 *
+	 * @return \CMB2_Type_Base|string
+	 */
+	public function render( $args = [] ) {
+		$defaults = [
+			'type'  => 'checkbox',
+			'class' => 'cmb2-option cmb2-list',
+			'value' => 'on',
+			'desc'  => '',
+		];
+
+		$meta_value = $this->field->escaped_value();
+
+		$is_checked = $this->is_checked ?? ! empty( $meta_value );
+
+		if ( $is_checked ) {
+			$defaults['checked'] = 'checked';
+		}
+
+		return $this->rendered(
+			sprintf(
+				'%s <label for="%s">%s</label>',
+				$this->render_toggle_field( $defaults ),
+				$this->_id(),
+				$this->_desc()
+			)
+		);
+	}
+
+	/**
+	 * Generates a CSS only driven toggle on/off field.
+	 *
+	 * @param array $args
+	 *
+	 * @return string
+	 */
+	protected function render_toggle_field( array $args ) : string {
+		ob_start();
+		$args['class'] .= ' checkbox-toggle-checkbox';
+		?>
+		<div class="checkbox-toggle-wrap">
+			<?= \CMB2_Type_Text::render( $this->parse_args( 'checkbox', $args ) ); //phpcs:ignore  ?>
+			<label class="checkbox-toggle-label" for="<?= esc_attr( $this->_id() ); ?>">
+				<span class="checkbox-toggle-inner"></span>
+				<span class="checkbox-toggle-switch"></span>
+			</label>
+		</div>
+		<?php
+		$this->styles();
+
+		return ob_get_clean();
+	}
+
+	/**
+	 * One-time loaded CSS to style the field
+	 *
+	 * @props Proto.IO which gave me the inspiration
+	 *
+	 * @link https://proto.io/freebies/onoff/
+	 *
+	 * @return void
+	 */
+	protected function styles() : void {
+		static $displayed = false;
+		if ( $displayed ) {
+			return;
+		}
+		$displayed = true;
+
+		?>
+		<style>
+			.checkbox-toggle-wrap {
+				position: relative;
+				width: 60px;
+				box-sizing: content-box;
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+			}
+
+			.checkbox-toggle-wrap .checkbox-toggle-checkbox {
+				display: none;
+			}
+
+			.checkbox-toggle-label {
+				display: block;
+				overflow: hidden;
+				cursor: pointer;
+				background: #f7f7f7;
+				border-width: 1px;
+				border-style: solid;
+				border-color: #999;
+				border-radius: 3px;
+				transition: all 0.3s ease-in 0s;
+			}
+
+			.checkbox-toggle-inner {
+				display: block;
+				width: 200%;
+				margin-left: -100%;
+				transition: margin 0.3s ease-in 0s;
+			}
+
+			.checkbox-toggle-inner:before, .checkbox-toggle-inner:after {
+				display: block;
+				float: left;
+				width: 50%;
+				height: 28px;
+				padding: 0;
+				line-height: 28px;
+				font-size: 14px;
+				color: white;
+				box-sizing: border-box;
+			}
+
+			.checkbox-toggle-inner:before {
+				content: "Yes";
+				padding-left: 5px;
+				background-color: #2A9BD8;
+				color: #FFFFFF;
+			}
+
+			.checkbox-toggle-inner:after {
+				content: "No";
+				padding-right: 5px;
+				color: #555;
+				background: #f7f7f7;
+				box-shadow: 0 1px 0 #cccccc;
+				text-align: right;
+			}
+
+			.checkbox-toggle-switch {
+				display: block;
+				width: 18px;
+				margin: 5px;
+				background: #FFFFFF;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: 28px;
+				border: 1px solid #999;
+				border-radius: 3px;
+				transition: all 0.3s ease-in 0s;
+			}
+
+			.checkbox-toggle-checkbox:checked + .checkbox-toggle-label .checkbox-toggle-inner {
+				margin-left: 0;
+			}
+
+			.checkbox-toggle-checkbox:checked + .checkbox-toggle-label,
+			.checkbox-toggle-checkbox:checked + .checkbox-toggle-label .checkbox-toggle-switch {
+				border-color: #0073aa #006799 #006799;
+				box-shadow: 0 1px 0 #006799;
+				text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
+			}
+
+			.checkbox-toggle-checkbox:checked + .checkbox-toggle-label {
+				background: #0085ba;
+			}
+
+			.checkbox-toggle-checkbox:checked + .checkbox-toggle-label .checkbox-toggle-switch {
+				right: 0;
+			}
+		</style>
+		<?php
+	}
+}
diff --git a/src/CMB2/Field_Type.php b/src/CMB2/Field_Type.php
@@ -3,6 +3,7 @@
 namespace Lipe\Lib\CMB2;
 
 use Lipe\Lib\CMB2\Field\Checkbox;
+use Lipe\Lib\CMB2\Field\True_False;
 use Lipe\Lib\CMB2\Field_Types\Term_Select_2;
 
 /**
@@ -401,6 +402,22 @@ public function title() {
 		return $this->set( [ 'type' => $this->title ] );
 	}
 
+	/**
+	 * True false switch like checkbox
+	 *
+	 * Custom to WP-Libs
+	 *
+	 * @since 1.17.0
+	 *
+	 * @return Field
+	 */
+	public function true_false() : Field {
+		return $this->set( [
+			'type' => $this->checkbox,
+			'render_class' => True_False::class,
+		]);
+	}
+
 
 	/**
 	 * Standard text field (large).
@@ -585,9 +602,10 @@ public function checkbox( string $layout = 'block' ) : Field {
 		$_args = [
 			'type' => $this->checkbox,
 		];
-		if( 'block' !== $layout ) {
-			$_args['render_row_cb' ] = [ Checkbox::in(), 'render_field_callback' ];
+		if ( 'block' !== $layout ) {
+			$_args['render_row_cb'] = [ Checkbox::in(), 'render_field_callback' ];
 		}
+
 		return $this->set( $_args );
 	}