Publish a "document ready" event for included javascript functions

Originally by cpoile

I have multiple use cases requiring a callback from the framework to let my attached JavaScript functions know that they can now begin work on the DOM. Similar to a $(document).ready from jQuery.

According to a helpful support request response from Leif, I understand that attached Javascript is evaluated very early in the layout cycle. So if I include a JavaScript file in the @JavaScript annotation, or in a CustomLayout layout file, it is evaluated before the page is ready in the browser. This is causing me days of grief as I try to find workarounds.

Currently I am placing all Javascript into a document-level event handler like so:

$(document).on('mouseenter', 'body', function (e) {
   "use strict";
   if (tabSwitchInitialized === false) {
      tabSwitchInit();
      tabSwitchInitialized = true;
   }
});

This is a giant hack, as you can see. The jQuery callback $(document).ready() does not work as it should, or else I would use it. I believe this would be a very useful feature (for evidence, see how many JavaScript functions are wrapped in jQuery's $(document).ready()).

Instead, can we register a VAADIN.ready() function of some kind? It would help me most if this function was triggered every time the page is re-displayed, such as in the following instances:

• on first load

• on reload
• on entering and leaving the page

Thank you kindly.

Imported from https://dev.vaadin.com/ issue #10063

Start by tracing how JavaScript included through the @JavaScript annotation and CustomLayout layouts is evaluated, then inspect the browser lifecycle around initial load, reload, and page navigation. The requested outcome is a framework event that attached JavaScript can use when the DOM is ready on each relevant redisplay; the issue does not name files or tests.