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 component 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.baseClass (optional) String "o-layout__linked-heading" The class attribute to add to the created link
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

Methods

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

LinkedHeading.init(rootElement, options)

Static Method

Initialise linked heading components.

parameter type default description
rootElement HTMLElement | String The root element to intialise filter forms in, or a CSS selector for the root element
options (optional) Object {} An options object for configuring the linked heading. See {@link LinkedHeading#constructor}

Returns

  • LinkedHeading | Array.<LinkedHeading> - Returns the new linked heading component or an array of linked heading components

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

Switch component view

GitHub Repository

Install o-layout

If using the Build Service, add o-layout@^2.2.4 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-layout@^2.2.4".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com