Events¶

The Hypothesis client emits custom DOM events at document.body, to which your app can react.

They extend CustomEvent, so their payload can be found inside the detail property.

hypothesis:layoutchange¶: This event is emitted when the sidebar layout changes. eg. when it is opened or closed.

Properties¶

sidebarLayout¶

expanded¶: Boolean True if the sidebar is open

width¶: Number The width of the sidebar in pixels

height¶: Number The height of the sidebar in pixels

sideBySideActive¶: Boolean Indicates whether side-by-side mode is active

document.body.addEventListener('hypothesis:layoutchange', event => {
  console.log(event.detail.sidebarLayout.expanded);
  console.log(event.detail.sidebarLayout.width);
  console.log(event.detail.sidebarLayout.height);
  console.log(event.detail.sideBySideActive);
});

Note

See also “onLayoutChange” function, for an alternative way to make your app programmatically react to layout changes.