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

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

216 lines 7.7 KB

Raw Download Zip

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