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

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

229 lines 8.2 KB

Raw Download Zip

1	<?php
2
3	namespace BitCode\BitForm\Frontend\Form\View\Conversational\Fields;
4
5	class CountryField
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	$fieldHelpers = new ConversationalFieldHelpers($formID, $field, $rowID, $form_atomic_Cls_map);
17	$asset_url = BITFORMS_ASSET_URI;
18	$img_url = BITFORMS_ASSET_URI . '/../static/countries/';
19	$req = $fieldHelpers->required();
20	$disabled = $fieldHelpers->disabled();
21	$readonly = $fieldHelpers->readonly();
22	$name = $fieldHelpers->name();
23	$selectedFlagImage = '';
24	$tabIndx = isset($field->disabled) ? -1 : 0;
25	$selectedCountryClearable = '';
26	$searchPlaceholder = '';
27	$searchClearable = '';
28	$options = '';
29	$readonlyCls = isset($field->readonly) ? 'readonly' : '';
30	$disabledCls = isset($field->disabled) ? 'disabled' : '';
31	$val = $fieldHelpers->value();
32
33	$selectedItm = null;
34	foreach ($field->options as $opt) {
35	if (isset($opt->check) && true === $opt->check) {
36	$selectedItm = $opt;
37	break;
38	}
39	}
40	if ($selectedItm) {
41	$img = $img_url . $selectedItm->img;
42	$ph = $selectedItm->lbl;
43	} else {
44	$img = htmlentities("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>");
45	$ph = isset($field->ph) ? $field->ph : '';
46	}
47
48	if ($fieldHelpers->property_exists_nested($field, 'config->selectedFlagImage', true)) {
49	$img = <<<FLAGIMAGE
50	<img
51	{$fieldHelpers->getCustomAttributes('selected-country-img')}
52	class="{$fieldHelpers->getConversationalMultiCls('selected-country-img')} {$fieldHelpers->getCustomClasses('selected-country-img')}"
53	aria-hidden="true"
54	alt="selected country flag"
55	src="{$img}"
56	>
57	FLAGIMAGE;
58	} else {
59	$img = '';
60	}
61
62	$selectedFlagImage = <<<SELECTEDOPTLABEL
63	<div class="{$fieldHelpers->getConversationalMultiCls('selected-country-wrp')}">
64	{$img}
65	<span
66	{$fieldHelpers->getCustomAttributes('selected-country-lbl')}
67	class="{$fieldHelpers->getConversationalMultiCls('selected-country-lbl')} {$fieldHelpers->getCustomClasses('selected-country-lbl')}"
68	>
69	{$fieldHelpers->esc_html($ph)}
70	</span>
71	</div>
72	SELECTEDOPTLABEL;
73
74	if ($fieldHelpers->property_exists_nested($field, 'config->selectedCountryClearable', true)) {
75	$selectedCountryClearable = <<<CLEARABLE
76	<button
77	{$fieldHelpers->getCustomAttributes('inp-clr-btn')}
78	type="button"
79	title="Clear selected country value"
80	class="{$fieldHelpers->getConversationalMultiCls('inp-clr-btn')} {$fieldHelpers->getCustomClasses('inp-clr-btn')}"
81	>
82	<svg
83	width="15"
84	height="15"
85	role="img"
86	title="Cross icon"
87	viewBox="0 0 24 24"
88	fill="none"
89	stroke="currentColor"
90	stroke-width="2"
91	stroke-linecap="round"
92	stroke-linejoin="round"
93	>
94	<line x1="18" y1="6" x2="6" y2="18" />
95	<line x1="6" y1="6" x2="18" y2="18" />
96	</svg>
97	</button>
98	CLEARABLE;
99	}
100
101	if ($fieldHelpers->property_exists_nested($field, 'config->searchPlaceholder', '', 1)) {
102	$searchPlaceholder = "placeholder='{$fieldHelpers->esc_attr($field->config->searchPlaceholder)}'";
103	}
104
105	if ($fieldHelpers->property_exists_nested($field, 'config->searchClearable', true)) {
106	$searchClearable = <<<CLEARABLE
107	<button
108	{$fieldHelpers->getCustomAttributes('search-clear-btn')}
109	type="button"
110	title="Clear search"
111	class="{$fieldHelpers->getConversationalMultiCls('icn')} {$fieldHelpers->getConversationalMultiCls('search-clear-btn')} {$fieldHelpers->getCustomClasses('search-clear-btn')}"
112	tabIndex="-1"
113	>
114	<svg
115	width="13"
116	height="13"
117	role="img"
118	title="Cross icon"
119	viewBox="0 0 24 24"
120	fill="none"
121	stroke="currentColor"
122	stroke-width="2"
123	stroke-linecap="round"
124	stroke-linejoin="round"
125	>
126	<line x1="18" y1="6" x2="6" y2="18" />
127	<line x1="6" y1="6" x2="18" y2="18" />
128	</svg>
129	</button>
130	CLEARABLE;
131	}
132
133	return <<<COUNTRYFIELD
134	<div class="{$fieldHelpers->getConversationalMultiCls('country-fld-container')}">
135	<div
136	{$fieldHelpers->getCustomAttributes('country-fld-wrp')}
137	class="{$fieldHelpers->getConversationalMultiCls('country-fld-wrp')} {$fieldHelpers->getCustomClasses('country-fld-wrp')} {$disabled} {$readonly}"
138	>
139	<input
140	{$name}
141	{$req}
142	type="text"
143	title="Country Hidden Input"
144	class="{$fieldHelpers->getConversationalMultiCls('country-hidden-input')} d-none"
145	{$disabled}
146	{$readonly}
147	{$val}
148	/>
149	<div
150	class="{$fieldHelpers->getConversationalMultiCls('dpd-wrp')}"
151	aria-live="assertive"
152	aria-label="Select a Country"
153	role="combobox"
154	aria-expanded="false"
155	tabIndex={$tabIndx}
156	>
157	{$selectedFlagImage}
158
159	<div class="{$fieldHelpers->getConversationalMultiCls('dpd-btn-wrp')}">
160	{$selectedCountryClearable}
161	<div class="{$fieldHelpers->getConversationalMultiCls('dpd-down-btn')}">
162	<svg
163	width="15"
164	height="15"
165	viewBox="0 0 24 24"
166	title="Cross icon"
167	role="img"
168	fill="none"
169	stroke="currentColor"
170	stroke-width="2"
171	stroke-linecap="round"
172	stroke-linejoin="round"
173	>
174	<polyline points="6 9 12 15 18 9" />
175	</svg>
176	</div>
177	</div>
178	</div>
179	<div
180	{$fieldHelpers->getCustomAttributes('option-wrp')}
181	class="{$fieldHelpers->getConversationalMultiCls('option-wrp')} {$fieldHelpers->getCustomClasses('option-wrp')}"
182	>
183	<div class="{$fieldHelpers->getConversationalMultiCls('option-inner-wrp')}">
184	<div class="{$fieldHelpers->getConversationalMultiCls('option-search-wrp')}">
185	<input
186	{$fieldHelpers->getCustomAttributes('opt-search-input')}
187	type="search"
188	class="{$fieldHelpers->getConversationalMultiCls('opt-search-input')} {$fieldHelpers->getCustomClasses('opt-search-input')}"
189	{$searchPlaceholder}
190	autoComplete="country-name"
191	tabIndex="-1"
192	/>
193	<svg
194	{$fieldHelpers->getCustomAttributes('opt-search-icn')}
195	class="{$fieldHelpers->getConversationalMultiCls('icn')} {$fieldHelpers->getConversationalMultiCls('opt-search-icn')} {$fieldHelpers->getCustomClasses('opt-search-icn')}"
196	aria-hidden="true"
197	width="22"
198	height="22"
199	role="img"
200	title="Search icon"
201	viewBox="0 0 24 24"
202	fill="none"
203	stroke="currentColor"
204	stroke-width="2"
205	stroke-linecap="round"
206	stroke-linejoin="round"
207	>
208	<circle cx="11" cy="11" r="8" />
209	<line x1="21" y1="21" x2="16.65" y2="16.65" />
210	</svg>
211	{$searchClearable}
212	</div>
213	<ul
214	{$fieldHelpers->getCustomAttributes('option-list')}
215	class="{$fieldHelpers->getConversationalMultiCls('option-list')} {$fieldHelpers->getCustomClasses('option-list')}"
216	tabIndex="-1"
217	role="listbox"
218	aria-label="country list"
219	>
220	{$options}
221	</ul>
222	</div>
223	</div>
224	</div>
225	</div>
226	COUNTRYFIELD;
227	}
228	}
229