class-evf-customize-dimension-control.php — Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI 3.5.2

everest-forms / addons / StyleCustomizer / includes / customize / class-evf-customize-dimension-control.php

everest-forms / addons / StyleCustomizer / includes / customize Last commit date

class-evf-customize-dimension-control.php

260 lines

1	<?php
2	/**
3	* Customize API: EVF_Customize_Dimension_Control class
4	*
5	* @package EverestForms_Style_Customizer\Customize
6	* @since 1.0.0
7	*/
8
9	defined( 'ABSPATH' ) \|\| exit;
10
11	/**
12	* Customize Dimension Control class.
13	*
14	* @see WP_Customize_Control
15	*/
16	class EVF_Customize_Dimension_Control extends WP_Customize_Control {
17
18	/**
19	* Type.
20	*
21	* @var string
22	*/
23	public $type = 'evf-dimension';
24
25	/**
26	* Responsive active.
27	*
28	* @var boolean
29	*/
30	public $responsive = false;
31
32	/**
33	* Responsive tabs.
34	*
35	* @var array
36	*/
37	public $responsive_tabs = array();
38
39	/**
40	* Dimension Units.
41	*
42	* @var array
43	*/
44	public $unit_choices = array();
45
46	/**
47	* Input type.
48	*
49	* @var string
50	*/
51	public $input_type = 'text';
52
53	/**
54	* Inputs.
55	*
56	* @var array
57	*/
58	public $inputs = array();
59
60	/**
61	* Allow Anchor.
62	*
63	* @var bool
64	*/
65	public $anchor = true;
66
67	/**
68	* Default Anchor.
69	*
70	* @var bool
71	*/
72	public $default_anchor = true;
73
74	/**
75	* EVF_Customize_Dimension_Control constructor.
76	*
77	* @param WP_Customize_Manager $manager Customizer bootstrap instance.
78	* @param string $id An specific ID of the section.
79	* @param array $args Section arguments.
80	*/
81	public function __construct( $manager, $id, $args = array() ) {
82	parent::__construct( $manager, $id, $args );
83	$this->inputs = ( isset( $this->inputs ) && ! empty( $this->inputs ) ) ? $this->inputs : $this->get_default_inputs();
84	$this->responsive_tabs = ( isset( $this->responsive_tabs ) && ! empty( $this->responsive_tabs ) ) ? $this->responsive_tabs : $this->get_default_responsive_tabs();
85	}
86
87	/**
88	* Refresh the parameters passed to the JavaScript via JSON.
89	*
90	* @uses WP_Customize_Control::to_json()
91	*/
92	public function to_json() {
93	parent::to_json();
94	$this->json['default'] = $this->setting->default;
95	$this->json['id'] = $this->id;
96	$this->json['value'] = $this->value();
97	$this->json['link'] = $this->get_link();
98	$this->json['choices'] = $this->choices;
99
100	$this->json['inputAttrs'] = '';
101	foreach ( $this->input_attrs as $attr => $value ) {
102	$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
103	}
104
105	$this->json['responsive'] = $this->responsive;
106	$this->json['responsive_tabs'] = $this->responsive_tabs;
107	$this->json['unit_choices'] = $this->unit_choices;
108	$this->json['input_type'] = $this->input_type;
109	$this->json['inputs'] = $this->inputs;
110	$this->json['anchor'] = $this->anchor;
111	$this->json['default_anchor'] = $this->default_anchor;
112	}
113
114	/**
115	* Don't render the control content from PHP, as it's rendered via JS on load.
116	*/
117	public function render_content() {}
118
119	/**
120	* Render a JS template for control display.
121	*
122	* @see WP_Customize_Control::print_template()
123	*/
124	public function content_template() {
125	?>
126
127	<label>
128	<# var default_responsive = '' #>
129	<# if ( data.label ) { #>
130	<span class="customize-control-title">{{{ data.label }}}</span>
131	<# if( data.responsive == true) { #>
132	<ul class="responsive-tabs">
133	<# var count = 1 #>
134	<# Object.keys( data.responsive_tabs ).forEach( function( key ) { #>
135	<li><label class="responsive-tab-item" title="{{{data.responsive_tabs[key]['title']}}}"><input type='radio' value='{{{key}}}' name='{{{data.id}}}_responsive' {{{( count == 1)? 'checked="checked"' : '' }}} /><span class="responsive-switcher-{{{key}}}">
136	{{{data.responsive_tabs[key]['icon']}}}
137	</span></label></li>
138	<#
139	if( count == 1 )
140	default_responsive = key;
141	count++;
142	}); #>
143	</ul>
144	<# } #>
145	<# if( data.unit_choices.length !== 0 ) { #>
146	<ul class="dimension-units">
147	<#
148	var count = 1;
149	var selected_unit = ""
150	if( data.responsive == false ) {
151	selected_unit = data.value['unit'];
152	} else {
153	selected_unit = ( data.value[default_responsive] != undefined ) ? data.value[default_responsive]['unit'] : undefined;
154	}
155	#>
156	<# Object.keys( data.unit_choices ).forEach( function( key ) { #>
157	<li>
158	<label class="dimension-unit-item" title="{{{data.unit_choices[key]}}}">
159	<input type='radio' value='{{{key}}}' name='{{{data.id}}}_unit' {{{( ( selected_unit!=undefined && selected_unit==key ) \|\| count == 1)? 'checked="checked"' : '' }}} />
160	<span class="unit-switcher">{{{data.unit_choices[key]}}}</span>
161	</label>
162	</li>
163	<#
164	count++
165	}); #>
166	</ul>
167	<# } #>
168	<# } #>
169	</label>
170
171	<div class="dimension-wrapper">
172	<# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><#
173	} #>
174	<div class="dimension-input-wrapper">
175	<ul class="dimension-inputs">
176	<# var prev_val = null #>
177	<# Object.keys( data.inputs ).forEach( function( key ) { #>
178	<#
179	var value = "";
180	if( data.responsive == false ) {
181	value = data.value[key];
182	}else{
183	value = ( data.value[default_responsive] != undefined ) ? data.value[default_responsive][key] : '';
184	}
185	if( value!=undefined ) {
186	if( data.default_anchor && prev_val!=null && prev_val != value ) {
187	data.default_anchor = false;
188	}
189	prev_val = value;
190	}
191
192	#>
193	<li><input type='{{{data.input_type}}}' name='{{{key}}}' value='{{{value}}}' {{{ data.inputAttrs }}} class='dimension-input' id='{{{data.id}}}-{{{key}}}' /><label for="{{{data.id}}}-{{{key}}}">{{{data.inputs[key]}}}</label></li>
194	<# }); #>
195	<# if( data.anchor == true ) { #>
196	<li>
197	<label class="dimension-anchor-wrapper {{{(data.default_anchor==true) ? 'linked' : 'unlinked' }}}">
198	<span class="linked-icon">
199	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M17.74 2.76c1.68 1.69 1.68 4.41 0 6.1l-1.53 1.52c-1.12 1.12-2.7 1.47-4.14 1.09l2.62-2.61.76-.77.76-.76c.84-.84.84-2.2 0-3.04-.84-.85-2.2-.85-3.04 0l-.77.76-3.38 3.38c-.37-1.44-.02-3.02 1.1-4.14l1.52-1.53c1.69-1.68 4.42-1.68 6.1 0zM8.59 13.43l5.34-5.34c.42-.42.42-1.1 0-1.52-.44-.43-1.13-.39-1.53 0l-5.33 5.34c-.42.42-.42 1.1 0 1.52.44.43 1.13.39 1.52 0zm-.76 2.29l4.14-4.15c.38 1.44.03 3.02-1.09 4.14l-1.52 1.53c-1.69 1.68-4.41 1.68-6.1 0-1.68-1.68-1.68-4.42 0-6.1l1.53-1.52c1.12-1.12 2.7-1.47 4.14-1.1l-4.14 4.15c-.85.84-.85 2.2 0 3.05.84.84 2.2.84 3.04 0z"/></g></svg>
200	</span>
201	<span class="unlinked-icon">
202	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M17.74 2.26c1.68 1.69 1.68 4.41 0 6.1l-1.53 1.52c-.32.33-.69.58-1.08.77L13 10l1.69-1.64.76-.77.76-.76c.84-.84.84-2.2 0-3.04-.84-.85-2.2-.85-3.04 0l-.77.76-.76.76L10 7l-.65-2.14c.19-.38.44-.75.77-1.07l1.52-1.53c1.69-1.68 4.42-1.68 6.1 0zM2 4l8 6-6-8zm4-2l4 8-2-8H6zM2 6l8 4-8-2V6zm7.36 7.69L10 13l.74 2.35-1.38 1.39c-1.69 1.68-4.41 1.68-6.1 0-1.68-1.68-1.68-4.42 0-6.1l1.39-1.38L7 10l-.69.64-1.52 1.53c-.85.84-.85 2.2 0 3.04.84.85 2.2.85 3.04 0zM18 16l-8-6 6 8zm-4 2l-4-8 2 8h2zm4-4l-8-4 8 2v2z"/></g></svg>
203	</span>
204	<input type="checkbox" class='dimension-anchor' {{{(data.default_anchor==true) ? checked='checked' : '' }}} />
205	</label>
206	</li>
207	<# } #>
208	<li>
209	<div class="customize-control-content">
210	<div class="everest-forms-dimension"></div>
211	<div class="everest-forms-dimension-reset">
212	<span class="reset dashicons dashicons-image-rotate"></span>
213	</div>
214	</div>
215	</li>
216	</ul>
217	</div>
218	</div>
219
220	<input class="dimension-hidden-value" type="hidden" {{{ data.link }}} value="{{{data.value}}}">
221	<?php
222	}
223
224	/**
225	* Gives default responsive tabs
226	*
227	* @return array
228	*/
229	public function get_default_responsive_tabs() {
230	return array(
231	'desktop' => array(
232	'title' => esc_attr__( 'Desktop', 'everest-forms' ),
233	'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15,12V2H1V12H6v1H5v1h6V13H10V12ZM2,11V3H14v8Z"/></svg>',
234	),
235	'tablet' => array(
236	'title' => esc_attr__( 'Tablet', 'everest-forms' ),
237	'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2,1V15H14V1ZM9,14H7V13H9Zm4-2H3V2H13Z"/></svg>',
238	),
239	'mobile' => array(
240	'title' => esc_attr__( 'Mobile', 'everest-forms' ),
241	'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3,1V15H13V1ZM9,14H7V13H9Zm3-2H4V2h8Z"/></svg>',
242	),
243	);
244	}
245
246	/**
247	* Gives default inputs
248	*
249	* @return array
250	*/
251	public function get_default_inputs() {
252	return array(
253	'top' => esc_attr__( 'Top', 'everest-forms' ),
254	'right' => esc_attr__( 'Right', 'everest-forms' ),
255	'bottom' => esc_attr__( 'Bottom', 'everest-forms' ),
256	'left' => esc_attr__( 'Left', 'everest-forms' ),
257	);
258	}
259	}
260