Origami Frontend Components & Services

JSDoc: o-layout

new Layout(layoutEl, options)

Class constructor.

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

Methods

  • constructNavFromDOM - (instance) Construct the sidebar navigation from headings within the DOM.
  • highlightNavItems - (instance) Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.
  • getDataAttributes(layoutElement) - (static) 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.
  • init(rootEl, opts) - (static) Initialise layout component.

Properties

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#navAnchors

Instance Property

Type

  • Array.<HTMLAnchorElement>

Links

Layout#constructNavFromDOM

Instance Method

Construct the sidebar navigation from headings within the DOM.

Links

Layout#navAnchors

Instance Property

Type

  • Array.<HTMLAnchorElement>

Links

Layout#highlightNavItems

Instance Method

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

Returns

  • void

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

Returns

  • Object.<string, any> - - Options for configuring the layout

Links

Layout.init(rootEl, opts)

Static Method

Initialise layout component.

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

Returns

  • Layout | Array.<Layout> - Returns either a single Layout instance or an array of Layout instances

Links

new Layout(layoutEl, options)

Class constructor.

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

Methods

  • constructNavFromDOM - (instance) Construct the sidebar navigation from headings within the DOM.
  • highlightNavItems - (instance) Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.
  • getDataAttributes(layoutElement) - (static) 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.
  • init(rootEl, opts) - (static) Initialise layout component.

Properties

Links

Status
active
Switch component view

GitHub: o-layout@5.2.3

Install o-layout

If using the Build Service, add o-layout@^5.2.3 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@^5.2.3".

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