bit-form / includes / Frontend / Form / View / Theme / Fields / DropdownField.php

DropdownField.php in Bit Form – Contact Form, Payment Forms, Multi Step Forms, Calculator & Custom Form Builder 2.9.1, at includes/Frontend/Form/View/Theme/Fields/DropdownField.php

380 lines 13.7 KB

Raw Download Zip

1	<?php
2
3	namespace BitCode\BitForm\Frontend\Form\View\Theme\Fields;
4
5	use BitCode\BitForm\Frontend\Form\View\Theme\Fields\FieldHelpers;
6
7	class DropdownField
8	{
9	public static function init($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
10	{
11	$inputWrapper = new InputWrapper($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
12	$input = self::field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
13	return $inputWrapper->wrapper($input);
14	}
15
16	private static function field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
17	{
18	$fh = new FieldHelpers($field, $rowID, $form_atomic_Cls_map);
19	$ph = isset($field->ph) ? $field->ph : '';
20	$val = !empty($value) ? $value : $fh->value();
21	$val = 'array' === gettype($val) ? ("value='" . implode(',', $val) . "'") : $val;
22	$name = $fh->name();
23	$req = $fh->required();
24	$readonlyCls = isset($field->valid->readonly) ? 'readonly' : '';
25	$disabledCls = isset($field->valid->disabled) ? 'disabled' : '';
26	$selectedOptImage = '';
27	$optionsList = '';
28	$activeList = isset($field->config->activeList) ? $field->config->activeList : null;
29	$optionIcon = '';
30	$allowCustomOption = isset($field->config->allowCustomOption) ? $field->config->allowCustomOption : false;
31	$img = htmlentities("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>");
32
33	if ($fh->property_exists_nested($field, 'config->optionIcon', true)) {
34	$optionIcon = <<<OPTIONICON
35	<img
36	{$fh->getCustomAttributes('opt-icn')}
37	class="opt-icn {$fh->getCustomClasses('opt-icn')}"
38	src="{$img}"
39	alt="BD"
40	loading="lazy"
41	/>
42
43	OPTIONICON;
44	}
45
46	if ($fh->property_exists_nested($field, 'config->selectedOptImage', true)) {
47	$selectedOptImage = <<<SELECTEDoPTIMAGE
48	<img
49	{$fh->getCustomAttributes('selected-opt-img')}
50	class="{$fh->getAtomicCls('selected-opt-img')} placeholder-img {$fh->getCustomClasses('selected-opt-img')}"
51	aria-hidden="true"
52	alt="selected option icon"
53	src="{$img}"
54	>
55	SELECTEDoPTIMAGE;
56	}
57
58	if (property_exists($field, 'optionsList')) {
59	foreach ($field->optionsList as $key => $value) {
60	$dataIndex = 0;
61	$valueArr = (array) $value;
62	$listName = array_keys($valueArr)[0];
63	$options = array_values($valueArr)[0];
64
65	$optionsList .= <<<OPTIONSLIST
66	<ul
67	{$fh->getCustomAttributes('option-list')}
68	class="{$fh->getAtomicCls('option-list')} {$fh->getCustomClasses('option-list')}"
69	aria-hidden="true"
70	aria-label="Option List"
71	data-list="{$fh->esc_attr($listName)}"
72	data-list-index="{$key}"
73	tabIndex="-1"
74	role="listbox"
75	>
76	OPTIONSLIST;
77	if ($allowCustomOption) {
78	$optionsList .= <<<CREATEOPT
79	<li
80	{$fh->getCustomAttributes('option')}
81	data-index={$dataIndex}
82	data-value="create-opt"
83	class="option create-opt {$fh->getCustomClasses('option')}"
84	role="option"
85	aria-selected="false"
86	tabIndex="-1"
87	style="display: none !important;"
88	>
89	<span
90	{$fh->getCustomAttributes('opt-lbl-wrp')}
91	class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
92	>
93	<span
94	{$fh->getCustomAttributes('opt-lbl')}
95	class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
96	>
97	Create:
98	</span>
99	</span>
100	<span class="opt-prefix"></span>
101	</li>
102	CREATEOPT;
103	}
104
105	foreach ($options as $opt) {
106	if (isset($opt->type)) {
107	$disableOpt = isset($opt->disabled) ? 'disabled-opt' : '';
108	$optionsList .= <<<OPTIOINS
109	<li data-index={$dataIndex}
110	{$fh->getCustomAttributes('option')}
111	class="option opt-group-title {$fh->getCustomClasses('option')} {$disableOpt}"
112	>
113	<span
114	{$fh->getCustomAttributes('opt-lbl')}
115	class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
116	>
117	{$fh->kses_post($opt->title)}
118	</span>
119	</li>
120
121	OPTIOINS;
122	foreach ($opt->childs as $child) {
123	$optVal = isset($child->val) ? $child->val : $child->lbl;
124	$disableOpt = (isset($opt->disabled) \|\| isset($child->disabled)) ? 'disabled-opt' : '';
125	$optImage = '';
126	if (isset($child->img)) {
127	$optImage = <<<OPTIMAGE
128	<img
129	{$fh->getCustomAttributes('opt-icn')}
130	class="opt-icn {$fh->getCustomClasses('opt-icn')}"
131	aria-hidden="true"
132	alt="{$fh->esc_attr($child->lbl)}"
133	src="{$fh->esc_url($child->img)}"
134	>
135	OPTIMAGE;
136	}
137	$optionsList .= <<<OPTIONS_CHILDREN
138	<li
139	{$fh->getCustomAttributes('option')}
140	data-index="{$dataIndex}"
141	data-value="{$fh->esc_attr($optVal)}"
142	class="option opt-group-child {$fh->getCustomClasses('option')} {$disableOpt}"
143	role="option"
144	aria-selected="false"
145	tabIndex="-1"
146	>
147	<span
148	{$fh->getCustomAttributes('opt-lbl-wrp')}
149	class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
150	>
151	{$optImage}
152	<span
153	{$fh->getCustomAttributes('opt-lbl')}
154	class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
155	>
156	{$fh->kses_post($child->lbl)}
157	</span>
158	</span>
159	<span class="opt-prefix" />
160	</li>
161	OPTIONS_CHILDREN;
162	}
163	} else {
164	$optVal = isset($opt->val) ? $opt->val : $opt->lbl;
165	$disableOpt = isset($opt->disabled) ? 'disabled-opt' : '';
166	$optImage = '';
167	if (isset($opt->img)) {
168	$optImage = <<<OPTIMAGE
169	<img
170	{$fh->getCustomAttributes('opt-icn')}
171	class="opt-icn {$fh->getCustomClasses('opt-icn')}"
172	aria-hidden="true"
173	alt="{$fh->esc_attr($opt->lbl)}"
174	src="{$fh->esc_url($opt->img)}"
175	>
176	OPTIMAGE;
177	}
178	$optionsList .= <<<OPTIONS
179	<li
180	{$fh->getCustomAttributes('option')}
181	data-index="{$dataIndex}"
182	data-value="{$fh->esc_attr($optVal)}"
183	class="option {$fh->getCustomClasses('option')} {$disableOpt}"
184	role="option"
185	aria-selected="false"
186	tabIndex="-1"
187	>
188	<span
189	{$fh->getCustomAttributes('opt-lbl-wrp')}
190	class="opt-lbl-wrp {$fh->getCustomClasses('opt-lbl-wrp')}"
191	>
192	{$optImage}
193	<span
194	{$fh->getCustomAttributes('opt-lbl')}
195	class="opt-lbl {$fh->getCustomClasses('opt-lbl')}"
196	>
197	{$fh->kses_post($opt->lbl)}
198	</span>
199	</span>
200	<span class="opt-prefix" />
201	</li>
202	OPTIONS;
203	}
204	}
205	$optionsList .= '</ul>';
206	$dataIndex++;
207	}
208
209	$optionsList .= <<<OPTIONSLIST
210	<ul
211	{$fh->getCustomAttributes('option-list')}
212	class="{$fh->getAtomicCls('option-list')} {$fh->getCustomClasses('option-list')} active-list"
213	aria-hidden="true"
214	aria-label="Option List"
215	tabIndex="-1"
216	role="listbox"
217	>
218	</ul>
219	OPTIONSLIST;
220
221	$multiChipClass = ($fh->property_exists_nested($field, 'config->multipleSelect', true) && $fh->property_exists_nested($field, 'config->showChip', true)) ? 'multi-chip' : '';
222
223	return <<<DROPDOWNFIELD
224	<div class="{$fh->getAtomicCls('dpd-fld-container')} {$fh->getCustomClasses('dpd-fld-container')}">
225	<div
226	{$fh->getCustomAttributes('dpd-fld-wrp')}
227	class="{$fh->getAtomicCls('dpd-fld-wrp')} {$fh->getCustomClasses('dpd-fld-wrp')} {$readonlyCls} {$disabledCls}"
228	>
229	<input
230	{$name}
231	{$req}
232	type="text"
233	title="Dropdown Hidden Input"
234	class="{$fh->getAtomicCls('dpd-hidden-input')} d-none"
235	{$fh->disabled()}
236	{$fh->readonly()}
237	{$val}
238	/>
239	<div
240	{$fh->getCustomAttributes('dpd-wrp')}
241	class="{$fh->getAtomicCls('dpd-wrp')} {$fh->getCustomClasses('dpd-wrp')}"
242	role="combobox"
243	aria-controls=""
244	aria-live="assertive"
245	aria-expanded="false"
246	tabIndex="0"
247	aria-label="Dropdown"
248	>
249	<div
250	{$fh->getCustomAttributes('selected-opt-wrp')}
251	class="{$fh->getAtomicCls('selected-opt-wrp')} {$fh->getCustomClasses('selected-opt-wrp')}"
252	>
253	{$selectedOptImage}
254	<span
255	{$fh->getCustomAttributes('selected-opt-lbl')}
256	aria-label="Selected Option Label"
257	class="{$fh->getAtomicCls('selected-opt-lbl')} {$multiChipClass} {$fh->getCustomClasses('selected-opt-lbl')}"
258	>
259	{$fh->esc_html($ph)}
260	</span>
261	</div>
262	<div
263	{$fh->getCustomAttributes('dpd-btn-wrp')}
264	class="{$fh->getAtomicCls('dpd-btn-wrp')} {$fh->getCustomClasses('dpd-btn-wrp')}"
265	>
266	<button
267	{$fh->getCustomAttributes('selected-opt-clear-btn')}
268	type="button"
269	aria-label="Clear selected option value"
270	class="{$fh->getAtomicCls('selected-opt-clear-btn')} {$fh->getCustomClasses('selected-opt-clear-btn')}"
271	>
272	<svg
273	width="15"
274	height="15"
275	role="img"
276	title="Cross icon"
277	viewBox="0 0 24 24"
278	fill="none"
279	stroke="currentColor"
280	stroke-width="2"
281	stroke-linecap="round"
282	stroke-linejoin="round"
283	>
284	<line x1="18" y1="6" x2="6" y2="18" />
285	<line x1="6" y1="6" x2="18" y2="18" />
286	</svg>
287	</button>
288	<div
289	{$fh->getCustomAttributes('dpd-down-btn')}
290	class="{$fh->getAtomicCls('dpd-down-btn')} {$fh->getCustomClasses('dpd-down-btn')}"
291	>
292	<svg
293	width="15"
294	height="15"
295	viewBox="0 0 24 24"
296	title="Down icon"
297	role="img"
298	fill="none"
299	stroke="currentColor"
300	stroke-width="2"
301	stroke-linecap="round"
302	stroke-linejoin="round"
303	>
304	<polyline points="6 9 12 15 18 9" />
305	</svg>
306	</div>
307	</div>
308	</div>
309	<div
310	{$fh->getCustomAttributes('option-wrp')}
311	class="{$fh->getAtomicCls('option-wrp')} {$fh->getCustomClasses('option-wrp')}"
312	>
313	<div
314	{$fh->getCustomAttributes('option-inner-wrp')}
315	class="{$fh->getAtomicCls('option-inner-wrp')} {$fh->getCustomClasses('option-inner-wrp')}"
316	>
317	<div
318	{$fh->getCustomAttributes('option-search-wrp')}
319	class="{$fh->getAtomicCls('option-search-wrp')} {$fh->getCustomClasses('option-search-wrp')}"
320	>
321	<input
322	{$fh->getCustomAttributes('opt-search-input')}
323	type="search"
324	class="{$fh->getAtomicCls('opt-search-input')} {$fh->getCustomClasses('opt-search-input')}"
325	placeholder="Search Country"
326	aria-label="Search Options"
327	aria-hidden="true"
328	tabIndex="-1"
329	/>
330	<svg
331	{$fh->getCustomAttributes('opt-search-icn')}
332	class="{$fh->getAtomicCls('icn')} {$fh->getAtomicCls('opt-search-icn')} {$fh->getCustomClasses('opt-search-icn')}"
333	aria-hidden="true"
334	width="22"
335	height="22"
336	role="img"
337	title="Search icon"
338	viewBox="0 0 24 24"
339	fill="none"
340	stroke="currentColor"
341	stroke-width="2"
342	stroke-linecap="round"
343	stroke-linejoin="round"
344	>
345	<circle cx="11" cy="11" r="8" />
346	<line x1="21" y1="21" x2="16.65" y2="16.65" />
347	</svg>
348	<button
349	{$fh->getCustomAttributes('search-clear-btn')}
350	type="button"
351	aria-label="Clear search"
352	class="{$fh->getAtomicCls('icn')} {$fh->getAtomicCls('search-clear-btn')} {$fh->getCustomClasses('search-clear-btn')}"
353	tabIndex="-1"
354	>
355	<svg
356	width="13"
357	height="13"
358	role="img"
359	viewBox="0 0 24 24"
360	fill="none"
361	stroke="currentColor"
362	stroke-width="2"
363	stroke-linecap="round"
364	stroke-linejoin="round"
365	>
366	<line x1="18" y1="6" x2="6" y2="18" />
367	<line x1="6" y1="6" x2="18" y2="18" />
368	</svg>
369	</button>
370	</div>
371	{$optionsList}
372	</div>
373	</div>
374	</div>
375	</div>
376	DROPDOWNFIELD;
377	}
378	}
379	}
380