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

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

Utilizing CSS to Create Fixed Position Elements

What is the method with the greatest specificity for applying styles: CSS or JS?

Ensure that the elements are properly arranged inside divs that have been stretched

Update the content of the widget

CSS3PIE is failing to function properly in Internet Explorer

After obtaining two IDs, I am required to add the first ID to the URL and click on the accept button. However, I am facing difficulties in adding the second ID to the URL afterwards

Unable to handle a POST request initiated by an HTML Form

The window.addEventListener function is failing to work properly on mobile devices

Performing Get() and Set() operations across multiple @Test annotations in Selenium WebDriver

Issue arises when applying both overflow-x:scroll and justify-content:center

Ensure that the heading cells in the table header (thead) are properly

CSS Grid having trouble with wrapping elements

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Converting HTML divs into a single page PDF document using DinkToPdf

Beginning multiple-threaded stopwatch instances (the commandHolder became filled while executing the doCommandWithoutWaitingForAReponse exception)

Transform text with spaces into a JSON object

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Navigating through Expression Engine and utilizing conditional statements

Allow the content to be scrolled