Skip to content

CodeCoupler UI Stage

A stage is a class derived from the CodeCoupler base class Stage. A stage manipulates the current stage and provides one element which will be the new stage from then on.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { Stage } from "@codecoupler/cc-ui";
export default class extends Stage {
  //Add an constructor if you want to intercept the constructor logic.
  //But remember: The init method always be executed first regardless
  //of whether you write a contructor or not. As the init method is
  //async your constructor code will be executed probably before the
  //init method has finished!

  //constructor(env, options) {
  //  super(env, options);
  //  //Do something here.
  //}

  async init(env, options) {
    //Init process here
  }
}

The only method you have to provide is async init(env, options). The first arguments is an object with the following properties:

  • system: CodeCoupler System Object

    The parent system instance.

  • element: HTMLElement

    The current stage.

  • \$element: jQuery Object

The current stage as a jQuery object.

The second argument are individual options of your stage implementation which can be defined if the method system.stage() is called to create a stage.

Withing this init function you can manipulate the passed stage however you need. The resulting structure only has to meet two requirements:

  1. The new stage container element must have set the attribute data-role="cc-stage".
  2. The new stage container element must have the style attribute position set to absolute, relative or fixed.

If these requirements are not met, the stage will blocked with an error message.

The style attribute isolation of the new stage container will always be set to isolate.