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

211 lines 7.1 KB

Raw Download Zip

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