Tips for deleting a CSS class from a Wicket element

Question

Tips for deleting a CSS class from a Wicket element

If you're looking to dynamically update a CSS class of a component in Java code, one way to do so is by using an AttributeAppender:

component.add(new AttributeAppender("class", true, new Model<String>("foo"), " "));

You can also utilize a utility method or class like this:

component.add(WicketUtils.cssClassAppender("foo"));

However, removing a CSS class may not be as straightforward.

To remove all existing CSS classes, you can clear the class attribute entirely:

component.add(new SimpleAttributeModifier("class", ""));

But if you want to keep other CSS classes intact, this approach may not be suitable.

This solution is based on Wicket 1.4, but advice for later versions is welcome too.

java css wicket

Answer 1

Answer №1

Here is a possible solution that I devised:

public class CssClassRemover extends AttributeModifier {
    public CssClassRemover(String cssClass) {
        super("class", false, new Model<String>(cssClass));
    }

    @Override
    protected String newValue(String currentValue, String valueToRemove) {
        // Please note that this approach may not work in all scenarios, such as "foo foo-bar" & "foo"
        return currentValue.replaceAll(valueToRemove, "");
    }
}

To use the above helper code, you can do the following:

component.add(new CssClassRemover("foo"))

(Alternatively, you can create anonymous AttributeModifier subclasses based on your requirements, but utilizing a separate utility class or method can enhance readability.)

Edit: A revised version of newValue() which addresses potential issues more effectively (refer to biziclop's comment). Note: this implementation relies on Guava. (Feel free to suggest simpler alternatives like regex-based solutions.)

@Override
protected String newValue(String currentValue, String valueToRemove) {
    if (currentValue == null) return "";

    Set<String> classes = Sets.newHashSet(Splitter.on(" ").split(currentValue));
    classes.remove(valueToRemove);
    return Joiner.on(" ").join(classes); 
}

Answer 2

Here is a possible solution that I devised:

public class CssClassRemover extends AttributeModifier {
    public CssClassRemover(String cssClass) {
        super("class", false, new Model<String>(cssClass));
    }

    @Override
    protected String newValue(String currentValue, String valueToRemove) {
        // Please note that this approach may not work in all scenarios, such as "foo foo-bar" & "foo"
        return currentValue.replaceAll(valueToRemove, "");
    }
}

To use the above helper code, you can do the following:

component.add(new CssClassRemover("foo"))

(Alternatively, you can create anonymous AttributeModifier subclasses based on your requirements, but utilizing a separate utility class or method can enhance readability.)

Edit: A revised version of newValue() which addresses potential issues more effectively (refer to biziclop's comment). Note: this implementation relies on Guava. (Feel free to suggest simpler alternatives like regex-based solutions.)

@Override
protected String newValue(String currentValue, String valueToRemove) {
    if (currentValue == null) return "";

    Set<String> classes = Sets.newHashSet(Splitter.on(" ").split(currentValue));
    classes.remove(valueToRemove);
    return Joiner.on(" ").join(classes); 
}

Answer 3

Answer №2

Expanding on Jonik's initial response, this code snippet incorporates negative lookahead to exclude instances within a different style class (and remains insensitive to case).

public class StyleClassRemover extends AttributeModifier {

    public StyleClassRemover(final String cssClass) {
        super("class", false, Model.of(cssClass));
    }

    @Override
    protected String newValue(final String currentValue, final String valueToRemove) {
        if (currentValue == null) {
            return "";
        }

        final String patternString = "(^|\\s+)" + Pattern.quote(valueToRemove) + "(?!\\S)";
        return Pattern.compile(patternString, Pattern.CASE_INSENSITIVE).matcher(currentValue).replaceAll("");
    }
}

Example input for testing:

Answer 4

Expanding on Jonik's initial response, this code snippet incorporates negative lookahead to exclude instances within a different style class (and remains insensitive to case).

public class StyleClassRemover extends AttributeModifier {

    public StyleClassRemover(final String cssClass) {
        super("class", false, Model.of(cssClass));
    }

    @Override
    protected String newValue(final String currentValue, final String valueToRemove) {
        if (currentValue == null) {
            return "";
        }

        final String patternString = "(^|\\s+)" + Pattern.quote(valueToRemove) + "(?!\\S)";
        return Pattern.compile(patternString, Pattern.CASE_INSENSITIVE).matcher(currentValue).replaceAll("");
    }
}

Example input for testing:

Answer 5

Answer №3

The method org.apache.wicket.AttributeModifier#remove() is available in Wicket version 1.5 and above.

Answer 6

The method org.apache.wicket.AttributeModifier#remove() is available in Wicket version 1.5 and above.

Tips for deleting a CSS class from a Wicket element

Answer №1

Answer №2

Answer №3

Similar questions

Tips on effectively utilizing the generic class type parameter class

Center text within a span element

Steer clear of posting additional content that might bump the existing content further up

Develop a circular carousel using React JS from scratch, without relying on any third-party library

Integrating a Find Pano functionality into a Kolor Panotour

CSS transform causing scrolling issues in Microsoft Edge browser

I am looking to adjust the height of my MUI Grid component

Java Arrays and Output: A Comprehensive Guide

Content does not become interactive upon the initial loading of the page

Styling Angular Datatables with CSS

Using CSS3, you can apply multiple backgrounds to an unordered list with one set

Select a color by inputting the type as "color" while leaving a space between the border and

HTML5, canvas covering every element

Issue: The drawOval method in the Graphics class is not applicable to the given types. Unclear as to the reason behind this error message

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Is it possible to personalize CSS properties using PHP sessions?

Retrieve all incoming emails from a Microsoft Exchange account using Java

Transform the snake code by incorporating a visual image as the face of the serpent

Improving the way text entered in an input box is displayed using HTML table cells

Is there a way to remove the ring shadow in TailwindCSS?