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.1.1, at includes/Frontend/Form/View/Conversational/Fields/DropdownField.php

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