The Clip in MotorCortex
The Clip in MotorCortex is en entity that has the following characteristics:
- It owns a context
- It has a timeline
- It can accept any Group or Incident on its timeline
- Under the hood, it is responsible of checking and handling Incidents addition, edit and removal
The key-word to notice on these characteristics is the
context. The context is anything that contains elements that
can be accessed via selectors.
The implemented and provided by MotorCortex,
HTMLClip is just one of the possible implementations.
HTMLClip defines and owns an isolated context (consisting of HTML and CSS), renders itself on any DOM element and of course it provides a timeline that can accept Incidents.
Incidents added to an HTMLClip's timeline most usually animate elements of the Clip's context or they are just other Clips that have their own context, timeline and duration, and so on.
HTMLClip renders itself by the use of shadow DOM. If shadow DOM is not supported by the browser it falls back to iframe. This way HTMLClip keeps itself isolated from any CSS or js of the parent document.
Let’s create our first HTMLClip.
Once you load the library you can create a new HTMLClip using the following syntax:
We have created our HTMLClip, which provides the context (HTML / CSS), has a timeline and it’s ready to accept Groups & Incidents.
The Clip’s supported properties are:
|host||HTMLElement||Defines the HTML element that the HTMLClip is going to be rendered in|
|html||EJS template string||A string containing html as an EJS template. You can use <%= initParams.<key> %> anywhere in your html. The value of each initParams.<key> will be retrieved from the initiParams passed to the HTMLClip. Of course you can use any other functionality provided by EJS|
|css||EJS template string||A string containing css as an EJS template. You can use <%= initParams.<key> %> anywhere in your css. The value of each initParams.<key> will be retrieved from the initiParams passed to the HTMLClip. Of course you can use any other functionality provided by EJS|
|initParams||Object||A key-value pairs object. This object can be used both on the html and css templates of the Clip and as dynamic values for Incidents (|
|fonts||Array||A list of fonts you might want to load on your Clip in an array format. Each font should be provided on the following format: |
Only “google-font” type is supported at the moment.
|containerParams||Object||(optional) An object that accepts two keys: width & height which set the preferred width & height of the HTMLClip. Both should be a valid CSS value strings such as “400px” or “100%”|
|name||string||(optional) A name for your HTMLClip|
|id (just for development purposes)||string||(bad practice for production, use just for debugging purposes). The id of the HTMLClip|