With a previous project (see https://opstoolkit.unswcanberraspace.com) it was very straight-forward to implement Particles.js (for example) into the login page as I dealing with a static login.html page - however, playing around with LoginOverlay have struggled to get something similar with Vaadin 14.
Anyone have an example or tips with defining canvas tags and <script> tags in vaadin 14’s VerticalLayout’s <body> as outlined in npms [particlesjs]
(https://www.npmjs.com/package/particlesjs) page?
Needed a few other things to get it working as a background for LoginOverlay since LoginOverlay has a backdrop element (which covers the particlesjs background). I had to remove that via javascript (took me a while to figure it out since the backdrop was in a DOM shadow-root so I had to pierce that via Javascript to remove it).
But now I have a similar login page as one of my previous projects. I took this as an exercise while evaluating V14, and must admit I really do like where Vaadin has taken Vaadin14.
I actually just ended up creating a class which implements VaadinServiceInitListener and overriding @serviceInit(ServiceInitEvent event).
You can get then add a boot strap listener which provides the Document element object and can then add a “canvas” element (and also add the particles.js library directly to the Document).
E.g.
@SpringComponent
public class ApplicationServiceInitListener implements VaadinServiceInitListener {
@Override
public void serviceInit(ServiceInitEvent event) {
event.addBootstrapListener(response -> {
Document document = response.getDocument();
Element body = document.body();
Element canvas = document.createElement("canvas");
canvas.attr("class", "background");
canvas.attr("id", "particle-canvas");
Element script = document.createElement("script");
script.attr("src", "./js/particles.min.js");
script.attr("async", true);
script.attr("defer", true);
body.insertChildren(-1, canvas, script);
});
}
}
You’ll need to put your particles.min.js library in
There’s other ways of add js libraries but was easy enough to add it here (and load the library when user access application and take care of the canvas element and the library all in one go).
Then I just did executing some js from the LoginView, e.g.