Skip to content

Commit

Permalink
Fixes #1074
Browse files Browse the repository at this point in the history
  • Loading branch information
@aristath
aristath committed Aug 26, 2016
1 parent 0e4bbb5 commit e925430
Show file tree
Hide file tree
Showing 27 changed files with 83 additions and 55 deletions.
7 changes: 7 additions & 0 deletions includes/class-kirki-customize-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ public function __construct( $manager, $id, $args = array() ) {

// Add translation strings.
$this->l10n = Kirki_l10n::get_strings( $this->kirki_config );

}

/**
Expand Down Expand Up @@ -147,6 +148,12 @@ public function to_json() {
if ( 'user_meta' === $this->option_type ) {
$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
}

$this->json['inputAttrs'] = '';
foreach ( $this->input_attrs as $attr => $value ) {
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
}

}

/**
Expand Down
22 changes: 21 additions & 1 deletion includes/class-kirki-field.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,14 @@ class Kirki_Field {
*/
protected $option_name = '';

/**
* Vustom input attributes (defined as an array).
*
* @access protected
* @var array
*/
protected $input_attrs = array();

/**
* Use "theme_mod" or "option".
*
Expand Down Expand Up @@ -444,7 +452,6 @@ protected function set_option_name() {

}


/**
* Escape the $section.
*
Expand All @@ -456,6 +463,19 @@ protected function set_section() {

}

/**
* Escape the $section.
*
* @access protected
*/
protected function set_input_attrs() {

if ( ! is_array( $this->input_attrs ) ) {
$this->input_attrs = array();
}

}

/**
* Checks the capability chosen is valid.
* If not, then falls back to 'edit_theme_options'
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-checkbox-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ protected function content_template() {
<a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}"><span class='dashicons dashicons-info'></span></a>
<# } #>
<label>
<input type="checkbox" value="{{ data.value }}" {{{ data.link }}}<# if ( '1' === data.value || 1 === data.value || true === data.value || 'on' === data.value ) { #> checked<# } #> />
<input type="checkbox" {{{ data.inputAttrs }}} value="{{ data.value }}" {{{ data.link }}}<# if ( '1' === data.value || 1 === data.value || true === data.value || 'on' === data.value ) { #> checked<# } #> />
{{ data.label }}
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-code-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ protected function content_template() {
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<a href="#" class="button edit button-primary">{{ data.choices.label }}</a>
<textarea class="kirki-codemirror-editor collapsed">{{{ data.value }}}</textarea>
<textarea {{{ data.inputAttrs }}} class="kirki-codemirror-editor collapsed">{{{ data.value }}}</textarea>
<a href="#" class="close">
<span class="dashicons dashicons-no"></span>
<span class="screen-reader-text">{{ data.l10n['close-editor'] }}</span>
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-color-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ protected function content_template() {
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<input type="text" data-palette="{{ data.palette }}" data-default-color="{{ data.default }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value }}" class="kirki-color-control color-picker" {{{ data.link }}} />
<input type="text" {{{ data.inputAttrs }}} data-palette="{{ data.palette }}" data-default-color="{{ data.default }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value }}" class="kirki-color-control color-picker" {{{ data.link }}} />
</label>
<?php
}
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-color-palette-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ protected function content_template() {
<# } #>
<div id="input_{{ data.id }}" class="colors-wrapper">
<# for ( key in data.choices['colors'] ) { #>
<input type="radio" value="{{ data.choices['colors'][ key ] }}" name="_customize-color-palette-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value == data.choices['colors'][ key ] ) { #> checked<# } #>>
<input type="radio" {{{ data.inputAttrs }}} value="{{ data.choices['colors'][ key ] }}" name="_customize-color-palette-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value == data.choices['colors'][ key ] ) { #> checked<# } #>>
<label for="{{ data.id }}{{ key }}">
<span class="color-palette-color" style='background: {{ data.choices['colors'][ key ] }}; width: {{ data.choices['size'] }}px; height: {{ data.choices['size'] }}px;'>{{ data.choices['colors'][ key ] }}</span>
</label>
Expand Down
32 changes: 16 additions & 16 deletions includes/controls/class-kirki-controls-dashicons-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ protected function content_template() {
<div class="icons-wrapper">
<# if ( 'undefined' !== typeof data.choices && 1 < _.size( data.choices ) ) { #>
<# for ( key in data.choices ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ key }}">
<span class="dashicons dashicons-{{ data.choices[ key ] }}"></span>
</label>
Expand All @@ -81,119 +81,119 @@ protected function content_template() {
<# } else { #>
<h4>Admin Menu</h4>
<# for ( key in data.icons['admin-menu'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['admin-menu'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['admin-menu'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Welcome Screen</h4>
<# for ( key in data.icons['welcome-screen'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['welcome-screen'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['welcome-screen'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Post Formats</h4>
<# for ( key in data.icons['post-formats'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['post-formats'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['post-formats'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Media</h4>
<# for ( key in data.icons['media'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['media'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['media'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Image Editing</h4>
<# for ( key in data.icons['image-editing'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['image-editing'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['image-editing'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>TinyMCE</h4>
<# for ( key in data.icons['tinymce'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['tinymce'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['tinymce'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Posts</h4>
<# for ( key in data.icons['posts'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['posts'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['posts'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Sorting</h4>
<# for ( key in data.icons['sorting'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['sorting'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['sorting'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Social</h4>
<# for ( key in data.icons['social'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['social'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['social'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>WordPress</h4>
<# for ( key in data.icons['wordpress_org'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['wordpress_org'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['wordpress_org'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Products</h4>
<# for ( key in data.icons['products'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['products'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['products'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Taxonomies</h4>
<# for ( key in data.icons['taxonomies'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['taxonomies'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['taxonomies'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Widgets</h4>
<# for ( key in data.icons['widgets'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['widgets'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['widgets'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Notifications</h4>
<# for ( key in data.icons['notifications'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['notifications'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['notifications'][ key ] }}"></span>
</label>
</input>
<# } #>
<h4>Misc</h4>
<# for ( key in data.icons['misc'] ) { #>
<input 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"<# } #>>
<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"<# } #>>
<label for="{{ data.id }}{{ data.icons['misc'][ key ] }}">
<span class="dashicons dashicons-{{ data.icons['misc'][ key ] }}"></span>
</label>
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-date-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ protected function content_template() {
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="customize-control-content">
<input class="datepicker" type="text" id="{{ data.id }}" value="{{ data.value }}" {{{ data.link }}} />
<input {{{ data.inputAttrs }}} class="datepicker" type="text" id="{{ data.id }}" value="{{ data.value }}" {{{ data.link }}} />
</div>
</label>
<?php
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-dimension-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ protected function content_template() {
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="input-wrapper">
<input type="text" value="{{ data.value }}"/>
<input {{{ data.inputAttrs }}} type="text" value="{{ data.value }}"/>
<span class="invalid-value">{{ data.l10n['invalid-value'] }}</span>
</div>
</label>
Expand Down
2 changes: 1 addition & 1 deletion includes/controls/class-kirki-controls-editor-control.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ protected function content_template() {
<# } #>
<div class="customize-control-content">
<a href="#" class="button button-primary toggle-editor"></a>
<textarea class="hidden" {{{ data.link }}}>{{ data.value }}</textarea>
<textarea {{{ data.inputAttrs }}} class="hidden" {{{ data.link }}}>{{ data.value }}</textarea>
</div>
</label>
<?php
Expand Down
Loading

0 comments on commit e925430

Please sign in to comment.