args_to_props( $args ); } /** * Send the parameters via JSON. */ public function json() { $json = parent::json(); $json['default'] = $this->setting->default; if ( isset( $this->default ) ) { $json['default'] = $this->default; } $json['value'] = json_decode( $this->value(), true ); $json['link'] = $this->get_link(); $json['id'] = $this->id; $json['label'] = esc_html( $this->label ); $json['units'] = $this->units; $json['responsive'] = $this->responsive; $json['inputAttr'] = $this->input_attr; return $json; } /** * Render the control * * @access protected */ protected function content_template() { $this->render_title(); ?> <# var wrapClass = data.responsive ? 'has-media-queries' : ''; #> <# wrapClass += data.units.length ? '' : 'no-units'; #>

<# if( data.responsive === true ) { #> <# _.each( data.inputAttr, function( attr, mediaQuery ) { #> render_input(); ?> <# } ) #> <# } else { var mediaQuery = 'desktop'; var attr = data.inputAttr; #> render_input(); ?> <# } #>

<# var value = data.value ? data.value[mediaQuery] : attr.default; var suffix = ''; if( data.value ) { suffix = data.value.suffix ? data.value.suffix[mediaQuery] : attr.default_unit; } if( ! data.responsive ) { value = data.value? data.value : attr.default } var active = mediaQuery === 'desktop' ? 'active' : ''; #>

min="{{attr.min}}" <# } if ( attr.max ) { #> max="{{attr.max}}" <# } #> data-query="{{mediaQuery}}" data-default="{{attr.default}}" value="{{ value }}" /> <# if( data.units.length ) { var disabled = data.units.length === 1 ? 'disabled' : ''; #> <# } #>

<# if ( data.label ) { #> {{{ data.label }}} <# if ( data.description ) { #> <# } #> <# if( data.responsive === true ) { #> render_responsive_switches(); ?> <# } #> <# } #>

input_attr = $args['input_attr']; } if ( ! empty( $args['media_query'] ) ) { $this->responsive = (bool) $args['responsive']; } if ( ! isset( $this->input_attr['mobile'] ) || ! isset( $this->input_attr['tablet'] ) || ! isset( $this->input_attr['desktop'] ) ) { $this->responsive = false; } } }