2021 Compositor Helper Components

This is a small set of components to help plugin makers position elements inside the compositor.

Features

• Self destructing elements, for popups and alerts
• Simple CSS animation library, provided by tuesday
• Position elements with control inside the compositor overlay

Contributing

To start building this web component using Stencil, clone this repo to a new directory:

git clone https://github.com/The-WorkCast-Corporation/2021-compositor-components.git
cd 2021-compositor-components

and run:

yarn
yarn start

To build the component for production, run:

yarn build

Need help with stencil?? Check out the docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion. You should use the prefix compositor for these components

To generate a new component, run:

yarn generate compositor-YOUR_COMPONENT_NAME

You will find your new component ready to rock here: \src\components

Using this component

The first step for all three of these strategies is to publish to NPM.

In the Compositor

Call the 2021 Compositor Control Plane

Post to the control API to create elements with this library like this:

{
    "action": "compositor-item",
    "data": {
        "id": "compositorheader",
        "content": "<h1>I am content inside a self destroying element</h1>",
    }
}

A full example with all the variables you can choose:

{
    "action": "compositor-item",
    "data": {
        "id": "compositorheader",
        "content": "<h1>I am content inside a self destroying element</h1>",
        "top": "0",
        "left": "0",
        "right": "0",
        "bottom": "",
        "width": "100%",
        "height": "100px",
        "destroy": "5",
        "enter": "animated tdFadeInUp",
        "exit": "animated tdFadeOutDown",
        "animationduration": "1.5"        
    }
}

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/compositor-components/dist/compositor-components/compositor-components.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install compositor-components --save
• Put a script tag similar to this <script src='node_modules/compositor-components/dist/compositor-components.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install compositor-components --save
• Add an import to the npm packages import compositor-components;
• Then you can use the element anywhere in your template, JSX, html etc

In HTML

To use the <compositor-item> component to animate and position elements, you will need to wrap it in a <compositor-container> like this:

<compositor-container id="container">
    <compositor-item
        bottom="0%"
        left="0%"
        width="100%"
        height="110px"
    >
        <h1>Your content</h1>
    </compositor-item>
</compositor-container>

This example would create a 110px banner across the top of the compositor, filling the screen width.

<compositor-container id="container">
    <compositor-item
        enter="animated tdFadeInDown"
        exit="animated tdFadeOutUp"
        animationduration="1.5"
        destroy="5"
        top="0%"
        left="0%"
        width="100%"
        height="70px"
        style="background-color: darkslategrey;"
    >
        <h3>Your footer</h3>
    </compositor-item>
</compositor-container>

This example would create:

• A 70px high banner across the bottom
• Filling the screen width
• It will destroy itself after 5 seconds
• The background is dark grey
• It will animate in and out, and the animations will last for 1.5 seconds.

Note: You can use style tags to change the compositor-item background, among other things, but be aware that if you use any styles that override position, then the element may not behave you you might want.