class-kirki-controls-dashicons-control.php (11514B)
1 <?php 2 /** 3 * Customizer Control: dashicons. 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 2.2.4 10 */ 11 12 // Exit if accessed directly. 13 if ( ! defined( 'ABSPATH' ) ) { 14 exit; 15 } 16 17 if ( ! class_exists( 'Kirki_Controls_Dashicons_Control' ) ) { 18 19 /** 20 * Dashicons control (modified radio). 21 */ 22 class Kirki_Controls_Dashicons_Control extends Kirki_Customize_Control { 23 24 /** 25 * The control type. 26 * 27 * @access public 28 * @var string 29 */ 30 public $type = 'kirki-dashicons'; 31 32 /** 33 * Refresh the parameters passed to the JavaScript via JSON. 34 * 35 * @access public 36 */ 37 public function to_json() { 38 parent::to_json(); 39 $this->json['icons'] = Kirki_Helper::get_dashicons(); 40 } 41 42 /** 43 * Enqueue control related scripts/styles. 44 * 45 * @access public 46 */ 47 public function enqueue() { 48 wp_enqueue_script( 'kirki-dashicons' ); 49 } 50 51 /** 52 * An Underscore (JS) template for this control's content (but not its container). 53 * 54 * Class variables for this control class are available in the `data` JS object; 55 * export custom variables by overriding {@see Kirki_Customize_Control::to_json()}. 56 * 57 * @see WP_Customize_Control::print_template() 58 * 59 * @access protected 60 */ 61 protected function content_template() { 62 ?> 63 <# if ( data.tooltip ) { #> 64 <a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}"><span class='dashicons dashicons-info'></span></a> 65 <# } #> 66 <# if ( data.label ) { #> 67 <span class="customize-control-title">{{ data.label }}</span> 68 <# } #> 69 <# if ( data.description ) { #> 70 <span class="description customize-control-description">{{{ data.description }}}</span> 71 <# } #> 72 <div class="icons-wrapper"> 73 <# if ( 'undefined' !== typeof data.choices && 1 < _.size( data.choices ) ) { #> 74 <# for ( key in data.choices ) { #> 75 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ key }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value === key ) { #> checked="checked"<# } #>> 76 <label for="{{ data.id }}{{ key }}"> 77 <span class="dashicons dashicons-{{ data.choices[ key ] }}"></span> 78 </label> 79 </input> 80 <# } #> 81 <# } else { #> 82 <h4>Admin Menu</h4> 83 <# for ( key in data.icons['admin-menu'] ) { #> 84 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['admin-menu'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['admin-menu'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['admin-menu'][ key ] ) { #> checked="checked"<# } #>> 85 <label for="{{ data.id }}{{ data.icons['admin-menu'][ key ] }}"> 86 <span class="dashicons dashicons-{{ data.icons['admin-menu'][ key ] }}"></span> 87 </label> 88 </input> 89 <# } #> 90 <h4>Welcome Screen</h4> 91 <# for ( key in data.icons['welcome-screen'] ) { #> 92 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['welcome-screen'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['welcome-screen'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['welcome-screen'][ key ] ) { #> checked="checked"<# } #>> 93 <label for="{{ data.id }}{{ data.icons['welcome-screen'][ key ] }}"> 94 <span class="dashicons dashicons-{{ data.icons['welcome-screen'][ key ] }}"></span> 95 </label> 96 </input> 97 <# } #> 98 <h4>Post Formats</h4> 99 <# for ( key in data.icons['post-formats'] ) { #> 100 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['post-formats'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['post-formats'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['post-formats'][ key ] ) { #> checked="checked"<# } #>> 101 <label for="{{ data.id }}{{ data.icons['post-formats'][ key ] }}"> 102 <span class="dashicons dashicons-{{ data.icons['post-formats'][ key ] }}"></span> 103 </label> 104 </input> 105 <# } #> 106 <h4>Media</h4> 107 <# for ( key in data.icons['media'] ) { #> 108 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['media'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['media'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['media'][ key ] ) { #> checked="checked"<# } #>> 109 <label for="{{ data.id }}{{ data.icons['media'][ key ] }}"> 110 <span class="dashicons dashicons-{{ data.icons['media'][ key ] }}"></span> 111 </label> 112 </input> 113 <# } #> 114 <h4>Image Editing</h4> 115 <# for ( key in data.icons['image-editing'] ) { #> 116 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['image-editing'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['image-editing'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['image-editing'][ key ] ) { #> checked="checked"<# } #>> 117 <label for="{{ data.id }}{{ data.icons['image-editing'][ key ] }}"> 118 <span class="dashicons dashicons-{{ data.icons['image-editing'][ key ] }}"></span> 119 </label> 120 </input> 121 <# } #> 122 <h4>TinyMCE</h4> 123 <# for ( key in data.icons['tinymce'] ) { #> 124 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['tinymce'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['tinymce'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['tinymce'][ key ] ) { #> checked="checked"<# } #>> 125 <label for="{{ data.id }}{{ data.icons['tinymce'][ key ] }}"> 126 <span class="dashicons dashicons-{{ data.icons['tinymce'][ key ] }}"></span> 127 </label> 128 </input> 129 <# } #> 130 <h4>Posts</h4> 131 <# for ( key in data.icons['posts'] ) { #> 132 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['posts'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['posts'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['posts'][ key ] ) { #> checked="checked"<# } #>> 133 <label for="{{ data.id }}{{ data.icons['posts'][ key ] }}"> 134 <span class="dashicons dashicons-{{ data.icons['posts'][ key ] }}"></span> 135 </label> 136 </input> 137 <# } #> 138 <h4>Sorting</h4> 139 <# for ( key in data.icons['sorting'] ) { #> 140 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['sorting'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['sorting'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['sorting'][ key ] ) { #> checked="checked"<# } #>> 141 <label for="{{ data.id }}{{ data.icons['sorting'][ key ] }}"> 142 <span class="dashicons dashicons-{{ data.icons['sorting'][ key ] }}"></span> 143 </label> 144 </input> 145 <# } #> 146 <h4>Social</h4> 147 <# for ( key in data.icons['social'] ) { #> 148 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['social'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['social'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['social'][ key ] ) { #> checked="checked"<# } #>> 149 <label for="{{ data.id }}{{ data.icons['social'][ key ] }}"> 150 <span class="dashicons dashicons-{{ data.icons['social'][ key ] }}"></span> 151 </label> 152 </input> 153 <# } #> 154 <h4>WordPress</h4> 155 <# for ( key in data.icons['wordpress_org'] ) { #> 156 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['wordpress_org'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['wordpress_org'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['wordpress_org'][ key ] ) { #> checked="checked"<# } #>> 157 <label for="{{ data.id }}{{ data.icons['wordpress_org'][ key ] }}"> 158 <span class="dashicons dashicons-{{ data.icons['wordpress_org'][ key ] }}"></span> 159 </label> 160 </input> 161 <# } #> 162 <h4>Products</h4> 163 <# for ( key in data.icons['products'] ) { #> 164 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['products'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['products'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['products'][ key ] ) { #> checked="checked"<# } #>> 165 <label for="{{ data.id }}{{ data.icons['products'][ key ] }}"> 166 <span class="dashicons dashicons-{{ data.icons['products'][ key ] }}"></span> 167 </label> 168 </input> 169 <# } #> 170 <h4>Taxonomies</h4> 171 <# for ( key in data.icons['taxonomies'] ) { #> 172 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['taxonomies'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['taxonomies'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['taxonomies'][ key ] ) { #> checked="checked"<# } #>> 173 <label for="{{ data.id }}{{ data.icons['taxonomies'][ key ] }}"> 174 <span class="dashicons dashicons-{{ data.icons['taxonomies'][ key ] }}"></span> 175 </label> 176 </input> 177 <# } #> 178 <h4>Widgets</h4> 179 <# for ( key in data.icons['widgets'] ) { #> 180 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['widgets'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['widgets'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['widgets'][ key ] ) { #> checked="checked"<# } #>> 181 <label for="{{ data.id }}{{ data.icons['widgets'][ key ] }}"> 182 <span class="dashicons dashicons-{{ data.icons['widgets'][ key ] }}"></span> 183 </label> 184 </input> 185 <# } #> 186 <h4>Notifications</h4> 187 <# for ( key in data.icons['notifications'] ) { #> 188 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['notifications'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['notifications'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['notifications'][ key ] ) { #> checked="checked"<# } #>> 189 <label for="{{ data.id }}{{ data.icons['notifications'][ key ] }}"> 190 <span class="dashicons dashicons-{{ data.icons['notifications'][ key ] }}"></span> 191 </label> 192 </input> 193 <# } #> 194 <h4>Misc</h4> 195 <# for ( key in data.icons['misc'] ) { #> 196 <input {{{ data.inputAttrs }}} class="dashicons-select" type="radio" value="{{ data.icons['misc'][ key ] }}" name="_customize-dashicons-radio-{{ data.id }}" id="{{ data.id }}{{ data.icons['misc'][ key ] }}" {{{ data.link }}}<# if ( data.value === data.icons['misc'][ key ] ) { #> checked="checked"<# } #>> 197 <label for="{{ data.id }}{{ data.icons['misc'][ key ] }}"> 198 <span class="dashicons dashicons-{{ data.icons['misc'][ key ] }}"></span> 199 </label> 200 </input> 201 <# } #> 202 <# } #> 203 </div> 204 <?php 205 } 206 } 207 }