Skip to content

Instantly share code, notes, and snippets.

@omartdev
Created September 3, 2018 10:02
Show Gist options
  • Save omartdev/21ade60daa42b817193e4ebf4014c5e4 to your computer and use it in GitHub Desktop.
Save omartdev/21ade60daa42b817193e4ebf4014c5e4 to your computer and use it in GitHub Desktop.
/* Switch CSS */
.switch_options{
display: block;
}
.switch_options:before,
.switch_options:after{
content:'.';
display:block;
overflow:hidden;
visibility:hidden;
font-size:0;
line-height:0;
width:0;
height:0;
}
.switch_options:after{
clear:both;
}
.switch_options span{
display: inline-block;
float: left;
padding: 4px 9px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: normal;
color: #555;
border: 1px solid #aaa;
text-transform: uppercase;
line-height: 16px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.switch_options span:first-of-type{
border-radius: 2px 0 0 2px;
border-right: 0;
}
.switch_options span:last-of-type{
border-radius: 0 2px 2px 0;
border-left: 0;
}
.switch_options span:hover{
background: #fafafa;
}
.switch_options span.selected{
background: #25A7F6; /* Old browsers */
background: -moz-linear-gradient(top, #25A7F6 0%, #25A7F6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25A7F6), color-stop(100%,#25A7F6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #25A7F6 0%,#25A7F6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #25A7F6 0%,#25A7F6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #25A7F6 0%,#25A7F6 100%); /* IE10+ */
background: linear-gradient(to bottom, #25A7F6 0%,#25A7F6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25A7F6', endColorstr='#25A7F6',GradientType=0 ); /* IE6-9 */
border-color: #25A7F6;
color: #fff;
}
jQuery(document).ready(function($) {
$('.switch_options').each(function() {
//This object
var obj = $(this);
var enb = obj.children('.switch_enable'); //cache first element, this is equal to ON
var dsb = obj.children('.switch_disable'); //cache first element, this is equal to OFF
var input = obj.children('input'); //cache the element where we must set the value
var input_val = obj.children('input').val(); //cache the element where we must set the value
/* Check selected */
if (0 == input_val) {
dsb.addClass('selected');
}
else if (1 == input_val) {
enb.addClass('selected');
}
//Action on user's click(ON)
enb.on('click', function() {
$(dsb).removeClass('selected'); //remove "selected" from other elements in this object class(OFF)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(ON)
$(input).val(1).change(); //Finally change the value to 1
});
//Action on user's click(OFF)
dsb.on('click', function() {
$(enb).removeClass('selected'); //remove "selected" from other elements in this object class(ON)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(OFF)
$(input).val(0).change(); // //Finally change the value to 0
});
});
});//document.ready close
<?php
//add new custom control type switch
if(class_exists( 'WP_Customize_control')):
class Doctorial_WP_Customize_Switch_Control extends WP_Customize_Control {
public $type = 'switch';
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
<div class="switch_options">
<span class="switch_enable"><?php esc_html_e('Yes','doctorial'); ?></span>
<span class="switch_disable"><?php esc_html_e('No','doctorial'); ?></span>
<input type="hidden" id="switch_yes_no" <?php $this->link(); ?> value="<?php echo esc_attr($this->value()); ?>" />
</div>
</label>
<?php
}
}
endif;
if( is_admin() ):
//load js to control function of switch
function doctorial_switch_scripts() {
wp_enqueue_style( 'doctorial-switch-css', get_template_directory_uri() . '/inc/css/admin-control.css');
wp_enqueue_script( 'doctorial-switch-js', get_template_directory_uri().'/inc/js/admin-control.js', array( 'jquery' ), '20160623', true );
}
add_action( 'admin_enqueue_scripts', 'doctorial_switch_scripts' );
endif; ?>
$wp_customize->add_setting(
'doctorial_homepage_slider_option',
array(
'default' => 0,
'sanitize_callback' => 'doctorial_sanitize_checkbox',
)
);
$wp_customize->add_control(
new Doctorial_WP_Customize_Switch_Control(
$wp_customize,
'doctorial_homepage_slider_option',
array(
'type' => 'switch',
'description' => esc_html__('Do you want to enable this section?','doctorial'),
'section' => 'doctorial_homepage_slider',
'setting' => 'doctorial_homepage_slider_option',
'priority' => 10,
)
)
);
function doctorial_sanitize_checkbox($input){
if($input == 1){
return 1;
}else{
return '';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment