$colorPrefix not properly replaced and custom color for repeaters not applied to the border (Konkat theme)

[romaincazier]

I noticed two bugs regarding InputfieldRepeater and have one more request:

• if the color is specified first in the repeaterTitle configuration field, the \t in $colorPrefix is removed because of a call to trim()

• the custom color is not applied to the border (but it is when opened). You could edit this line InputfieldRepeater.module#L517 to add --pw-border-color: #$matches[1];

• not sure if this is an issue but shouldn't this regex match this one?

Lastly regarding my request: I would like to be able to set different colors based on some conditions within the InputfieldRepeater::renderRepeaterLabel hook. However the way the color is applied in CSS (based on the data-typeName) makes it so only the last repeater’s color is applied (because data-typeName is empty for a regular repeater). One potential fix could be to make InputfieldRepeater::getRepeaterItemTypeName hookable?

[ryancramerdesign]

@romaincazier

if the color is specified first in the repeaterTitle configuration field, the \t in $colorPrefix is removed because of a call to trim()

The instructions state that the color should be placed at the end of the label, not at the beginning:

To use a different background color for the item headers, specify a hex color code, i.e. #FF0000 at the end of the label (use only colors that work with white text).

the custom color is not applied to the border (but it is when opened).

Thanks, I've added your suggested fix for this.

not sure if this is an issue but shouldn't this regex match this one?

Not necessarily, it appears one is designed for an unformatted label and the other for a formatted label. So one of them has to be a little more complex to account for a potential &#1234 type entity that might be confused with a color code.

One potential fix could be to make InputfieldRepeater::getRepeaterItemTypeName hookable?

This method can't be hookable because it exists both in the core InputfieldRepeater and in InputfieldRepeaterMatrix as a regular non-hookable method. When there's one class that extends another, the method definitions have to match. Since the colors feature is part of RepeaterMatrix and there aren't different types in regular Repeaters, would a simpler route be just to avoid defining colors in the label and instead apply your own CSS to change the default repeater colors?

[romaincazier]

The instructions state that the color should be placed at the end of the label, not at the beginning:

Indeed, sorry for the oversight

(...) would a simpler route be just to avoid defining colors in the label and instead apply your own CSS to change the default repeater colors?

It could be but then I would need to add a class or something per repeater item (based on a value of a repeater’s field) to be able to target each using CSS. I'm just not sure where to hook...?

[romaincazier]

I managed to make it work like this:

$wire->addHookAfter("InputfieldRepeater(name=stickers)::renderRepeaterLabel", function(HookEvent $event) {
	$repeaterPage = $event->arguments("page");
	if(!$repeaterPage->id) return;

	$color = $repeaterPage->color;

	$style = "<style>" .
		".Inputfield_stickers .InputfieldContent " . 
		".InputfieldRepeaterItem[data-page=\"$repeaterPage->id\"]:not(.InputfieldRepeaterDeletePending) > " . 
		".InputfieldHeader {" . 
			"background-color: $color; " . 
			"outline-color: $color; " . 
			"color: #fff; " . 
			"--pw-inputs-background: $color; " . 
			"--pw-border-color: $color; " . 
			"--pw-text-color: #fff; " . 
		"} " . 
		".Inputfield_stickers .InputfieldContent " .
		".InputfieldRepeaterItem[data-page=\"$repeaterPage->id\"]:not(.InputfieldRepeaterDeletePending) > " . 
		".InputfieldHeader .ui-priority-secondary {" .
			"color: #fff; " . 
			"--pw-text-color: #fff; " .
			"opacity: 0.8" . 
		"}" .
		"</style>";
	
	if(strpos($event->object->prependMarkup, $style) === false) {
		$event->object->prependMarkup .= $style;
	}
});

[ryancramerdesign]

@romaincazier Nice job! Glad you got it working.