Clip

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 Context

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

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.

Example

Let’s create our first HTMLClip.

Once you load the library you can create a new HTMLClip using the following syntax:

import { HTMLClip } from "@donkeyclip/motorcortex";

// Clip definition
const myClip = new HTMLClip({
  host: document.getElementById("app"),
  html: `
    <div class="container">
      <div class="circle circle-a"></div>
      <div class="circle circle-b"></div>
      <div class="circle circle-c"></div>
      <div class="text-container">{{ initParams.text }}</div>
    </div>
  `,
  css: `
    .container{
      position: relative;
      width: 600px;
      height: 400px;
      font-family: 'Ubuntu', sans-serif;
      text-align: center;
      text-shadow: 2px 2px 2px #444;
      background: whitesmoke;
    }

    .circle{
      opacity: 0.7;
      position: absolute;
      border-radius: 100%;
    }

    .circle-a{
      top: 2%;
      left: 15%;
      width: 390px;
      height: 390px;
      background: #f72585;
    }

    .circle-b{
      top: 18%;
      left: 8%;
      width: 320px;
      height: 320px;
      background: #7209b7;
    }

    .circle-c{
      top: 11%;
      right: 15%;
      width: 210px;
      height: 210px;
      background: #3a0ca3;
    }

    .text-container{
      position: absolute;
      top: 55%;
      left: 15%;
      color: whitesmoke;
      font-size: 26px;
    }
  `,
  fonts: [
    {
      type: "google-font",
      src:
        "https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap"
    }
  ],
  containerParams: {
    width: "600px",
    height: "400px"
  },
  initParams: {
    text: "Hello MotorCortex!"
  }
});

Result (codesandbox):

We have created our HTMLClip, which provides the context (HTML / CSS), has a timeline and it’s ready to accept Groups & Incidents.

API

The Clip’s supported properties are:

Key	Type	Comments
host	HTMLElement	Defines the HTML element that the HTMLClip is going to be rendered in
html	MC template string	A string containing html as an MC 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 MC template engine
css	MC template string	A string containing css as an MC 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 MC template engine
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 (@initParams.<path>) or even on @expression (e.g. @expression(initParams.<path>) )
initParamsValidationRules	Object	(optional) A validation schema, compatible with fastest-validator, that will equip your Clip with initParams validation capabilities
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: { type: "google-font", src: "the src of the font as provided by google"} 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