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

373 lines 13.4 KB

Raw Download Zip

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