Nova · Shells

Frame condition

The layout that arranges the canvases is a layout like any other, over what the canvases hold. Here it draws the second canvas only while something stands on it, and a line in its place while nothing does.

The shell, as it is written

{
  canvases: [
    {
      id: 'frame-condition.list',
      initial: 'frame-condition.shows',
    },
    { id: 'frame-condition.detail' },
  ],
  canvasLayout: {
    component: 'Stack',
    children: [
      {
        component: 'CanvasSlot',
        props: { canvasId: 'frame-condition.list' },
      },
      {
        if: '$.canvases.1.active',
        then: {
          component: 'CanvasSlot',
          props: { canvasId: 'frame-condition.detail' },
        },
        else: { component: 'Text', children: 'Pick a show.' },
      },
    ],
  },
  actions: {
    frame-condition.shows: {
      id: 'frame-condition.shows',
      layout: {
        component: 'Button',
        ref: 'open',
        children: 'The Tempest',
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'open',
          do: [
            {
              push: {
                action: 'frame-condition.show',
                canvas: 'frame-condition.detail',
              },
            },
          ],
        },
      ],
    },
    frame-condition.show: {
      id: 'frame-condition.show',
      layout: {
        component: 'Text',
        children: 'Saturday, 19:30. Row C is free.',
      },
    },
  },
}

Running herepress it

Pick a show.

What is done to it

press open

What then stands on each canvas

{
  frame-condition.list: ['frame-condition.shows'],
  frame-condition.detail: ['frame-condition.show'],
}

What it then says

The Tempest
Saturday, 19:30. Row C is free.

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.