Nova · Shells

Push and pop

A canvas is a stack. push puts an action on top of it and pop takes the top one off again, so Back is real: the screen underneath was never gone.

The shell, as it is written

{
  canvases: [{ id: 'push-pop.main', initial: 'push-pop.menu' }],
  actions: {
    push-pop.menu: {
      id: 'push-pop.menu',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'Box office' },
          { component: 'Button', ref: 'seats', children: 'Seats' },
          {
            component: 'Button',
            ref: 'prices',
            children: 'Prices',
          },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'seats',
          do: [{ push: { action: 'push-pop.seats' } }],
        },
        {
          event: 'ui:click',
          ref: 'prices',
          do: [{ push: { action: 'push-pop.prices' } }],
        },
      ],
    },
    push-pop.seats: {
      id: 'push-pop.seats',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'Row C is free.' },
          { component: 'Button', ref: 'back', children: 'Back' },
        ],
      },
      triggers: [{ event: 'ui:click', ref: 'back', do: [{ pop: true }] }],
    },
    push-pop.prices: {
      id: 'push-pop.prices',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'A seat is 38.' },
          { component: 'Button', ref: 'back', children: 'Back' },
        ],
      },
      triggers: [{ event: 'ui:click', ref: 'back', do: [{ pop: true }] }],
    },
  },
}

Running herepress it

Box office

What is done to it

press seats
press back
press prices

What then stands on each canvas

{ push-pop.main: ['push-pop.menu', 'push-pop.prices'] }

What it then says

A seat is 38.
Back

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.