Origami Frontend Components & Services

JSDoc: o-layout

new Layout(layoutElement, options)

Class constructor.

parameter type default description
layoutElement (optional) HTMLElement The layout element in the DOM
options (optional) Object {} An options object for configuring aspects of the layout

Methods

Links

new LinkedHeading(...)

Represents a linked heading.

Class constructor.

parameter type default description
headingElement HTMLElement The heading element in the DOM
options (optional) Object {} An options object for configuring the linked heading
options.content (optional) String "ΒΆ" The content to add to the created link
options.title (optional) String "Link directly to this section of the page" The title attribute to add to the created link

Links

Layout#constructNavFromDOM

Instance Method

Construct the sidebar navigation from headings within the DOM.

Links

Layout#highlightNavItems(navigation)

Instance Method

Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.

parameter type default description
navigation (optional) HTMLElement the sidebar navigation list in the DOM

Links

Layout.getDataAttributes(layoutElement)

Static Method

Get the data attributes from the layoutEl. If the layout is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
layoutElement HTMLElement The layout element in the DOM

Links

Layout.init(rootElement, options)

Static Method

Initialise layout component.

parameter type default description
rootElement HTMLElement | String The root element to intialise the layout in, or a CSS selector for the root element
options (optional) Object {} An options object for configuring layout behaviour.

Links

new Layout(layoutElement, options)

Class constructor.

parameter type default description
layoutElement (optional) HTMLElement The layout element in the DOM
options (optional) Object {} An options object for configuring aspects of the layout

Methods

Links

Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-layout

If using the Build Service, add o-layout@^4.5.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-layout@^4.5.0".

Help & Support

o-layout is maintained directly by the Origami team. If you have any questions about o-layout or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com