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

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

212 lines 7.2 KB

Raw Download Zip

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