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.