Creating action commands

Let's say you're coding away, and then the next thing is to add Google Analytics. How would you do that in Active CSS?

You could either call out to an external function, using the func command, or you could create a couple of Active CSS commands if you were feeling adventurous. Perhaps one command to turn it on (maybe "google-analytics-start"), and one command to turn it off (maybe "google-analytics-stop"). You could set up parameters for those commands, and then reuse them when you needed to.

Or maybe you find that you have a piece of code that gets called many times. Or maybe you don't think that one of the Active CSS commands is as good as it could be.

In these latter cases you would write your own command for use in the event flow. It will then act in exactly the same way as all the other commands in the event flow - appear in the extensions automatically, and work with the "after" and "every" parameters automatically.

All Active CSS commands, and all CSS commands, work on a floating scope basis. This means that they will work in all scopes. You could say that all action commands themselves are in the global scope of Active CSS. Once an action command is created for the config, it cannot be removed from the config and it cannot be overwritten.

Active CSS variables used inside custom action commands are scoped to either the document scope, or the shadow DOM scope in which they are being used.

Writing your own command

Use @command or create-command to create action commands. This is better than doing it in a JavaScript function as it allows you to use Active CSS variables within the JavaScript you are writing, but it will require more work to get familiar on how to do it.

Calling an external JavaScript function

See the func command on how to run an external function. There are important event flow variables as an object in the first parameter in any function called with the func command, so you can use these to find out exactly what and where you are in the event flow. You get sent things like the target selector, the document it applies to, and all the important stuff.