Kirki_Control_Background::content_template() - Code Metrics - Inspection of "Merge pull request #1283 from aristath/feature/bg" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — develop ( 5f2b0c...a03475 )

by Aristeides

created 2017-03-28 20:12 UTC

Kirki_Control_Background::content_template() B

↳ Parent: Kirki_Control_Background

Complexity

Conditions	1
Paths	1

Size

Total Lines	126
Code Lines	4

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	4
nc	1
nop	0
dl	0
loc	126
rs	8.2857
c	0
b	0
f	0

How to fix Long Method

<?php
/**
 * Customizer Control: background.
 *
 * Creates a new custom control.
 * Custom controls contains all background-related options.
 *
 * @package     Kirki
 * @subpackage  Controls
 * @copyright   Copyright (c) 2016, Aristeides Stathopoulos
 * @license     http://opensource.org/licenses/https://opensource.org/licenses/MIT
 * @since       1.0
 */

/**
 * Adds multiple input fiels that combined make up the background control.
 */
class Kirki_Control_Background extends WP_Customize_Control {

	/**
	 * The control type.
	 *
	 * @access public
	 * @var string
	 */
	public $type = 'kirki-background';

	/**
	 * Used to automatically generate all CSS output.
	 *
	 * @access public
	 * @var array
	 */
	public $output = array();

	/**
	 * Data type
	 *
	 * @access public
	 * @var string
	 */
	public $option_type = 'theme_mod';

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @access public
	 */
	public function enqueue() {
		wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'controls/background/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
		wp_enqueue_style( 'wp-color-picker' );

		wp_enqueue_script( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.js', array( 'jquery', 'wp-color-picker-alpha' ) );
		wp_enqueue_style( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.css', null );
	}

	/**
	 * Refresh the parameters passed to the JavaScript via JSON.
	 *
	 * @access public
	 */
	public function to_json() {
		parent::to_json();

		$this->json['default'] = $this->setting->default;
		if ( isset( $this->default ) ) {
			$this->json['default'] = $this->default;
		}
		$this->json['output']  = $this->output;
		$this->json['value']   = $this->value();
		$this->json['choices'] = $this->choices;
		$this->json['link']    = $this->get_link();
		$this->json['id']      = $this->id;

		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 ) . '" ';
		}
		$config_id = 'global';
		$this->json['l10n'] = $this->l10n( $config_id );
	}

	/**
	 * An Underscore (JS) template for this control's content (but not its container).
	 *
	 * Class variables for this control class are available in the `data` JS object;
	 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
	 *
	 * @see WP_Customize_Control::print_template()
	 *
	 * @access protected
	 */
	protected function content_template() {
		?>
		<label>
			<span class="customize-control-title">
				{{{ data.label }}}
			</span>
			<# if ( data.description ) { #>
				<span class="description customize-control-description">{{{ data.description }}}</span>
			<# } #>
		</label>
		<div class="background-wrapper">

			<!-- background-color -->
			<div class="background-color">
				<h4>{{ data.l10n['background-color'] }}</h4>
				<input type="text" data-default-color="{{ data.default['background-color'] }}" data-alpha="true" value="{{ data.value['background-color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
			</div>

			<!-- background-image -->
			<div class="background-image">
				<h4>{{ data.l10n['background-image'] }}</h4>
				<div class="attachment-media-view background-image-upload">
					<# if ( data.value['background-image'] ) { #>
						<div class="thumbnail thumbnail-image">
							<img src="{{ data.value['background-image'] }}" alt="" />
						</div>
					<# } else { #>
						<div class="placeholder">
							{{ data.l10n['no-file-selected'] }}
						</div>
					<# } #>
					<div class="actions">
						<button class="button background-image-upload-remove-button<# if ( ! data.value['background-image'] ) { #> hidden <# } #>">
							{{ data.l10n['remove'] }}
						</button>
						<button type="button" class="button background-image-upload-button">
							{{ data.l10n['select-file'] }}
						</button>
					</div>
				</div>
			</div>

			<!-- background-repeat -->
			<div class="background-repeat">
				<h4>{{ data.l10n['background-repeat'] }}</h4>
				<#
				var repeats = [
						'no-repeat',
						'repeat-all',
						'repeat-x',
						'repeat-y'
					];
				#>
				<select {{{ data.inputAttrs }}} {{{ data.link }}}>
					<# _.each( repeats, function( repeat ) { #>
						<option value="{{ repeat }}"<# if ( repeat === data.value['background-repeat'] ) { #> selected <# } #>>{{ data.l10n[ repeat ] }}</option>
					<# }); #>
				</select>
			</div>

			<!-- background-position -->
			<div class="background-position">
				<h4>{{ data.l10n['background-position'] }}</h4>
				<#
				var positions = [
						'left top',
						'left center',
						'left bottom',
						'right top',
						'right center',
						'right bottom',
						'center top',
						'center center',
						'center bottom'
					];
				#>
				<select {{{ data.inputAttrs }}} {{{ data.link }}}>
					<# _.each( positions, function( position ) { #>
						<option value="{{ position }}"<# if ( position === data.value['background-position'] ) { #> selected <# } #>>{{ data.l10n[ position ] }}</option>
					<# }); #>
				</select>
			</div>

			<!-- background-size -->
			<div class="background-size">
				<h4>{{ data.l10n['background-size'] }}</h4>
				<#
				var sizes = [
						'cover',
						'contain',
						'auto'
					];
				#>
				<div class="buttonset">
					<# _.each( sizes, function( size ) { #>
						<input {{{ data.inputAttrs }}} class="switch-input screen-reader-text" type="radio" value="{{ size }}" name="_customize-bg-{{{ data.id }}}-size" id="{{ data.id }}{{ size }}" {{{ data.link }}}<# if ( size === data.value['background-size'] ) { #> checked="checked" <# } #>>
							<label class="switch-label switch-label-<# if ( size === data.value['background-size'] ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}{{ size }}">
								{{ data.l10n[ size ] }}
							</label>
						</input>
					<# }); #>
				</div>
			</div>

			<!-- background-attachment -->
			<div class="background-attachment">
				<h4>{{ data.l10n['background-attachment'] }}</h4>
				<#
				var attachments = [
						'scroll',
						'fixed',
						'local'
					];
				#>
				<div class="buttonset">
					<# _.each( attachments, function( attachment ) { #>
						<input {{{ data.inputAttrs }}} class="switch-input screen-reader-text" type="radio" value="{{ attachment }}" name="_customize-bg-{{{ data.id }}}-attachment" id="{{ data.id }}{{ attachment }}" {{{ data.link }}}<# if ( attachment === data.value['background-attachment'] ) { #> checked="checked" <# } #>>
							<label class="switch-label switch-label-<# if ( attachment === data.value['background-attachment'] ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}{{ attachment }}">
								{{ data.l10n[ attachment ] }}
							</label>
						</input>
					<# }); #>
				</div>
			</div>
		<?php
	}

	/**
	 * Returns an array of translation strings.
	 *
	 * @access protected
	 * @since 3.0.0
	 * @param string|false $config_id The string-ID.
	 * @return array
	 */
	protected function l10n( $config_id ) {
		$translation_strings = array(
			'background-color'      => esc_attr__( 'Background Color', 'kirki' ),
			'background-image'      => esc_attr__( 'Background Image', 'kirki' ),
			'background-repeat'     => esc_attr__( 'Background Repeat', 'kirki' ),
			'background-attachment' => esc_attr__( 'Background Attachment', 'kirki' ),
			'background-position'   => esc_attr__( 'Background Position', 'kirki' ),
			'background-size'       => esc_attr__( 'Background Size', 'kirki' ),

			'no-repeat'             => esc_attr__( 'No Repeat', 'kirki' ),
			'repeat-all'            => esc_attr__( 'Repeat All', 'kirki' ),
			'repeat-x'              => esc_attr__( 'Repeat Horizontally', 'kirki' ),
			'repeat-y'              => esc_attr__( 'Repeat Vertically', 'kirki' ),

			'cover'                 => esc_attr__( 'Cover', 'kirki' ),
			'contain'               => esc_attr__( 'Contain', 'kirki' ),
			'auto'                  => esc_attr__( 'Auto', 'kirki' ),
			'inherit'               => esc_attr__( 'Inherit', 'kirki' ),

			'fixed'                 => esc_attr__( 'Fixed', 'kirki' ),
			'scroll'                => esc_attr__( 'Scroll', 'kirki' ),
			'local'                 => esc_attr__( 'Local', 'kirki' ),

			'left top'              => esc_attr__( 'Left Top', 'kirki' ),
			'left center'           => esc_attr__( 'Left Center', 'kirki' ),
			'left bottom'           => esc_attr__( 'Left Bottom', 'kirki' ),
			'right top'             => esc_attr__( 'Right Top', 'kirki' ),
			'right center'          => esc_attr__( 'Right Center', 'kirki' ),
			'right bottom'          => esc_attr__( 'Right Bottom', 'kirki' ),
			'center top'            => esc_attr__( 'Center Top', 'kirki' ),
			'center center'         => esc_attr__( 'Center Center', 'kirki' ),
			'center bottom'         => esc_attr__( 'Center Bottom', 'kirki' ),

			'no-file-selected'      => esc_attr__( 'No File Selected', 'kirki' ),
			'remove'                => esc_attr__( 'Remove', 'kirki' ),
			'select-file'           => esc_attr__( 'Select File', 'kirki' ),
		);
		return apply_filters( 'kirki/' . $config_id . '/l10n', $translation_strings );
	}
}


1			<?php
2			/**
3			* Customizer Control: background.
4			*
5			* Creates a new custom control.
6			* Custom controls contains all background-related options.
7			*
8			* @package Kirki
9			* @subpackage Controls
10			* @copyright Copyright (c) 2016, Aristeides Stathopoulos
11			* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
12			* @since 1.0
13			*/
14
15			/**
16			* Adds multiple input fiels that combined make up the background control.
17			*/
18			class Kirki_Control_Background extends WP_Customize_Control {
19
20			/**
21			* The control type.
22			*
23			* @access public
24			* @var string
25			*/
26			public $type = 'kirki-background';
27
28			/**
29			* Used to automatically generate all CSS output.
30			*
31			* @access public
32			* @var array
33			*/
34			public $output = array();
35
36			/**
37			* Data type
38			*
39			* @access public
40			* @var string
41			*/
42			public $option_type = 'theme_mod';
43
44			/**
45			* Enqueue control related scripts/styles.
46			*
47			* @access public
48			*/
49			public function enqueue() {
50			wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'controls/background/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
51			wp_enqueue_style( 'wp-color-picker' );
52
53			wp_enqueue_script( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.js', array( 'jquery', 'wp-color-picker-alpha' ) );
54			wp_enqueue_style( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.css', null );
55			}
56
57			/**
58			* Refresh the parameters passed to the JavaScript via JSON.
59			*
60			* @access public
61			*/
62			public function to_json() {
63			parent::to_json();
64
65			$this->json['default'] = $this->setting->default;
66			if ( isset( $this->default ) ) {
67			$this->json['default'] = $this->default;
68			}
69			$this->json['output'] = $this->output;
70			$this->json['value'] = $this->value();
71			$this->json['choices'] = $this->choices;
72			$this->json['link'] = $this->get_link();
73			$this->json['id'] = $this->id;
74
75			if ( 'user_meta' === $this->option_type ) {
76			$this->json['value'] = get_user_meta( get_current_user_id(), $this->id, true );
77			}
78
79			$this->json['inputAttrs'] = '';
80			foreach ( $this->input_attrs as $attr => $value ) {
81			$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
82			}
83			$config_id = 'global';
84			$this->json['l10n'] = $this->l10n( $config_id );
85			}
86
87			/**
88			* An Underscore (JS) template for this control's content (but not its container).
89			*
90			* Class variables for this control class are available in the `data` JS object;
91			* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
92			*
93			* @see WP_Customize_Control::print_template()
94			*
95			* @access protected
96			*/
97			protected function content_template() {
98			?>
99			<label>
100			<span class="customize-control-title">
101			{{{ data.label }}}
102			</span>
103			<# if ( data.description ) { #>
104			<span class="description customize-control-description">{{{ data.description }}}</span>
105			<# } #>
106			</label>
107			<div class="background-wrapper">
108
109			<!-- background-color -->
110			<div class="background-color">
111			<h4>{{ data.l10n['background-color'] }}</h4>
112			<input type="text" data-default-color="{{ data.default['background-color'] }}" data-alpha="true" value="{{ data.value['background-color'] }}" class="kirki-color-control color-picker" {{{ data.link }}} />
113			</div>
114
115			<!-- background-image -->
116			<div class="background-image">
117			<h4>{{ data.l10n['background-image'] }}</h4>
118			<div class="attachment-media-view background-image-upload">
119			<# if ( data.value['background-image'] ) { #>
120			<div class="thumbnail thumbnail-image">
121			<img src="{{ data.value['background-image'] }}" alt="" />
122			</div>
123			<# } else { #>
124			<div class="placeholder">
125			{{ data.l10n['no-file-selected'] }}
126			</div>
127			<# } #>
128			<div class="actions">
129			<button class="button background-image-upload-remove-button<# if ( ! data.value['background-image'] ) { #> hidden <# } #>">
130			{{ data.l10n['remove'] }}
131			</button>
132			<button type="button" class="button background-image-upload-button">
133			{{ data.l10n['select-file'] }}
134			</button>
135			</div>
136			</div>
137			</div>
138
139			<!-- background-repeat -->
140			<div class="background-repeat">
141			<h4>{{ data.l10n['background-repeat'] }}</h4>
142			<#
143			var repeats = [
144			'no-repeat',
145			'repeat-all',
146			'repeat-x',
147			'repeat-y'
148			];
149			#>
150			<select {{{ data.inputAttrs }}} {{{ data.link }}}>
151			<# _.each( repeats, function( repeat ) { #>
152			<option value="{{ repeat }}"<# if ( repeat === data.value['background-repeat'] ) { #> selected <# } #>>{{ data.l10n[ repeat ] }}</option>
153			<# }); #>
154			</select>
155			</div>
156
157			<!-- background-position -->
158			<div class="background-position">
159			<h4>{{ data.l10n['background-position'] }}</h4>
160			<#
161			var positions = [
162			'left top',
163			'left center',
164			'left bottom',
165			'right top',
166			'right center',
167			'right bottom',
168			'center top',
169			'center center',
170			'center bottom'
171			];
172			#>
173			<select {{{ data.inputAttrs }}} {{{ data.link }}}>
174			<# _.each( positions, function( position ) { #>
175			<option value="{{ position }}"<# if ( position === data.value['background-position'] ) { #> selected <# } #>>{{ data.l10n[ position ] }}</option>
176			<# }); #>
177			</select>
178			</div>
179
180			<!-- background-size -->
181			<div class="background-size">
182			<h4>{{ data.l10n['background-size'] }}</h4>
183			<#
184			var sizes = [
185			'cover',
186			'contain',
187			'auto'
188			];
189			#>
190			<div class="buttonset">
191			<# _.each( sizes, function( size ) { #>
192			<input {{{ data.inputAttrs }}} class="switch-input screen-reader-text" type="radio" value="{{ size }}" name="_customize-bg-{{{ data.id }}}-size" id="{{ data.id }}{{ size }}" {{{ data.link }}}<# if ( size === data.value['background-size'] ) { #> checked="checked" <# } #>>
193			<label class="switch-label switch-label-<# if ( size === data.value['background-size'] ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}{{ size }}">
194			{{ data.l10n[ size ] }}
195			</label>
196			</input>
197			<# }); #>
198			</div>
199			</div>
200
201			<!-- background-attachment -->
202			<div class="background-attachment">
203			<h4>{{ data.l10n['background-attachment'] }}</h4>
204			<#
205			var attachments = [
206			'scroll',
207			'fixed',
208			'local'
209			];
210			#>
211			<div class="buttonset">
212			<# _.each( attachments, function( attachment ) { #>
213			<input {{{ data.inputAttrs }}} class="switch-input screen-reader-text" type="radio" value="{{ attachment }}" name="_customize-bg-{{{ data.id }}}-attachment" id="{{ data.id }}{{ attachment }}" {{{ data.link }}}<# if ( attachment === data.value['background-attachment'] ) { #> checked="checked" <# } #>>
214			<label class="switch-label switch-label-<# if ( attachment === data.value['background-attachment'] ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}{{ attachment }}">
215			{{ data.l10n[ attachment ] }}
216			</label>
217			</input>
218			<# }); #>
219			</div>
220			</div>
221			<?php
222			}
223
224			/**
225			* Returns an array of translation strings.
226			*
227			* @access protected
228			* @since 3.0.0
229			* @param string\|false $config_id The string-ID.
230			* @return array
231			*/
232			protected function l10n( $config_id ) {
233			$translation_strings = array(
234			'background-color' => esc_attr__( 'Background Color', 'kirki' ),
235			'background-image' => esc_attr__( 'Background Image', 'kirki' ),
236			'background-repeat' => esc_attr__( 'Background Repeat', 'kirki' ),
237			'background-attachment' => esc_attr__( 'Background Attachment', 'kirki' ),
238			'background-position' => esc_attr__( 'Background Position', 'kirki' ),
239			'background-size' => esc_attr__( 'Background Size', 'kirki' ),
240
241			'no-repeat' => esc_attr__( 'No Repeat', 'kirki' ),
242			'repeat-all' => esc_attr__( 'Repeat All', 'kirki' ),
243			'repeat-x' => esc_attr__( 'Repeat Horizontally', 'kirki' ),
244			'repeat-y' => esc_attr__( 'Repeat Vertically', 'kirki' ),
245
246			'cover' => esc_attr__( 'Cover', 'kirki' ),
247			'contain' => esc_attr__( 'Contain', 'kirki' ),
248			'auto' => esc_attr__( 'Auto', 'kirki' ),
249			'inherit' => esc_attr__( 'Inherit', 'kirki' ),
250
251			'fixed' => esc_attr__( 'Fixed', 'kirki' ),
252			'scroll' => esc_attr__( 'Scroll', 'kirki' ),
253			'local' => esc_attr__( 'Local', 'kirki' ),
254
255			'left top' => esc_attr__( 'Left Top', 'kirki' ),
256			'left center' => esc_attr__( 'Left Center', 'kirki' ),
257			'left bottom' => esc_attr__( 'Left Bottom', 'kirki' ),
258			'right top' => esc_attr__( 'Right Top', 'kirki' ),
259			'right center' => esc_attr__( 'Right Center', 'kirki' ),
260			'right bottom' => esc_attr__( 'Right Bottom', 'kirki' ),
261			'center top' => esc_attr__( 'Center Top', 'kirki' ),
262			'center center' => esc_attr__( 'Center Center', 'kirki' ),
263			'center bottom' => esc_attr__( 'Center Bottom', 'kirki' ),
264
265			'no-file-selected' => esc_attr__( 'No File Selected', 'kirki' ),
266			'remove' => esc_attr__( 'Remove', 'kirki' ),
267			'select-file' => esc_attr__( 'Select File', 'kirki' ),
268			);
269			return apply_filters( 'kirki/' . $config_id . '/l10n', $translation_strings );
270			}
271			}
272

aristath / kirki

Push — develop ( 5f2b0c...a03475 )

Kirki_Control_Background::content_template() B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like