← All changes | includes/Frontend/Form/View/Theme/Fields/CountryField.php +236 -163 2.0 → V3.3.2 View file →

		@@ -1,215 +1,288 @@
1	1	<?php
2	2
3	3	namespace BitCode\BitForm\Frontend\Form\View\Theme\Fields;
4	4
5		-class CountryField {
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);
	5	+class CountryField
	6	+{
	7	+ public static function init($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
	8	+ {
	9	+ $inputWrapper = new ClassicInputWrapper($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
8	10	$input = self::field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error, $value);
9	11	return $inputWrapper->wrapper($input);
10	12	}
11	13
12		- private static function field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null) {
13		- $fieldHelpers = new FieldHelpers($field, $rowID, $form_atomic_Cls_map);
	14	+ private static function field($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
	15	+ {
	16	+ $fieldHelpers = new ClassicFieldHelpers($field, $rowID, $form_atomic_Cls_map);
14	17	$asset_url = BITFORMS_ASSET_URI;
15		- $img_url = BITFORMS_ASSET_URI . '/../static/countries/';
	18	+ $img_url = BITFORMS_ROOT_URI . '/static/countries/';
16	19	$req = $fieldHelpers->required();
17	20	$disabled = $fieldHelpers->disabled();
18	21	$readonly = $fieldHelpers->readonly();
19	22	$name = $fieldHelpers->name();
20		- // $ph = $fieldHelpers->placeholder();
	23	+ $ariaDescribedBy = $fieldHelpers->ariaDescribedBy();
	24	+ $ariaRequired = $fieldHelpers->ariaRequired();
21	25	$selectedFlagImage = '';
22	26	$tabIndx = isset($field->disabled) ? -1 : 0;
23	27	$selectedCountryClearable = '';
24	28	$searchPlaceholder = '';
25	29	$searchClearable = '';
26		- $ph = isset($field->ph) ? $field->ph : '';
27	30	$options = '';
28	31	$readonlyCls = isset($field->readonly) ? 'readonly' : '';
29	32	$disabledCls = isset($field->disabled) ? 'disabled' : '';
30		- $img = htmlentities("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>");
31	33	$val = $fieldHelpers->value();
32	34
	35	+ $selectedItm = null;
	36	+ foreach ($field->options as $opt) {
	37	+ if (isset($opt->check) && true === $opt->check) {
	38	+ $selectedItm = $opt;
	39	+ break;
	40	+ }
	41	+ }
	42	+ if ($selectedItm) {
	43	+ $img = $img_url . $selectedItm->img;
	44	+ $ph = $selectedItm->lbl;
	45	+ } else {
	46	+ $img = esc_url(includes_url('images/blank.gif'));
	47	+ $ph = isset($field->ph) ? $field->ph : '';
	48	+ }
	49	+
33	50	if ($fieldHelpers->property_exists_nested($field, 'config->selectedFlagImage', true)) {
34		- $selectedItm = null;
35		- foreach ($field->options as $opt) {
36		- if (isset($opt->check) && true === $opt->check) {
37		- $selectedItm = $opt;
38		- break;
39		- }
40		- }
41		- if ($selectedItm) {
42		- $img = $img_url . $selectedItm->img;
43		- $ph = $selectedItm->lbl;
44		- }
45		- $selectedFlagImage = <<<FLAGIMAGE
46		- <div class="{$fieldHelpers->getAtomicCls('selected-country-wrp')}">
47		- <img
48		- class="{$fieldHelpers->getAtomicCls('selected-country-img')} {$fieldHelpers->getCustomClasses('selected-country-img')}"
	51	+ $img = sprintf(
	52	+ '<img
	53	+ %1$s
	54	+ class="%2$s %3$s"
49	55	aria-hidden="true"
50	56	alt="selected country flag"
51		- src="{$img}"
52		- {$fieldHelpers->getCustomAttributes('selected-country-img')}
53		- >
	57	+ src="%4$s"
	58	+ >',
	59	+ $fieldHelpers->getCustomAttributes('selected-country-img'),
	60	+ $fieldHelpers->getAtomicCls('selected-country-img'),
	61	+ $fieldHelpers->getCustomClasses('selected-country-img'),
	62	+ $img
	63	+ );
	64	+ } else {
	65	+ $img = '';
	66	+ }
	67	+
	68	+ $selectedFlagImage = sprintf(
	69	+ '<div class="%1$s">
	70	+ %2$s
54	71	<span
55		- class="{$fieldHelpers->getAtomicCls('selected-country-lbl')} {$fieldHelpers->getCustomClasses('selected-country-lbl')}"
56		- {$fieldHelpers->getCustomAttributes('selected-country-lbl')}
	72	+ %3$s
	73	+ class="%4$s %5$s"
57	74	>
58		- {$ph}
	75	+ %6$s
59	76	</span>
60		- </div>
61		-FLAGIMAGE;
62		- }
	77	+ </div>',
	78	+ $fieldHelpers->getAtomicCls('selected-country-wrp'),
	79	+ $img,
	80	+ $fieldHelpers->getCustomAttributes('selected-country-lbl'),
	81	+ $fieldHelpers->getAtomicCls('selected-country-lbl'),
	82	+ $fieldHelpers->getCustomClasses('selected-country-lbl'),
	83	+ $fieldHelpers->esc_html($ph)
	84	+ );
63	85
64	86	if ($fieldHelpers->property_exists_nested($field, 'config->selectedCountryClearable', true)) {
65		- $selectedCountryClearable = <<<CLEARABLE
66		- <button
67		- type="button"
68		- title="Clear selected country value"
69		- class="{$fieldHelpers->getAtomicCls('inp-clr-btn')} {$fieldHelpers->getCustomClasses('inp-clr-btn')}"
70		- {$fieldHelpers->getCustomAttributes('inp-clr-btn')}
71		- >
72		- <svg
73		- width="15"
74		- height="15"
75		- role="img"
76		- title="Cross icon"
77		- viewBox="0 0 24 24"
78		- fill="none"
79		- stroke="currentColor"
80		- stroke-width="2"
81		- stroke-linecap="round"
82		- stroke-linejoin="round"
	87	+ $selectedCountryClearable = sprintf(
	88	+ '<button
	89	+ %1$s
	90	+ type="button"
	91	+ title="Clear selected country value"
	92	+ class="%2$s %3$s"
83	93	>
84		- <line x1="18" y1="6" x2="6" y2="18" />
85		- <line x1="6" y1="6" x2="18" y2="18" />
86		- </svg>
87		- </button>
88		-CLEARABLE;
	94	+ <svg
	95	+ width="15"
	96	+ height="15"
	97	+ role="img"
	98	+ title="Cross icon"
	99	+ viewBox="0 0 24 24"
	100	+ fill="none"
	101	+ stroke="currentColor"
	102	+ stroke-width="2"
	103	+ stroke-linecap="round"
	104	+ stroke-linejoin="round"
	105	+ >
	106	+ <line x1="18" y1="6" x2="6" y2="18" />
	107	+ <line x1="6" y1="6" x2="18" y2="18" />
	108	+ </svg>
	109	+ </button>',
	110	+ $fieldHelpers->getCustomAttributes('inp-clr-btn'),
	111	+ $fieldHelpers->getAtomicCls('inp-clr-btn'),
	112	+ $fieldHelpers->getCustomClasses('inp-clr-btn')
	113	+ );
89	114	}
90	115
91	116	if ($fieldHelpers->property_exists_nested($field, 'config->searchPlaceholder', '', 1)) {
92		- $searchPlaceholder = "placeholder='{$field->config->searchPlaceholder}'";
	117	+ $searchPlaceholder = "placeholder='{$fieldHelpers->esc_attr($field->config->searchPlaceholder)}'";
93	118	}
94	119
95	120	if ($fieldHelpers->property_exists_nested($field, 'config->searchClearable', true)) {
96		- $searchClearable = <<<CLEARABLE
97		- <button
98		- type="button"
99		- title="Clear search"
100		- class="{$fieldHelpers->getAtomicCls('icn')} {$fieldHelpers->getAtomicCls('search-clear-btn')} {$fieldHelpers->getCustomClasses('search-clear-btn')}"
101		- {$fieldHelpers->getCustomAttributes('search-clear-btn')}
102		- tabIndex="-1"
103		- >
104		- <svg
105		- width="13"
106		- height="13"
107		- role="img"
108		- title="Cross icon"
109		- viewBox="0 0 24 24"
110		- fill="none"
111		- stroke="currentColor"
112		- stroke-width="2"
113		- stroke-linecap="round"
114		- stroke-linejoin="round"
	121	+ $searchClearable = sprintf(
	122	+ '<button
	123	+ %1$s
	124	+ type="button"
	125	+ title="Clear search"
	126	+ class="%2$s %3$s %4$s"
	127	+ tabIndex="-1"
115	128	>
116		- <line x1="18" y1="6" x2="6" y2="18" />
117		- <line x1="6" y1="6" x2="18" y2="18" />
118		- </svg>
119		- </button>
120		-CLEARABLE;
	129	+ <svg
	130	+ width="13"
	131	+ height="13"
	132	+ role="img"
	133	+ title="Cross icon"
	134	+ viewBox="0 0 24 24"
	135	+ fill="none"
	136	+ stroke="currentColor"
	137	+ stroke-width="2"
	138	+ stroke-linecap="round"
	139	+ stroke-linejoin="round"
	140	+ >
	141	+ <line x1="18" y1="6" x2="6" y2="18" />
	142	+ <line x1="6" y1="6" x2="18" y2="18" />
	143	+ </svg>
	144	+ </button>',
	145	+ $fieldHelpers->getCustomAttributes('search-clear-btn'),
	146	+ $fieldHelpers->getAtomicCls('icn'),
	147	+ $fieldHelpers->getAtomicCls('search-clear-btn'),
	148	+ $fieldHelpers->getCustomClasses('search-clear-btn')
	149	+ );
121	150	}
122	151
123		- return <<<COUNTRYFIELD
124		- <div class="{$fieldHelpers->getAtomicCls('country-fld-container')}">
125		- <div class="{$fieldHelpers->getAtomicCls('country-fld-wrp')} {$fieldHelpers->getCustomClasses('country-fld-wrp')} {$disabled} {$readonly}"
126		- {$fieldHelpers->getCustomAttributes('country-fld-wrp')}
127		- >
128		- <input
129		- {$name}
130		- {$req}
131		- type="hidden"
132		- class="{$fieldHelpers->getAtomicCls('country-hidden-input')}"
133		- {$disabled}
134		- {$readonly}
135		- {$val}
136		- />
	152	+ return sprintf(
	153	+ '<div class="%1$s">
137	154	<div
138		- class="{$fieldHelpers->getAtomicCls('dpd-wrp')}"
139		- aria-live="assertive"
140		- aria-label="Select a Country"
141		- role="combobox"
142		- aria-expanded="false"
143		- tabIndex={$tabIndx}
	155	+ %2$s
	156	+ class="%3$s %4$s %5$s %6$s"
144	157	>
145		- {$selectedFlagImage}
146		-
147		- <div class="{$fieldHelpers->getAtomicCls('dpd-btn-wrp')}">
148		- {$selectedCountryClearable}
149		- <div class="{$fieldHelpers->getAtomicCls('dpd-down-btn')}">
150		- <svg
151		- width="15"
152		- height="15"
153		- viewBox="0 0 24 24"
154		- title="Cross icon"
155		- role="img"
156		- fill="none"
157		- stroke="currentColor"
158		- stroke-width="2"
159		- stroke-linecap="round"
160		- stroke-linejoin="round"
161		- >
162		- <polyline points="6 9 12 15 18 9" />
163		- </svg>
	158	+ <input
	159	+ %7$s
	160	+ %8$s
	161	+ %9$s
	162	+ %10$s
	163	+ data-field-key="%38$s"
	164	+ type="text"
	165	+ title="Country Hidden Input"
	166	+ class="%11$s d-none"
	167	+ %12$s
	168	+ %13$s
	169	+ %14$s
	170	+ />
	171	+ <div
	172	+ class="%15$s"
	173	+ aria-live="assertive"
	174	+ aria-label="Select a Country"
	175	+ role="combobox"
	176	+ aria-haspopup="listbox"
	177	+ aria-expanded="false"
	178	+ tabIndex="%16$s"
	179	+ >
	180	+ %17$s
	181	+ <div class="%18$s">
	182	+ %19$s
	183	+ <div class="%20$s">
	184	+ <svg
	185	+ width="15"
	186	+ height="15"
	187	+ viewBox="0 0 24 24"
	188	+ title="Cross icon"
	189	+ role="img"
	190	+ fill="none"
	191	+ stroke="currentColor"
	192	+ stroke-width="2"
	193	+ stroke-linecap="round"
	194	+ stroke-linejoin="round"
	195	+ >
	196	+ <polyline points="6 9 12 15 18 9" />
	197	+ </svg>
	198	+ </div>
164	199	</div>
165	200	</div>
166		- </div>
167		- <div class="{$fieldHelpers->getAtomicCls('option-wrp')} {$fieldHelpers->getCustomClasses('option-wrp')}"
168		- {$fieldHelpers->getCustomAttributes('option-wrp')}
169		- >
170		- <div class="{$fieldHelpers->getAtomicCls('option-inner-wrp')}">
171		- <div class="{$fieldHelpers->getAtomicCls('option-search-wrp')}">
172		- <input
173		- type="search"
174		- class="{$fieldHelpers->getAtomicCls('opt-search-input')} {$fieldHelpers->getCustomClasses('opt-search-input')}"
175		- {$searchPlaceholder}
176		- autoComplete="country-name"
	201	+ <div
	202	+ %21$s
	203	+ class="%22$s %23$s"
	204	+ >
	205	+ <div class="%24$s">
	206	+ <div class="%25$s">
	207	+ <input
	208	+ %26$s
	209	+ type="search"
	210	+ class="%27$s %28$s"
	211	+ %29$s
	212	+ autoComplete="country-name"
	213	+ tabIndex="-1"
	214	+ />
	215	+ <svg
	216	+ %30$s
	217	+ class="%31$s %32$s"
	218	+ aria-hidden="true"
	219	+ width="22"
	220	+ height="22"
	221	+ role="img"
	222	+ title="Search icon"
	223	+ viewBox="0 0 24 24"
	224	+ fill="none"
	225	+ stroke="currentColor"
	226	+ stroke-width="2"
	227	+ stroke-linecap="round"
	228	+ stroke-linejoin="round"
	229	+ >
	230	+ <circle cx="11" cy="11" r="8" />
	231	+ <line x1="21" y1="21" x2="16.65" y2="16.65" />
	232	+ </svg>
	233	+ %33$s
	234	+ </div>
	235	+ <ul
	236	+ %34$s
	237	+ class="%35$s %36$s"
177	238	tabIndex="-1"
178		- {$fieldHelpers->getCustomAttributes('opt-search-input')}
179		- />
180		- <svg
181		- class="{$fieldHelpers->getAtomicCls('opt-search-icn')} {$fieldHelpers->getCustomClasses('opt-search-icn')}"
182		- aria-hidden="true"
183		- width="22"
184		- height="22"
185		- role="img"
186		- title="Search icon"
187		- viewBox="0 0 24 24"
188		- fill="none"
189		- stroke="currentColor"
190		- stroke-width="2"
191		- stroke-linecap="round"
192		- stroke-linejoin="round"
193		- {$fieldHelpers->getCustomAttributes('opt-search-icn')}
	239	+ role="listbox"
	240	+ aria-label="country list"
194	241	>
195		- <circle cx="11" cy="11" r="8" />
196		- <line x1="21" y1="21" x2="16.65" y2="16.65" />
197		- </svg>
198		- {$searchClearable}
	242	+ %37$s
	243	+ </ul>
199	244	</div>
200		- <ul
201		- class="{$fieldHelpers->getAtomicCls('option-list')} {$fieldHelpers->getCustomClasses('option-list')}"
202		- {$fieldHelpers->getCustomAttributes('option-list')}
203		- tabIndex="-1"
204		- role="listbox"
205		- aria-label="country list"
206		- >
207		- {$options}
208		- </ul>
209	245	</div>
210	246	</div>
211		- </div>
212		- </div>
213		-COUNTRYFIELD;
	247	+ </div>',
	248	+ $fieldHelpers->getAtomicCls('country-fld-container'), // 1
	249	+ $fieldHelpers->getCustomAttributes('country-fld-wrp'), // 2
	250	+ $fieldHelpers->getAtomicCls('country-fld-wrp'), // 3
	251	+ $fieldHelpers->getCustomClasses('country-fld-wrp'), // 4
	252	+ $disabled, // 5
	253	+ $readonly, // 6
	254	+ $name, // 7
	255	+ $req, // 8
	256	+ $ariaRequired, // 9
	257	+ $ariaDescribedBy, // 10
	258	+ $fieldHelpers->getAtomicCls('country-hidden-input'), // 11
	259	+ $disabled, // 12
	260	+ $readonly, // 13
	261	+ $val, // 14
	262	+ $fieldHelpers->getAtomicCls('dpd-wrp'), // 15
	263	+ $tabIndx, // 16
	264	+ $selectedFlagImage, // 17
	265	+ $fieldHelpers->getAtomicCls('dpd-btn-wrp'), // 18
	266	+ $selectedCountryClearable, // 19
	267	+ $fieldHelpers->getAtomicCls('dpd-down-btn'), // 20
	268	+ $fieldHelpers->getCustomAttributes('option-wrp'), // 21
	269	+ $fieldHelpers->getAtomicCls('option-wrp'), // 22
	270	+ $fieldHelpers->getCustomClasses('option-wrp'), // 23
	271	+ $fieldHelpers->getAtomicCls('option-inner-wrp'), // 24
	272	+ $fieldHelpers->getAtomicCls('option-search-wrp'), // 25
	273	+ $fieldHelpers->getCustomAttributes('opt-search-input'), // 26
	274	+ $fieldHelpers->getAtomicCls('opt-search-input'), // 27
	275	+ $fieldHelpers->getCustomClasses('opt-search-input'), // 28
	276	+ $searchPlaceholder, // 29
	277	+ $fieldHelpers->getCustomAttributes('opt-search-icn'), // 30
	278	+ $fieldHelpers->getAtomicCls('opt-search-icn'), // 31
	279	+ $fieldHelpers->getCustomClasses('opt-search-icn'), // 32
	280	+ $searchClearable, // 33
	281	+ $fieldHelpers->getCustomAttributes('option-list'), // 34
	282	+ $fieldHelpers->getAtomicCls('option-list'), // 35
	283	+ $fieldHelpers->getCustomClasses('option-list'), // 36
	284	+ $options, // 37
	285	+ $rowID // 38
	286	+ );
214	287	}
215	288	}