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

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