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

378 lines 13.7 KB

Raw Download Zip

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