class-kirki-controls-switch-control.php (2568B)
1 <?php 2 /** 3 * Customizer Control: switch. 4 * 5 * @package Kirki 6 * @subpackage Controls 7 * @copyright Copyright (c) 2016, Aristeides Stathopoulos 8 * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT 9 * @since 1.0 10 */ 11 12 // Exit if accessed directly. 13 if ( ! defined( 'ABSPATH' ) ) { 14 exit; 15 } 16 17 if ( ! class_exists( 'Kirki_Controls_Switch_Control' ) ) { 18 19 /** 20 * Switch control (modified checkbox). 21 */ 22 class Kirki_Controls_Switch_Control extends Kirki_Controls_Checkbox_Control { 23 24 /** 25 * The control type. 26 * 27 * @access public 28 * @var string 29 */ 30 public $type = 'kirki-switch'; 31 32 /** 33 * Enqueue control related scripts/styles. 34 * 35 * @access public 36 */ 37 public function enqueue() { 38 wp_enqueue_script( 'kirki-switch' ); 39 } 40 41 /** 42 * An Underscore (JS) template for this control's content (but not its container). 43 * 44 * Class variables for this control class are available in the `data` JS object; 45 * export custom variables by overriding {@see Kirki_Customize_Control::to_json()}. 46 * 47 * @see WP_Customize_Control::print_template() 48 * 49 * @access protected 50 */ 51 protected function content_template() { 52 ?> 53 <# if ( data.tooltip ) { #> 54 <a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}"><span class='dashicons dashicons-info'></span></a> 55 <# } #> 56 <style> 57 #customize-control-{{ data.id }} .switch label { 58 width: calc({{ data.choices['on'].length }}ch + {{ data.choices['off'].length }}ch + 40px); 59 } 60 #customize-control-{{ data.id }} .switch label:after { 61 width: calc({{ data.choices['on'].length }}ch + 10px); 62 } 63 #customize-control-{{ data.id }} .switch input:checked + label:after { 64 left: calc({{ data.choices['on'].length }}ch + 25px); 65 width: calc({{ data.choices['off'].length }}ch + 10px); 66 } 67 </style> 68 <div class="switch<# if ( data.choices['round'] ) { #> round<# } #>"> 69 <span class="customize-control-title"> 70 {{{ data.label }}} 71 </span> 72 <# if ( data.description ) { #> 73 <span class="description customize-control-description">{{{ data.description }}}</span> 74 <# } #> 75 <input {{{ data.inputAttrs }}} name="switch_{{ data.id }}" id="switch_{{ data.id }}" type="checkbox" value="{{ data.value }}" {{{ data.link }}}<# if ( '1' == data.value ) { #> checked<# } #> /> 76 <label class="switch-label" for="switch_{{ data.id }}"> 77 <span class="switch-on">{{ data.choices['on'] }}</span> 78 <span class="switch-off">{{ data.choices['off'] }}</span> 79 </label> 80 </div> 81 <?php 82 } 83 } 84 }