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

201 lines 6.8 KB

Raw Download Zip

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