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

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

227 lines 8.1 KB

Raw Download Zip

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