Initialization events

When the page is loaded afresh and after Active CSS has loaded, several Active CSS events get checked for and run in the config. These are the initialization events.

You can populate these events as you need to. You can also leave them out completely.

The events that are checked in the config and run are as follows, in the sequence that they are run:

1. The Active CSS "body:preInit " event

Before the init event runs, there is a preInit event. This can be useful if you have a bunch of variables you want to set up and want to keep them separate to any init functionality you got going on.

Do not do any DOM manipulation in this event! The page hasn't properly been set up at this point and you may get unpredictable results.

Note for dynamically loading embedded Active CSS. The equivalent event is "embedded:loaded" which runs as soon as the config has been been loaded into memory. Use this event for things like setting variables, creating commands (if you're using create-command and not @command), etc. that you want to happen before everything else.

body:preInit {
    $myVariable: 0;
    /* ...other variable type declarations */
}

2. The Active CSS "body:init " event

Normally you would write any initialization functionality for your config in here.

/* Add class to body tag. Don't do this in body:preInit as it could get weird. */
body:preInit {
    add-class: .lets-do-this;
}

Disabling pointer events until fully loaded

If you want to disable pointer events on the page until the DOM fully loads, set "body { pointer-events: none; }" in your CSS, then in the body:init event of your Active CSS config, set "body { style: pointer-events auto; }", and then put "<noscript><style>body { pointer-events: auto; }</style></noscript>" in your HTML header tag so all the page links will still work if JavaScript is disabled. This is a practical tip for a smoother UX if you have a heavily loaded page and really don't want people clicking on things until the page has fully loaded. Bear in mind though, that if Active CSS is not supported on a browser this approach will just stop all the pointer events working :)

3. Initial draw events

If your elements have any :draw events set up to run when they are first drawn, the events will get run at this point.

/***
 * Display the time in a div when it is first drawn.
 * After that, the reactive variable "clockTime" updates itself every second.
**/
#myClock:draw {
	$clockTime: new Date().toLocaleTimeString() every 1s;
	render: "Time {{$clockTime}}";
}

4. body:scroll

This is useful if you have any actions happening on a page scroll just after the page is refreshed and the browser has natively moved the user down the page. This is set up to run by default. If you find that you don't want this, let us know and we'll put something in Active CSS so that it can be disabled. Internally Active CSS will just look and run any body:scroll event set up in your config as part of initialization.

/* A div fades in after the user has scrolled down 1000 pixels. */
body:if-scrolltop-greater(1000):scroll {
    fade-in: #myDiv 1s;
}

5. document level ActiveCSSInitialized event

ACSS will then push out a document level event that can be used to detect when ACSS has completed all the steps up to here, which can be used in external JavaScript if necessary.

document.addEventListener('ActiveCSSInitialized', function() {
    // do something
});

6. Lazy-loaded config

Any lazily-loaded config that you are loading will be loaded at this point.