106 lines
2.5 KiB
PHP
106 lines
2.5 KiB
PHP
|
<?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();
|
||
|
|
}
|