Views

Define a rich-content view

Define a list of rich-content views for your helper using the views object.

Each key will correspond to the unique view name within the helper, whereas the value is required to be an object to define its configuration, including what helpers are allowed to be dropped into the view.

Fliplet.Helper({
  name: 'slider',
  render: {
    template: [
      '<div data-view="myFirstView"></div>',
      '<div data-view="mySecondView"></div>',
      '<div data-view="myThirdView"></div>'
    ].join('')
  },
  views: [
    { name: 'myFirstView', displayName: 'View 1' },
    { name: 'mySecondView', displayName: 'View 2', allow: ['slide'] },
    { name: 'myThirdView', displayName: 'View 3', allow: [] }
  ]
});

The example above defines three views:

• myFirstView allows any helper to be dropped in
• mySecondView only allows an helper called slide to be dropped in
• myThirdView only allows no helpers to be dropped in

Define a placeholder for a rich-content view

Views can define a placeholder HTML to be rendered when empty. Use the placeholder attribute as detailed here below:

Fliplet.Helper({
  name: 'slider',
  render: {
    template: [
      '<div data-view="myFirstView"></div>'
    ].join('')
  },
  views: [
    {
      name: 'myFirstView',
      displayName: 'View 1',
      placeholder: '<p>Please drop content here</p>'
    }
  ]
});

Define where a helper can be dropped into

By default, helpers are not allowed to be dropped into other helpers. However, they can optionally be allowed to be dropped any into rich-content views defined by other helpers. To do so you must define the childOf array property in the child helper with a list of helpers it can be dropped to:

// This helper can only be dropped in the "slider" helper
Fliplet.Helper({
  name: 'slide',
  childOf: ['slider']
});

Furthermore, if your parent helper is declaring more than one rich-content view you can restrict your child helper to only be allowed to be dropped into a specific view by using the dot notation as follows:

// This helper can only be dropped in the
// "slider" helper view named "mySecondView"
Fliplet.Helper({
  name: 'slide',
  childOf: ['slider.mySecondView']
});

Note: If you want to allow an helper to be dropped in any other helper with no restrictions, you don't need to define the childOf property.

Further reading