Odo Base Component

Basic Base Component

The Odo Base component essentially is an ES6 bootstrap for modules you may want to build. It should be used with class inheritence to extend functionality of the module you wish to create.

By creating, or extending, the base component, a developer with have reference to the element as well as public methods to find children elements.

Setup

import OdoBaseComponent from '@odopod/odo-base-component';

class CoolModule extends OdoBaseComponent {
  constructor(element) {
    super(element);
  }
}

Base Component - media query listeners

Additionally, the base component can also bootstrap your module to listen on media queries using native matchMedia method. By opting into listening to media queries defined within the base component, you can override the onMediaQueryChange method to set your module to respond to different breakpoints, as well as access instance and static methods related to each media query defined.

The media queries defined within the base component:

• OdoBaseComponent.queries.xs - below 767px
• OdoBaseComponent.queries.sm - between 768px and 1023px
• OdoBaseComponent.queries.md - between 1024px and 1391px
• OdoBaseComponent.queries.lg - above 1392px

Setup

class CoolModule extends OdoBaseComponent {
  constructor(element) {
    super(element, true);
  }

  onMediaQueryChange() {
    // Do something
  }
}

Public Instance Methods

The following methods will return child elements of your base component:

getElementByClass(className)

Returns the first DOM element matching the class name or null if there are no matches.

getElementsByClass(className)

Retrieve elements by class name within the main element for this class.

getElementsBySelector(selector)

Retrieve elements by selector within the main element for this class.

onMediaQueryChange()

The media query listeners detected a change. Override this method to add your own implementation.

dispose()

Remove element references, event listeners, and media query listeners for the current instance.

Static Properties & Methods

breakpoint

Returns an object with matches and current. This is an alias for OdoBaseComponent.matches and OdoBaseComponent.getCurrentBreakpoint().

OdoBaseComponent.breakpoint.matches('xs'); // true or false
OdoBaseComponent.breakpoint.current // 'xs', 'sm', 'md', or 'lg'

matches(breakpointKey)

Query the media query list to see if it currently matches. Will throw an error if the key is not recognized.

getCurrentBreakpoint()

Loop through the 4 media query lists to determine which one currently matches. Returns the key which matches.

defineBreakpoints(breakpoints)

Allows you to redefine the default breakpoints. If you want to redefine breakpoints, make sure you call this method before initializing classes which inherit from Odo Base Component. The only argument should be an array of 3 numbers.

OdoBaseComponent.defineBreakpoints([760, 992, 1200]);