betterdocs / admin / customizer / controls.php

controls.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 2.0.1, at admin/customizer/controls.php

665 lines 24.2 KB

Raw Download Zip

1	<?php
2	// No direct access, please
3	if ( ! defined( 'ABSPATH' ) ) exit;
4
5	/**
6	* Range Value Customizer Control
7	*
8	* Class BetterDocs_Customizer_Range_Value_Control
9	*
10	* @since 1.0.0
11	*/
12	class BetterDocs_Customizer_Range_Value_Control extends WP_Customize_Control {
13	public $type = 'betterdocs-range-value';
14
15	/**
16	* Enqueue scripts/styles.
17	*
18	* @since 1.0.0
19	*/
20	public function enqueue() {
21	wp_enqueue_script(
22	'betterdocs-customizer-range-value-control',
23	BETTERDOCS_ADMIN_URL . 'assets/js/customizer-range-value-control.js',
24	array( 'jquery' ),
25	rand(),
26	true
27	);
28
29	wp_enqueue_style(
30	'betterdocs-customizer-range-value-control', BETTERDOCS_ADMIN_URL . 'assets/css/customizer-range-value-control.css',
31	array(),
32	rand()
33	);
34	}
35
36	/**
37	* Render the control's content.
38	*
39	* @version 1.0.0
40	*
41	*/
42	public function render_content() {
43	?>
44	<?php if ( ! empty( $this->label ) ) : ?>
45	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
46	<a href="#" title="<?php echo esc_html__('Reset', 'betterdocs') ?>" class="betterdocs-customizer-reset <?php echo esc_html( $this->type ); ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="20px"><path d="M 25 2 C 12.321124 2 2 12.321124 2 25 C 2 37.678876 12.321124 48 25 48 C 37.678876 48 48 37.678876 48 25 A 2.0002 2.0002 0 1 0 44 25 C 44 35.517124 35.517124 44 25 44 C 14.482876 44 6 35.517124 6 25 C 6 14.482876 14.482876 6 25 6 C 30.475799 6 35.391893 8.3080175 38.855469 12 L 35 12 A 2.0002 2.0002 0 1 0 35 16 L 46 16 L 46 5 A 2.0002 2.0002 0 0 0 43.970703 2.9726562 A 2.0002 2.0002 0 0 0 42 5 L 42 9.5253906 C 37.79052 4.9067015 31.727675 2 25 2 z"></path></svg></a>
47	<?php endif; ?>
48	<div class="betterdcos-range-slider" data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" style="width:100%; display:flex;flex-direction: row;justify-content: flex-start;">
49	<span style="width:100%; flex: 1 0 0; vertical-align: middle;"><input class="betterdcos-range-slider__range" type="range" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->input_attrs(); $this->link(); ?>>
50	<span class="betterdcos-range-slider__value">0</span></span>
51	</div>
52	<?php if ( ! empty( $this->description ) ) : ?>
53	<span class="description customize-control-description"><?php echo $this->description; ?></span>
54	<?php endif; ?>
55	<?php
56	}
57	}
58
59	/**
60	* Toogle Customizer Control
61	*
62	* Class BetterDocs_Customizer_Toggle_Control
63	*
64	* @since 1.0.0
65	*
66	*/
67	class BetterDocs_Customizer_Toggle_Control extends WP_Customize_Control {
68	public $type = 'betterdocs-toggle';
69
70	/**
71	* Enqueue scripts/styles.
72	*
73	* @since 1.0.0
74	*/
75	public function enqueue() {
76	wp_enqueue_script( 'betterdocs-customizer-toggle-control',
77	BETTERDOCS_ADMIN_URL . 'assets/js/customizer-toggle-control.js',
78	array( 'jquery' ),
79	rand(),
80	true
81	);
82	wp_enqueue_style( 'betterdocs-pure-css-toggle-buttons',
83	BETTERDOCS_ADMIN_URL . 'assets/css/customizer-togle-buttons.css',
84	array(),
85	rand()
86	);
87
88	$css = '
89	.disabled-control-title {
90	color: #a0a5aa;
91	}
92	input[type=checkbox].tgl-light:checked + .tgl-btn {
93	background: #37de89;
94	}
95	input[type=checkbox].tgl-light + .tgl-btn {
96	background: #a0a5aa;
97	}
98	input[type=checkbox].tgl-light + .tgl-btn:after {
99	background: #f7f7f7;
100	}
101
102	input[type=checkbox].tgl-ios:checked + .tgl-btn {
103	background: #37de89;
104	}
105
106	input[type=checkbox].tgl-flat:checked + .tgl-btn {
107	border: 4px solid #37de89;
108	}
109	input[type=checkbox].tgl-flat:checked + .tgl-btn:after {
110	background: #37de89;
111	}
112
113	';
114	wp_add_inline_style( 'pure-css-toggle-buttons' , $css );
115	}
116
117	/**
118	* Render the control's content.
119	*
120	* @version 1.0.0
121	*
122	*/
123	public function render_content() {
124	?>
125	<label>
126	<div class="betterdocs-customizer-toggle">
127	<span class="customize-control-title betterdocs-customize-control-title betterdocs-customizer-toggle-title"><?php echo esc_html( $this->label ); ?></span>
128	<input id="cb<?php echo $this->instance_number ?>" type="checkbox" data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" class="tgl tgl-<?php echo $this->type?> <?php echo $this->type?>" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
129	<label for="cb<?php echo $this->instance_number ?>" class="tgl-btn"></label>
130	</div>
131	<?php if ( ! empty( $this->description ) ) : ?>
132	<span class="description customize-control-description"><?php echo $this->description; ?></span>
133	<?php endif; ?>
134	</label>
135	<?php
136	}
137	}
138
139	/**
140	* Alpha Color Picker Customizer Control
141	*
142	* Class BetterDocs_Customizer_Alpha_Color_Control
143	*
144	* @since 1.0.0
145	*/
146
147	class BetterDocs_Customizer_Alpha_Color_Control extends WP_Customize_Control {
148	/**
149	* Official control name.
150	*
151	* @var string
152	*/
153	public $type = 'betterdocs-alpha-color';
154	/**
155	* Add support for palettes to be passed in.
156	*
157	* Supported palette values are true, false, or an array of RGBa and Hex colors.
158	*
159	* @var bool
160	*/
161	public $palette;
162	/**
163	* Add support for showing the opacity value on the slider handle.
164	*
165	* @var array
166	*/
167	public $show_opacity;
168	/**
169	* Enqueue scripts/styles.
170	*
171	* @since 1.0.0
172	*
173	*/
174	public function enqueue() {
175	wp_enqueue_script(
176	'betterdocs-customizer-alpha-color-picker',
177	BETTERDOCS_ADMIN_URL . 'assets/js/alpha-color-picker.js',
178	array( 'jquery', 'wp-color-picker' ),
179	rand(),
180	true
181	);
182	wp_enqueue_style(
183	'betterdocs-customizer-alpha-color-picker',
184	BETTERDOCS_ADMIN_URL . 'assets/css/alpha-color-picker.css',
185	array( 'wp-color-picker' ),
186	rand()
187	);
188	}
189	/**
190	* Render the control.
191	*/
192	public function render_content() {
193	echo '<div class="betterdocs-alpha-color-picker">';
194	// Output the label and description if they were passed in.
195	if ( isset( $this->label ) && '' !== $this->label ) {
196	echo '<span class="customize-control-title betterdocs-customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
197	}
198	if ( isset( $this->description ) && '' !== $this->description ) {
199	echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
200	}
201
202	// Process the palette
203	if ( is_array( $this->palette ) ) {
204	$palette = implode( '\|', $this->palette );
205	} else {
206	// Default to true.
207	$palette = ( false === $this->palette \|\| 'false' === $this->palette ) ? 'false' : 'true';
208	}
209	// Support passing show_opacity as string or boolean. Default to true.
210	$show_opacity = ( false === $this->show_opacity \|\| 'false' === $this->show_opacity ) ? 'false' : 'true';
211	// Begin the output.
212	?>
213	<input class="betterdocs-alpha-color-control" type="text" data-show-opacity="<?php echo esc_attr( $show_opacity ); ?>" data-palette="<?php echo esc_attr( $palette ); ?>" data-default-color="<?php echo esc_attr( $this->settings['default']->default ); ?>" <?php esc_attr( $this->link() ); ?> />
214
215	<?php
216	echo '</div>';
217	}
218	}
219
220	/**
221	* Gradient Color Customizer Control
222	*
223	* Class BetterDocs_Customizer_Gradient_Color_Control
224	*
225	* @since 1.0.0
226	*/
227
228	class BetterDocs_Customizer_Gradient_Color_Control extends WP_Customize_Control {
229	/**
230	* Official control name.
231	*
232	* @var string
233	*/
234	public $type = 'batterdocs-gradient-color';
235	/**
236	* Add support for palettes to be passed in.
237	*
238	* Supported palette values are true, false, or an array of RGBa and Hex colors.
239	*
240	* @var bool
241	*/
242	public $palette;
243	/**
244	* Add support for showing the opacity value on the slider handle.
245	*
246	* @var array
247	*/
248	public $show_opacity;
249
250	public $defaults;
251	public $directions;
252
253	/**
254	* Enqueue scripts/styles.
255	*
256	* @since 1.0.0
257	*
258	*/
259	public function enqueue() {
260	wp_enqueue_script(
261	'betterdocs-customizer-alpha-color-picker',
262	BETTERDOCS_ADMIN_URL . 'assets/js/alpha-color-picker.js',
263	array( 'jquery', 'wp-color-picker' ),
264	rand(),
265	true
266	);
267	wp_enqueue_style(
268	'betterdocs-customizer-alpha-color-picker',
269	BETTERDOCS_ADMIN_URL . 'assets/css/alpha-color-picker.css',
270	array( 'wp-color-picker' ),
271	rand()
272	);
273	wp_enqueue_script(
274	'betterdocs-customizer-range-value-control',
275	BETTERDOCS_ADMIN_URL . 'assets/js/customizer-range-value-control.js',
276	array( 'jquery' ),
277	rand(),
278	true
279	);
280	wp_enqueue_style(
281	'betterdocs-customizer-range-value-control', BETTERDOCS_ADMIN_URL . 'assets/css/customizer-range-value-control.css',
282	array(),
283	rand()
284	);
285	wp_enqueue_script(
286	'betterdocs-customizer-gradient-control',
287	BETTERDOCS_ADMIN_URL . 'assets/js/customizer-gradient-control.js',
288	array( 'jquery' ),
289	rand(),
290	true
291	);
292	}
293	/**
294	* Render the control.
295	*/
296	public function render_content() {
297	echo '<div class="betterdocs-gradient-color-control">';
298	// Output the label and description if they were passed in.
299	if ( isset( $this->label ) && '' !== $this->label ) {
300	echo '<span class="customize-control-title betterdocs-customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
301	}
302	if ( isset( $this->description ) && '' !== $this->description ) {
303	echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
304	}
305
306	// Process the palette
307	if ( is_array( $this->palette ) ) {
308	$palette = implode( '\|', $this->palette );
309	} else {
310	// Default to true.
311	$palette = ( false === $this->palette \|\| 'false' === $this->palette ) ? 'false' : 'true';
312	}
313	// Support passing show_opacity as string or boolean. Default to true.
314	$show_opacity = ( false === $this->show_opacity \|\| 'false' === $this->show_opacity ) ? 'false' : 'true';
315	// Begin the output.
316
317	if( $this->value() ) {
318	if ( is_array ($this->value())) {
319	$gradient_val = $this->value();
320	} else {
321	$gradient_val = (array) json_decode($this->value());
322	}
323	} else {
324	$gradient_val = $this->defaults;
325	}
326	?>
327	<input type="hidden" value="" class="betterdocs-gradient-color <?php echo esc_attr($this->id) ?>" value="" data-customize-setting-link="<?php echo esc_attr($this->id); ?>">
328	<ul>
329	<li class="customize-control customize-control-gradient customize-control-gradient-color-1">
330	<div class="gradient-color-plate color-plate-left">
331	<label class="gradient-control-label"><?php esc_html_e('Color 1','betterdocs') ?></label>
332	<input class="betterdocs-alpha-color-control gradient-control-field gradient-control-color-1" type="text" data-show-opacity="<?php echo esc_attr( $show_opacity ); ?>" data-palette="<?php echo esc_attr( $palette ); ?>" value="<?php echo esc_attr( $gradient_val['color1']) ?>" />
333	</div>
334	<div class="gradient-color-plate color-plate-right">
335	<label class="gradient-control-label"><?php esc_html_e('%','betterdocs') ?></label>
336	<input type="number" class="gradient-control-color-1-percent" value="<?php echo esc_attr($gradient_val['color1_percent']) ?>">
337	</div>
338	</li>
339	<li class="customize-control customize-control-gradient customize-control-gradient-color-2">
340	<div class="gradient-color-plate color-plate-left">
341	<label class="gradient-control-label"><?php esc_html_e('Color 2','betterdocs') ?></label>
342	<input class="betterdocs-alpha-color-control gradient-control-field gradient-control-color-2" type="text" data-show-opacity="<?php echo esc_attr( $show_opacity ); ?>" data-palette="<?php echo esc_attr( $palette ); ?>" value="<?php echo esc_attr($gradient_val['color2']) ?>" />
343	</div>
344	<div class="gradient-color-plate color-plate-right">
345	<label class="gradient-control-label"><?php esc_html_e('%','betterdocs') ?></label>
346	<input type="number" class="gradient-control-color-2-percent" value="<?php echo esc_attr($gradient_val['color2_percent']) ?>">
347	</div>
348	</li>
349	<li class="customize-control customize-control-gradient customize-control-gradient-color-3">
350	<div class="gradient-color-plate color-plate-left">
351	<label class="gradient-control-label"><?php esc_html_e('Color 3','betterdocs') ?></label>
352	<input class="betterdocs-alpha-color-control gradient-control-field gradient-control-color-3" type="text" data-show-opacity="<?php echo esc_attr( $show_opacity ); ?>" data-palette="<?php echo esc_attr( $palette ); ?>" value="<?php echo esc_attr($gradient_val['color3']) ?>" />
353	</div>
354	<div class="gradient-color-plate color-plate-right">
355	<label class="gradient-control-label"><?php esc_html_e('%','betterdocs') ?></label>
356	<input type="number" class="gradient-control-color-3-percent" value="<?php echo esc_attr($gradient_val['color3_percent']) ?>">
357	</div>
358	</li>
359	<li class="customize-control customize-control-gradient customize-control-gradient-color-4">
360	<div class="gradient-color-plate color-plate-left">
361	<label class="gradient-control-label"><?php esc_html_e('Color 4','betterdocs') ?></label>
362	<input class="betterdocs-alpha-color-control gradient-control-field gradient-control-color-4" type="text" data-show-opacity="<?php echo esc_attr( $show_opacity ); ?>" data-palette="<?php echo esc_attr( $palette ); ?>" value="<?php echo esc_attr($gradient_val['color4']) ?>" />
363	</div>
364	<div class="gradient-color-plate color-plate-right">
365	<label class="gradient-control-label"><?php esc_html_e('%','betterdocs') ?></label>
366	<input type="number" class="gradient-control-color-4-percent" value="<?php echo esc_attr($gradient_val['color4_percent']) ?>">
367	</div>
368	</li>
369	<?php if ( $this->directions ) : ?>
370	<li class="customize-control customize-control-gradient">
371	<label class="gradient-control-label"><?php esc_html_e('Direction','betterdocs') ?></label>
372	<select class="gradient-direction-select gradient-control-field gradient-control-direction">
373	<?php
374	foreach($this->directions as $key => $value) {
375	$selected = ($key === $gradient_val['direction']) ? ' selected' : '';
376	echo '<option value="' . $key . '"'.$selected.'>' . esc_attr($value) . '</option>';
377	}
378	?>
379	</select>
380	</li>
381	<?php endif; ?>
382	<li class="customize-control">
383	<label class="gradient-control-label"><?php esc_html_e('Angle','betterdocs') ?></label>
384	<div class="betterdcos-range-slider" data-default-val="<?php echo esc_attr($gradient_val['angle'] ); ?>" style="width:100%; display:flex;flex-direction: row;justify-content: flex-start;">
385	<span style="width:100%; flex: 1 0 0; vertical-align: middle;">
386	<input class="betterdcos-range-slider__range gradient-control-angle" type="range" value="<?php echo esc_attr($gradient_val['angle'] ); ?>" min="-380" max="380" suffix="°">
387	<span class="betterdcos-range-slider__value">0</span></span>
388	</div>
389	</li>
390	</ul>
391
392	<?php
393	echo '</div>';
394	}
395	}
396
397	/**
398	* Seperator Custom Customizer Control
399	*
400	* Class BetterDocs_Separator_Custom_Control
401	*
402	* @since 1.0.0
403	*/
404
405	class BetterDocs_Separator_Custom_Control extends WP_Customize_Control{
406	public $type = 'separator';
407	public function render_content(){
408	?>
409	<label>
410	<h4 class="betterdocs-customize-control-separator"><?php echo esc_html( $this->label ); ?></h4>
411	<?php if ( ! empty( $this->description ) ) : ?>
412	<span class="description customize-control-description"><?php echo $this->description; ?></span>
413	<?php endif; ?>
414	</label>
415	<?php
416	}
417	}
418
419	/**
420	* Title Custom Customizer Control
421	*
422	* Class BetterDocs_Title_Custom_Control
423	*
424	* @since 1.0.0
425	*/
426
427	class BetterDocs_Title_Custom_Control extends WP_Customize_Control{
428	public $type = 'betterdocs-title';
429	public function render_content(){
430	?>
431	<div <?php echo $this->input_attrs(); ?>>
432	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
433	<a href="#" title="<?php echo esc_html__('Reset', 'betterdocs') ?>" class="betterdocs-customizer-reset"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="20px"><path d="M 25 2 C 12.321124 2 2 12.321124 2 25 C 2 37.678876 12.321124 48 25 48 C 37.678876 48 48 37.678876 48 25 A 2.0002 2.0002 0 1 0 44 25 C 44 35.517124 35.517124 44 25 44 C 14.482876 44 6 35.517124 6 25 C 6 14.482876 14.482876 6 25 6 C 30.475799 6 35.391893 8.3080175 38.855469 12 L 35 12 A 2.0002 2.0002 0 1 0 35 16 L 46 16 L 46 5 A 2.0002 2.0002 0 0 0 43.970703 2.9726562 A 2.0002 2.0002 0 0 0 42 5 L 42 9.5253906 C 37.79052 4.9067015 31.727675 2 25 2 z"></path></svg></a>
434	<?php if ( ! empty( $this->description ) ) : ?>
435	<span class="description customize-control-description"><?php echo $this->description; ?></span>
436	<?php endif; ?>
437	</div>
438	<?php
439	}
440	}
441
442
443	/**
444	* Select Customizer Control
445	*
446	* Class BetterDocs_Select_Control
447	*
448	* @since 1.0.0
449	*/
450
451	class BetterDocs_Select_Control extends WP_Customize_Control {
452
453	public $type = 'betterdocs-select';
454	public function render_content() {
455	if( empty( $this->choices ) )
456	return;
457	?>
458	<select <?php $this->link(); ?> data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" <?php echo $this->input_attrs(); ?>>
459	<?php
460	foreach( $this->choices as $key => $label ) {
461	echo '<option value="' . esc_attr( $key ) . '">' . $label . '</option>';
462	}
463	?>
464	</select>
465	<?php if( !empty( $this->label ) ) : ?>
466	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
467	<?php endif;
468	}
469
470	}
471
472	/**
473	* Dimension Customizer Control
474	*
475	* Class BetterDocs_Dimension_Control
476	*
477	* @since 1.0.0
478	*/
479
480	class BetterDocs_Dimension_Control extends WP_Customize_Control {
481	public $type = 'betterdocs-dimension';
482
483	/**
484	* Render the control's content.
485	*
486	* @since 1.0.0
487	*/
488	public function render_content() {
489	?>
490	<div class="dimension-field">
491	<input type="number" data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" value="<?php echo esc_attr($this->value()); ?>" <?php $this->input_attrs(); $this->link(); ?>>
492	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
493	</div>
494	<?php
495	}
496	}
497
498	/**
499	* Number Customizer Control
500	*
501	* Class BetterDocs_Dimension_Control
502	*
503	* @since 1.0.0
504	*/
505
506	class BetterDocs_Padding_Control extends WP_Customize_Control {
507	public $type = 'betterdocs-padding';
508
509	/**
510	* Render the control's content.
511	*
512	* @since 1.0.0
513	*/
514	public function render_content() {
515	?>
516	<div class="number-field">
517	<?php
518	$controller_id = esc_attr($this->id);
519	$val_top = get_theme_mod($this->id.'_top');
520	$val_left = get_theme_mod($this->id.'_left');
521	?>
522	<?php if ( ! empty( $this->label ) ) : ?>
523	<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
524	<a href="#" title="<?php echo esc_html__('Reset', 'betterdocs') ?>" class="betterdocs-customizer-reset <?php echo esc_html( $this->type ); ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="20px"><path d="M 25 2 C 12.321124 2 2 12.321124 2 25 C 2 37.678876 12.321124 48 25 48 C 37.678876 48 48 37.678876 48 25 A 2.0002 2.0002 0 1 0 44 25 C 44 35.517124 35.517124 44 25 44 C 14.482876 44 6 35.517124 6 25 C 6 14.482876 14.482876 6 25 6 C 30.475799 6 35.391893 8.3080175 38.855469 12 L 35 12 A 2.0002 2.0002 0 1 0 35 16 L 46 16 L 46 5 A 2.0002 2.0002 0 0 0 43.970703 2.9726562 A 2.0002 2.0002 0 0 0 42 5 L 42 9.5253906 C 37.79052 4.9067015 31.727675 2 25 2 z"></path></svg></a>
525	<?php endif; ?>
526	<!-- <input type="hidden" data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" class="<?php echo $this->type.' '.$this->id ?> ?>" value="<?php echo esc_attr($this->value()) ?>" <?php $this->input_attrs(); $this->link(); ?>> -->
527	<ul>
528	<li id="<?php echo $controller_id . '_top' ?>" class="customize-control">
529	<input type="number" data-default-val="20" class="<?php echo $this->type ?>" value="20" data-customize-setting-link="<?php echo $controller_id . '_top' ?>" >
530	</li>
531	<li id="<?php echo $controller_id . '_left' ?>" class="customize-control">
532	<input type="number" data-default-val="20" class="<?php echo $this->type ?>" value="20" data-customize-setting-link="<?php echo $controller_id . '_left' ?>">
533	</li>
534	</ul>
535	</div>
536	<?php
537	}
538	}
539
540
541	/**
542	* Number Customizer Control
543	*
544	* Class BetterDocs_Dimension_Control
545	*
546	* @since 1.0.0
547	*/
548
549	class BetterDocs_Number_Control extends WP_Customize_Control {
550	public $type = 'betterdocs-number';
551
552	/**
553	* Render the control's content.
554	*
555	* @since 1.0.0
556	*/
557	public function render_content() {
558	?>
559	<div class="number-field">
560	<?php if ( ! empty( $this->label ) ) : ?>
561	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
562	<a href="#" title="<?php echo esc_html__('Reset', 'betterdocs') ?>" class="betterdocs-customizer-reset <?php echo esc_html( $this->type ); ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="20px"><path d="M 25 2 C 12.321124 2 2 12.321124 2 25 C 2 37.678876 12.321124 48 25 48 C 37.678876 48 48 37.678876 48 25 A 2.0002 2.0002 0 1 0 44 25 C 44 35.517124 35.517124 44 25 44 C 14.482876 44 6 35.517124 6 25 C 6 14.482876 14.482876 6 25 6 C 30.475799 6 35.391893 8.3080175 38.855469 12 L 35 12 A 2.0002 2.0002 0 1 0 35 16 L 46 16 L 46 5 A 2.0002 2.0002 0 0 0 43.970703 2.9726562 A 2.0002 2.0002 0 0 0 42 5 L 42 9.5253906 C 37.79052 4.9067015 31.727675 2 25 2 z"></path></svg></a>
563	<?php endif; ?>
564	<input type="number" data-default-val="<?php echo $this->settings[ 'default' ]->value(); ?>" class="<?php echo $this->type ?>" value="<?php echo esc_attr($this->value()); ?>" <?php $this->input_attrs(); $this->link(); ?>>
565	<?php if ( ! empty( $this->description ) ) : ?>
566	<span class="description customize-control-description"><?php echo $this->description; ?></span>
567	<?php endif; ?>
568	</div>
569	<?php
570	}
571	}
572
573	class BetterDocs_Radio_Image_Control extends WP_Customize_Control {
574	/**
575	* Declare the control type.
576	*
577	* @since 1.0.0
578	*/
579	public $type = 'betterdocs-radio-image';
580
581	/**
582	* Enqueue scripts/styles.
583	*
584	* @since 1.0.0
585	*/
586	public function enqueue() {
587	wp_enqueue_script( 'jquery-ui-button' );
588	wp_enqueue_style(
589	'betterdocs-customizer-radio-image-select',
590	BETTERDOCS_ADMIN_URL . 'assets/css/customizer-radio-image-select.css',
591	array(),
592	rand()
593	);
594	}
595
596	/**
597	* Render the control's content.
598	*
599	* @since 1.0.0
600	*/
601	public function render_content() {
602	if ( empty( $this->choices ) ) {
603	return;
604	}
605
606	$name = '_customize-radio-' . $this->id;
607	?>
608	<?php if ( ! empty( $this->label ) ) : ?>
609	<span class="customize-control-title betterdocs-customize-control-title"><?php echo esc_html( $this->label ); ?></span>
610	<?php endif; ?>
611	<?php if ( ! empty( $this->description ) ) : ?>
612	<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
613	<?php endif; ?>
614	<div id="input_<?php echo $this->id; ?>" class="image ui-buttonset">
615	<?php
616	foreach ( $this->choices as $value => $label ) :
617	if(isset( $label['pro'] ) && $label['pro'] === true){ ?>
618	<label class="image-select" id="<?php echo $this->id . $value ?>">
619	<a target="_blank" href="<?php echo esc_url($label['url']) ?>"><img src="<?php echo esc_url( $label['image'] ) ?>" alt=""></a>
620	<span class="go-pro"><?php esc_html_e('Go Pro','betterdocs') ?></span>
621	</label>
622	<?php } else { ?>
623	<input class="image-select" type="radio" value="<?php echo esc_attr( $value ) ?>" id="<?php echo $this->id . $value; ?>" name="<?php echo esc_attr( $name ) ?>" <?php $this->link(); checked( $this->value(), $value ); ?>>
624	<label for="<?php echo $this->id . $value; ?>">
625	<img src="<?php echo esc_url( $label['image'] ) ?>" alt="<?php echo esc_attr( $value ) ?>" title="<?php echo esc_attr( $value ) ?>">
626	</label>
627	</input>
628	<?php } endforeach; ?>
629	</div>
630	<script>jQuery(document).ready(function($) { $( '[id="input_<?php echo $this->id; ?>"]' ).buttonset(); });</script>
631	<?php
632	}
633	}
634
635	/**
636	* Load customizer conditional controler js file.
637	*
638	* @since 1.0.0
639	*/
640
641	function betterdocs_customizer_condition() {
642	wp_enqueue_script( 'betterdocs-customize-condition',
643	BETTERDOCS_ADMIN_URL . 'assets/js/customizer-condition.js',
644	array(),
645	true
646	);
647	}
648	add_action( 'customize_controls_enqueue_scripts', 'betterdocs_customizer_condition' );
649
650	/**
651	* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
652	*
653	* @since 1.0.0
654	*/
655	function betterdocs_customize_preview_js() {
656	wp_enqueue_script( 'betterdocs-customizer',
657	BETTERDOCS_ADMIN_URL . 'assets/js/customizer.js',
658	array( 'customize-preview' ),
659	'',
660	true
661	);
662	}
663	add_action( 'customize_preview_init', 'betterdocs_customize_preview_js' );
664	?>
665