Directive Models

Accessing Directives

Directives are always part of a ComponentModel. On a component you can access the directives through the directives property which is a DirectiveColletion.

// get hold of a specific directive
const textDirective = componentModel.directives.get('title')

// loop through all directives on a component in the order
// they are defined.
for (const directive in componentModel.directives) {
  directive.getContent()
}

// loop through each image directive on a component
componentModel.directives.eachImage((imageDirective) => {
  imageDirective.getUrl()
})

// Get the number of directives of a certain type
// on a component.
// Possible types: 'editable', 'image', 'html', 'link', 'include'
const count = componentModel.directives.count('include')

Directive Types

Text

type: ’editable' component template attribute: doc-editable

textDirective.setContent('Lorem Ipsum dolorem...')
const content = textDirective.getContent()

Image

type: ‘image’ component template attribute: doc-image

Minimal Example:

imageDirective.setContent({url: 'http://images.com/1'})

Most of the time you will want to have optimized delivery with an image service. For this width, height, mimeType as well as the imageService itself have to be specified when setting an url.

Real World Example with image service:

imageDirective.setContent({
  url: 'http://images.com/1',
  width: 400,
  height: 300,
  mimeType: 'image/jpeg',
  imageService: 'resrc.it',
  crop: {x: 100, y: 50, width: 200, height: 200},
  origins: [{name: 'uez463x8ie39', identifier: 'hugo'}],
  focalPoint: {x: 234, y: 123}
})

// Update the crop
imageDirective.setCrop({x: 0, y: 0, width: 250, height: 250})

Please notice that the (optional) focalPoint property needs to be within the image width and height bounds. However, the focal point is not necessarily related to the crop. The focal point gives the automatic cropping capabilities a hint what to include in the crop. But the user may still adjust the crop manually which ignores, but still remembers the focal point.

Video

videoDirective.setContent({
  url: 'http://images.com/1',
  width: 400,
  height: 300,
  mimeType: 'image/jpeg',
  imageService: 'resrc.it',
  crop: {x: 100, y: 50, width: 200, height: 200},
  origins: [{name: 'uez463x8ie39', identifier: 'hugo'}]
})

// Update the crop
videoDirective.setCrop({x: 0, y: 0, width: 250, height: 250})

Html

type: ‘html’ component template attribute: doc-html

htmlDirective.setContent({
  html: '<div>Moby Dick</div>'
})

type: ’link' component template attribute: doc-link

linkDirective.setContent({
  href: 'http://www.test.com/',
  target: '_blank'
})

Allowed values for target: _blank, _self, _parent or _top

Include

type: ‘include’ component template attribute: doc-include

includeDirective.setContent({
  service: 'list',
  params: {foo: 'bar'}
})

// Retrieve the params set on a directive (this includes defaultParams
// specified in the component configuration if they have not been overwritten).
includeDirective.getParams()

// setParams overwrites all parameters of this include.
includeDirective.setParams({foo: 'bar'})

// addParams merges the specified params with the existing ones
// (including any default params that may have been set in the component
// configuration).
includeDirective.addParams({foo: 'bar'})