<?php
/*
Plugin Name: CMB2 Switch Button
Description: https://github.com/themevan/CMB2-Switch-Button/
Version: 1.0
Author: ThemeVan
Author URI: https://www.themevan.com
License: GPL-2.0+
*/
// Exit if accessed directly
 
if( !class_exists( 'CMB2_Switch_Button' ) ) {
    /**
     * Class CMB2_Radio_Image
     */
    class CMB2_Switch_Button {
        public function __construct() {
            add_action( 'cmb2_render_switch', array( $this, 'callback' ), 10, 5 );
            add_action( 'admin_head', array( $this, 'admin_head' ) );
        }
        public function callback($field, $escaped_value, $object_id, $object_type, $field_type_object) {
           $field_name = $field->_name();
           
           $args = array(
	           			'type'  => 'checkbox',
	           			'id'	=> $field_name,
	           			'name'  => $field_name,
	           			'desc'	=> '',
	           			'value' => 'on',
	           		);
           if( $escaped_value == 'on' || $escaped_value == 1 ){
           	  $args['checked'] = 'checked';
           }

           echo '<label class="cmb2-switch">';
           echo $field_type_object->input($args);
           echo '<span class="cmb2-slider round"></span>';
           echo '</label>';
           $field_type_object->_desc( true, true );
        }

        public function admin_head() {
            ?>
        <style>
        .cmb2-switch {
				  position: relative;
				  display: inline-block;
				  width: 49px;
				  height: 23px;
				}

				.cmb2-switch input {display:none;}

				.cmb2-slider {
				  position: absolute;
				  cursor: pointer;
				  top: 0;
				  left: 0;
				  right: 0;
				  bottom: 0;
				  background-color: #ccc;
				  -webkit-transition: .4s;
				  transition: .4s;
				}

				.cmb2-slider:before {
				  position: absolute;
				  content: "";
				  height: 17px;
				  width: 17px;
				  left: 3px;
				  bottom: 3px;
				  background-color: white;
				  -webkit-transition: .4s;
				  transition: .4s;
				}

				input:checked + .cmb2-slider {
				  background-color: #2196F3;
				}

				input:focus + .cmb2-slider {
				  box-shadow: 0 0 1px #2196F3;
				}

				input:checked + .cmb2-slider:before {
				  -webkit-transform: translateX(26px);
				  -ms-transform: translateX(26px);
				  transform: translateX(26px);
				}

				/* Rounded sliders */
				.cmb2-slider.round {
				  border-radius: 34px;
				}

				.cmb2-slider.round:before {
				  border-radius: 50%;
				}
        </style>
        <?php
        }
    }
    $cmb2_switch_button = new CMB2_Switch_Button();
}