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

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

463 lines 16.6 KB

Raw Download Zip

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