← All changes | includes/Frontend/Form/View/Theme/Fields/ImageSelectField.php +166 -75 2.10.0 → V3.3.2 View file →

		@@ -29,15 +29,15 @@
29	29	}
30	30	if (!empty($value) && false !== strpos($value, BITFORMS_BF_SEPARATOR)) {
31	31	$defaultValues = explode(BITFORMS_BF_SEPARATOR, $value);
32	32	} else {
33		- $defaultValues = !empty($value) ? explode(',', $value) : [];
	33	+ $defaultValues = isset($value) ? explode(',', $value) : [];
34	34	}
35	35
36	36	if (isset($field->opt)) {
37	37	$checkedImg = $field->tickImgSrc;
38	38	foreach ($field->opt as $key => $opt) {
39		- $val = !empty($opt->val) ? $opt->val : $opt->lbl;
	39	+ $val = isset($opt->val) ? $opt->val : $opt->lbl;
40	40	$img = $opt->img;
41	41	$lbl = $fieldHelpers->renderHTMR($opt->lbl);
42	42	$checked = '';
43	43	$inpType = $field->inpType;
		@@ -49,95 +49,186 @@
49	49	} elseif (in_array($val, $defaultValues)) {
50	50	$checked = 'checked';
51	51	}
52	52
	53	+ if ($fieldHelpers->property_exists_nested($field, 'valid->disabled', true)
	54	+ || $fieldHelpers->property_exists_nested($opt, 'disabled', true)) {
	55	+ $disabled = 'disabled';
	56	+ }
	57	+
53	58	if (isset($field->mx) && !empty($field->valid->disableOnMax) && !$checked && ((int) $field->mx <= count($defaultValues))) {
54	59	$disabled = 'disabled';
55	60	}
56	61
57		- $optLblHide = null;
	62	+ $optLblHide = '';
58	63
59	64	if (!$field->optLblHide) {
60		- $optLblHide = <<<OPTLBLHIDE
61		- <div
62		- class="{$fieldHelpers->getAtomicCls('tc')} {$fieldHelpers->getCustomClasses('tc')}"
63		- {$fieldHelpers->getCustomAttributes('tc')}
64		- >
65		- <span
66		- class="{$fieldHelpers->getAtomicCls('img-title')} {$fieldHelpers->getCustomClasses('img-title')}"
67		- {$fieldHelpers->getCustomAttributes('img-title')}
	65	+ $optLblHide = sprintf(
	66	+ '<div
	67	+ class="%1$s %2$s"
	68	+ %3$s
68	69	>
69		- {$fieldHelpers->kses_post($lbl)}
70		- </span>
71		- </div>
72		-OPTLBLHIDE;
73		- } else {
74		- $optLblHide = '';
	70	+ <span
	71	+ class="%4$s %5$s"
	72	+ %6$s
	73	+ >
	74	+ %7$s
	75	+ </span>
	76	+ </div>',
	77	+ $fieldHelpers->getAtomicCls('tc'),
	78	+ $fieldHelpers->getCustomClasses('tc'),
	79	+ $fieldHelpers->getCustomAttributes('tc'),
	80	+ $fieldHelpers->getAtomicCls('img-title'),
	81	+ $fieldHelpers->getCustomClasses('img-title'),
	82	+ $fieldHelpers->getCustomAttributes('img-title'),
	83	+ $fieldHelpers->kses_post($lbl)
	84	+ );
75	85	}
76	86
77		- $imageOption .= <<<IMAGESELECT
78		- <div
79		- class="{$fieldHelpers->getAtomicCls('inp-opt')} {$fieldHelpers->getCustomClasses('inp-opt')}"
80		- {$fieldHelpers->getCustomAttributes('inp-opt')}
	87	+ // Input element
	88	+ $inputHtml = sprintf(
	89	+ '<input
	90	+ class="%1$s %2$s"
	91	+ type="%3$s"
	92	+ id="%4$s-%5$s-img-wrp-%6$s"
	93	+ %7$s
	94	+ value="%8$s"
	95	+ %9$s
	96	+ %10$s
	97	+ %11$s
	98	+ %12$s
	99	+ />',
	100	+ $fieldHelpers->getAtomicCls('img-inp'),
	101	+ $fieldHelpers->getCustomClasses('img-inp'),
	102	+ $inpType,
	103	+ $rowID,
	104	+ $contentCount,
	105	+ $key,
	106	+ $name,
	107	+ $fieldHelpers->esc_attr($val),
	108	+ $checked,
	109	+ $req,
	110	+ $disabled,
	111	+ $fieldHelpers->getCustomAttributes('img-inp')
	112	+ );
	113	+
	114	+ // Check box with tick image
	115	+ $checkBoxHtml = sprintf(
	116	+ '<span
	117	+ class="%1$s %2$s"
	118	+ %3$s
81	119	>
82		- <input
83		- class="{$fieldHelpers->getAtomicCls('img-inp')} {$fieldHelpers->getCustomClasses('img-inp')}"
84		- type="{$inpType}"
85		- id="{$rowID}-{$contentCount}-img-wrp-{$key}"
86		- {$name}
87		- value="{$fieldHelpers->esc_attr($val)}"
88		- {$checked}
89		- {$req}
90		- {$disabled}
91		- {$fieldHelpers->getCustomAttributes('img-inp')}
	120	+ <img
	121	+ src="%4$s"
	122	+ alt=""
	123	+ aria-hidden="true"
	124	+ class="%5$s %6$s"
	125	+ %7$s
92	126	/>
93		- <label
94		- for="{$rowID}-{$contentCount}-img-wrp-{$key}"
95		- class="{$fieldHelpers->getAtomicCls('img-wrp')} {$fieldHelpers->getCustomClasses('img-wrp')}"
96		- {$fieldHelpers->getCustomAttributes('img-wrp')}
97		- >
98		- <span
99		- class="{$fieldHelpers->getAtomicCls('check-box')} {$fieldHelpers->getCustomClasses('check-box')}"
100		- {$fieldHelpers->getCustomAttributes('check-box')}
101		- >
102		- <img
103		- src="{$checkedImg}"
104		- alt=""
105		- class="{$fieldHelpers->getAtomicCls('check-img')} {$fieldHelpers->getCustomClasses('check-img')}"
106		- {$fieldHelpers->getCustomAttributes('check-img')}
107		- />
108		- </span>
	127	+ </span>',
	128	+ $fieldHelpers->getAtomicCls('check-box'),
	129	+ $fieldHelpers->getCustomClasses('check-box'),
	130	+ $fieldHelpers->getCustomAttributes('check-box'),
	131	+ $checkedImg,
	132	+ $fieldHelpers->getAtomicCls('check-img'),
	133	+ $fieldHelpers->getCustomClasses('check-img'),
	134	+ $fieldHelpers->getCustomAttributes('check-img')
	135	+ );
109	136
110		- <span
111		- class="{$fieldHelpers->getAtomicCls('img-card-wrp')} {$fieldHelpers->getCustomClasses('img-card-wrp')}"
112		- {$fieldHelpers->getCustomAttributes('img-card-wrp')}
113		- >
114		- <img
115		- src="{$img}"
116		- alt="{$imgAlt}"
117		- aria-label="{$imgAlt}"
118		- class="{$fieldHelpers->getAtomicCls('select-img')} {$fieldHelpers->getCustomClasses('select-img')}"
119		- {$fieldHelpers->getCustomAttributes('select-img')}
120		- />
121		- {$optLblHide}
122		- </span>
123		- </label>
124		- </div>
125		-IMAGESELECT;
	137	+ // Image card wrapper with selectable image
	138	+ $imgCardHtml = sprintf(
	139	+ '<span
	140	+ class="%1$s %2$s"
	141	+ %3$s
	142	+ >
	143	+ <img
	144	+ src="%4$s"
	145	+ alt="%5$s"
	146	+ aria-label="%5$s"
	147	+ class="%6$s %7$s"
	148	+ %8$s
	149	+ />
	150	+ %9$s
	151	+ </span>',
	152	+ $fieldHelpers->getAtomicCls('img-card-wrp'),
	153	+ $fieldHelpers->getCustomClasses('img-card-wrp'),
	154	+ $fieldHelpers->getCustomAttributes('img-card-wrp'),
	155	+ $img,
	156	+ $imgAlt,
	157	+ $fieldHelpers->getAtomicCls('select-img'),
	158	+ $fieldHelpers->getCustomClasses('select-img'),
	159	+ $fieldHelpers->getCustomAttributes('select-img'),
	160	+ $optLblHide
	161	+ );
	162	+
	163	+ // Label wrapper
	164	+ $labelHtml = sprintf(
	165	+ '<label
	166	+ for="%1$s-%2$s-img-wrp-%3$s"
	167	+ class="%4$s %5$s"
	168	+ %6$s
	169	+ >
	170	+ %7$s
	171	+ %8$s
	172	+ </label>',
	173	+ $rowID,
	174	+ $contentCount,
	175	+ $key,
	176	+ $fieldHelpers->getAtomicCls('img-wrp'),
	177	+ $fieldHelpers->getCustomClasses('img-wrp'),
	178	+ $fieldHelpers->getCustomAttributes('img-wrp'),
	179	+ $checkBoxHtml,
	180	+ $imgCardHtml
	181	+ );
	182	+
	183	+ // Full option item
	184	+ $imageOption .= sprintf(
	185	+ '<div
	186	+ class="%1$s %2$s"
	187	+ %3$s
	188	+ >
	189	+ %4$s
	190	+ %5$s
	191	+ </div>',
	192	+ $fieldHelpers->getAtomicCls('inp-opt'),
	193	+ $fieldHelpers->getCustomClasses('inp-opt'),
	194	+ $fieldHelpers->getCustomAttributes('inp-opt'),
	195	+ $inputHtml,
	196	+ $labelHtml
	197	+ );
126	198	}
127	199	}
128	200
129		- return <<<IMAGESELECTFIELD
130		- <div
131		- class="{$fieldHelpers->getAtomicCls('inp-fld-wrp')} {$fieldHelpers->getCustomClasses('inp-fld-wrp')}"
132		- {$fieldHelpers->getCustomAttributes('inp-fld-wrp')}
133		- >
134		- <div
135		- class="{$fieldHelpers->getAtomicCls('ic')} {$fieldHelpers->getCustomClasses('ic')}"
136		- {$fieldHelpers->getCustomAttributes('ic')}
	201	+ $labelId = $fieldHelpers->getLabelId();
	202	+ $ariaDescribedBy = $fieldHelpers->ariaDescribedBy();
	203	+ $ariaRequired = $fieldHelpers->ariaRequired();
	204	+ $roleType = 'radio' === $field->inpType ? 'radiogroup' : 'group';
	205	+ return sprintf(
	206	+ '<div
	207	+ class="%1$s %2$s"
	208	+ %3$s
	209	+ >
	210	+ <div
	211	+ class="%4$s %5$s"
	212	+ %6$s
	213	+ role="%7$s"
	214	+ aria-labelledby="%8$s"
	215	+ %9$s
	216	+ %10$s
137	217	>
138		- {$imageOption}
139		- </div>
140		- </div>
141		-IMAGESELECTFIELD;
	218	+ %11$s
	219	+ </div>
	220	+ </div>',
	221	+ $fieldHelpers->getAtomicCls('inp-fld-wrp'),
	222	+ $fieldHelpers->getCustomClasses('inp-fld-wrp'),
	223	+ $fieldHelpers->getCustomAttributes('inp-fld-wrp'),
	224	+ $fieldHelpers->getAtomicCls('ic'),
	225	+ $fieldHelpers->getCustomClasses('ic'),
	226	+ $fieldHelpers->getCustomAttributes('ic'),
	227	+ $roleType,
	228	+ $labelId,
	229	+ $ariaDescribedBy,
	230	+ $ariaRequired,
	231	+ $imageOption
	232	+ );
142	233	}
143	234	}