Dimensions and scrolling

By default, every plug-in will be placed in an iFrame with a 16:9 ratio and scrolling enabled. However, to really feel like a native part of the Haiilo Home platform a plug-in should avoid scrolling and adjust its height according to the content it contains. Unfortunately, there is no way for Haiilo Home to automatically adjust the height of the surrounding iFrame since Haiilo Home has no further information about its content.

To work around this problem plug-ins can use the window.postMessage() API to inform Haiilo Home about dimension changes. Note that you only need to inform Haiilo Home about changes in height. The width of the iFrame is defined by Haiilo Home grid system and every plug-in can react to changes in width via CSS media queries.

Setting the default height

As already mentioned, Haiilo Home uses a default 16:9 ratio for plug-in entry points and will update the height every time it receives a corresponding message sent via window.postMessage(). The initial height of every entry point can be overridden via the plug-in manifest. You can assign entryPoints .height to either a fixed height in pixels or to another aspect ratio. This height will be used until Haiilo Home receives another height message. Every message with a "setHeight" subject will override the last height definition. Haiilo Home will disable scrolling of the iFrame whenever a height is provided via the plug-in manifest or the window.postMessage() API.

Height updates via library

Auto-updating heights is extremely easy using the Haiilo Home plug-in library. After you have instantiated the PluginAdapter just call its observeHeight(selectors = 'html') method. The adapter then starts to observe the HTML element that matches the given selectors and sends throttled update messages to Haiilo Home. By default, the adapter will observe the root HTML element.

adapter.observeHeight();

Manual height updates

To manually send height messages to Haiilo Home you will need to send a properly formatted message via window.postMessage(). The message's subject must be set to setHeight and it must contain an additional field height with the new pixel value or aspect ratio. Ideally, you throttle these messages as the ResizeObserver interface reports a lot of changes when the dimensions of an Element's content or border box change.

Below you can find an example implementation of a plug-in that observes its body height via a the ResizeObserver interface and forwards the information to Haiilo Home in a throttled manner (every 500ms):

function throttle(func, wait = 500) {
  let timer = null;
  return function(...args) {
    if (timer === null) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

new ResizeObserver(entries =>
  throttle(height =>
    parent.postMessage({iss: srcId, sub: 'setHeight', height}, "*")
  )(entries[0].contentRect.height)
).observe(document.querySelector('body'));