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 COYO platform a plug-in should avoid scrolling and adjust its height according to the content it contains. Unfortunately, there is no way for COYO to automatically adjust the height of the surrounding iFrame since COYO has no further information about its content.

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

Setting the default height

As already mentioned, COYO 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 COYO receives another height message. Every message with a "setHeight" subject will override the last height definition. COYO 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 COYO 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 COYO. By default, the adapter will observe the root HTML element.

adapter.observeHeight();

Manual height updates

To manually send height messages to COYO 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 COYO 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'));

Did this page help you?