Add simple visual effect to component on click

Hello. I want to add ability to CSS ‘animate’ to simple component with some short text. It must start on click by that component.

@CssImport(value = "./styles/vaadincomponents/text-with-click/text-with-click.css")
public class TextWithClick extends Div {
    public TextWithClick(String labelText, ComponentEventListener<TextWithClickEvent> clickListener) {
        addClassName("text-with-click");
        addComponentAsFirst(new Span(labelText));
        addListener(TextWithClickEvent.class, clickListener);
    }
}

@DomEvent("click")
public class TextWithClickEvent extends ComponentEvent<Div> {
    public TextWithClickEvent(Div source, boolean fromClient) {
        super(source, fromClient);
		// There maybe need to use something like 'UI.access', but it is overhead
		//source.getElement().removeAttribute("hasClicked");
        source.getElement().setAttribute("hasClicked", "");
    }
}

// How i create an component:
TextWithClick textWithClick = new TextWithClick(
	"LABEL CLICK!",
		(ComponentEventListener<TextWithClickEvent>) event -> Notification.show("Click event fired")
	);

This version have an overhead as data transmissions between client and server side. It is too heavy to simple animation-on-click task.
Maybe i can add some code in component’s JavaScript for simple add attribute ‘hasClicked’ and remove this attribute after some seconds (for ability to animate next clicks)?

I little afraid to use Polymer templates, because in next versions it will deprecated, looked at there: [https://vaadin.com/blog/next-generation-vaadin-components]
(https://vaadin.com/blog/next-generation-vaadin-components)
Perhaps my fears are excessive and i must use Polymer? Is there other possibilities to add JavaScript code to component other than Polymer templates?

Perhaps my fears are excessive and i must use Polymer?

I’m sorry if the message was confusing. We are not going to deprecate Polymer templates in 14.x which is an LTS version supported for 5 years. This means that we also support and recommend using Polymer as a way of writing UI components.

The Button component has active attribute for this kind of animation. We set it on mousedown (or touchstart on mobile) and remove it on mouseup (or touchend on mobile). You might do the same in your component.

This is the code that we are using. Note the Polymer.Gestures, which handles the touch events as I described above, is a global variable Polymer 2 version, but should be imported as a JS module if you are working with Polymer 3.

https://github.com/vaadin/vaadin-button/blob/a9922920997295ccd0ffeb8ab27be8f2cc464825/src/vaadin-button.html#L166-L167

As a sidenote, try to keep accessibility in mind. I don’t know your requirements or use case, so this is a bit generic advice.

Using a Div with a ClickListener will not be accessible with keyboard or screen readers, so you are limiting the usability of your app. Using a Button component would be an easy fix, but if you need something custom, you should make the element focusable (by using tabindex=“0” in HTML), have a human readable label for screen readers and make it possible to trigger the action with the Enter and Space keys as well.

Serhii Kulykov:

https://github.com/vaadin/vaadin-button/blob/a9922920997295ccd0ffeb8ab27be8f2cc464825/src/vaadin-button.html#L166-L167

It is very useful, thanks.

Jouni Koivuviita:
Using a Div with a ClickListener will not be accessible with keyboard or screen readers, so you are limiting the usability of your app. Using a Button component would be an easy fix, but if you need something custom, you should make the element focusable (by using tabindex=“0” in HTML), have a human readable label for screen readers and make it possible to trigger the action with the Enter and Space keys as well.

I see, will keep this in mind. For now i was need an component, that receive String in Java constructor, provide text from String to the client’s side. I add some click listeners (on-click and on-dblclick) to client which send events to server-side, and change special attribute on element that cause animation. After period (JavaScript’s setTimeout) that attribute is removing. As a result, i created useful (for my purposes) webcomponent using Polymer 3.

Thanks!