| 1 |
<?php |
| 2 |
/* |
| 3 |
Plugin Name: CMB2 Switch Button |
| 4 |
Description: https://github.com/themevan/CMB2-Switch-Button/ |
| 5 |
Version: 1.0 |
| 6 |
Author: ThemeVan |
| 7 |
Author URI: https://www.themevan.com |
| 8 |
License: GPL-2.0+ |
| 9 |
*/ |
| 10 |
// Exit if accessed directly |
| 11 |
if( !defined( 'ABSPATH' ) ) exit; |
| 12 |
if( !class_exists( 'CMB2_Switch_Button' ) ) { |
| 13 |
/** |
| 14 |
* Class CMB2_Radio_Image |
| 15 |
*/ |
| 16 |
class CMB2_Switch_Button { |
| 17 |
public function __construct() { |
| 18 |
add_action( 'cmb2_render_switch', array( $this, 'callback' ), 10, 5 ); |
| 19 |
add_action( 'admin_head', array( $this, 'admin_head' ) ); |
| 20 |
} |
| 21 |
public function callback($field, $escaped_value, $object_id, $object_type, $field_type_object) { |
| 22 |
$field_name = $field->_name(); |
| 23 |
|
| 24 |
$args = array( |
| 25 |
'type' => 'checkbox', |
| 26 |
'id' => $field_name, |
| 27 |
'name' => $field_name, |
| 28 |
'desc' => '', |
| 29 |
'value' => 'on', |
| 30 |
); |
| 31 |
if($escaped_value == 'on'){ |
| 32 |
$args['checked'] = 'checked'; |
| 33 |
} |
| 34 |
|
| 35 |
echo '<label class="cmb2-switch">'; |
| 36 |
echo $field_type_object->input($args); |
| 37 |
echo '<span class="cmb2-slider round"></span>'; |
| 38 |
echo '</label>'; |
| 39 |
$field_type_object->_desc( true, true ); |
| 40 |
} |
| 41 |
|
| 42 |
public function admin_head() { |
| 43 |
?> |
| 44 |
<style> |
| 45 |
.cmb2-switch { |
| 46 |
position: relative; |
| 47 |
display: inline-block; |
| 48 |
width: 49px; |
| 49 |
height: 23px; |
| 50 |
} |
| 51 |
|
| 52 |
.cmb2-switch input {display:none;} |
| 53 |
|
| 54 |
.cmb2-slider { |
| 55 |
position: absolute; |
| 56 |
cursor: pointer; |
| 57 |
top: 0; |
| 58 |
left: 0; |
| 59 |
right: 0; |
| 60 |
bottom: 0; |
| 61 |
background-color: #ccc; |
| 62 |
-webkit-transition: .4s; |
| 63 |
transition: .4s; |
| 64 |
} |
| 65 |
|
| 66 |
.cmb2-slider:before { |
| 67 |
position: absolute; |
| 68 |
content: ""; |
| 69 |
height: 17px; |
| 70 |
width: 17px; |
| 71 |
left: 3px; |
| 72 |
bottom: 3px; |
| 73 |
background-color: white; |
| 74 |
-webkit-transition: .4s; |
| 75 |
transition: .4s; |
| 76 |
} |
| 77 |
|
| 78 |
input:checked + .cmb2-slider { |
| 79 |
background-color: #2196F3; |
| 80 |
} |
| 81 |
|
| 82 |
input:focus + .cmb2-slider { |
| 83 |
box-shadow: 0 0 1px #2196F3; |
| 84 |
} |
| 85 |
|
| 86 |
input:checked + .cmb2-slider:before { |
| 87 |
-webkit-transform: translateX(26px); |
| 88 |
-ms-transform: translateX(26px); |
| 89 |
transform: translateX(26px); |
| 90 |
} |
| 91 |
|
| 92 |
/* Rounded sliders */ |
| 93 |
.cmb2-slider.round { |
| 94 |
border-radius: 34px; |
| 95 |
} |
| 96 |
|
| 97 |
.cmb2-slider.round:before { |
| 98 |
border-radius: 50%; |
| 99 |
} |
| 100 |
</style> |
| 101 |
<?php |
| 102 |
} |
| 103 |
} |
| 104 |
$cmb2_switch_button = new CMB2_Switch_Button(); |
| 105 |
} |
| 106 |
|
