Switch branches/tags
@odopod/odo-window-events@1.2.0 @odopod/odo-window-events@1.1.0 @odopod/odo-window-events@1.0.3 @odopod/odo-window-events@1.0.2 @odopod/odo-window-events@1.0.1 @odopod/odo-viewport@1.1.1 @odopod/odo-viewport@1.1.0 @odopod/odo-viewport@1.0.3 @odopod/odo-viewport@1.0.2 @odopod/odo-viewport@1.0.1 @odopod/odo-video@1.2.2 @odopod/odo-video@1.2.1 @odopod/odo-video@1.2.0 @odopod/odo-video@1.1.1 @odopod/odo-video@1.1.0 @odopod/odo-video@1.0.1 @odopod/odo-tap@1.1.2 @odopod/odo-tap@1.1.1 @odopod/odo-tap@1.1.0 @odopod/odo-tap@1.0.3 @odopod/odo-tap@1.0.2 @odopod/odo-tap@1.0.1 @odopod/odo-tabs@2.0.2 @odopod/odo-tabs@2.0.1 @odopod/odo-tabs@2.0.0 @odopod/odo-tabs@1.0.3 @odopod/odo-tabs@1.0.2 @odopod/odo-tabs@1.0.1 @odopod/odo-sticky-headers@1.2.0 @odopod/odo-sticky-headers@1.1.0 @odopod/odo-sticky-headers@1.0.3 @odopod/odo-sticky-headers@1.0.2 @odopod/odo-sticky-headers@1.0.1 @odopod/odo-share@1.1.1 @odopod/odo-share@1.1.0 @odopod/odo-share@1.0.3 @odopod/odo-share@1.0.2 @odopod/odo-share@1.0.1 @odopod/odo-scroll-feedback@1.2.0 @odopod/odo-scroll-feedback@1.1.0 @odopod/odo-scroll-feedback@1.0.3 @odopod/odo-scroll-feedback@1.0.2 @odopod/odo-scroll-feedback@1.0.1 @odopod/odo-scroll-animation@1.2.0 @odopod/odo-scroll-animation@1.1.0 @odopod/odo-scroll-animation@1.0.2 @odopod/odo-scroll-animation@1.0.1 @odopod/odo-sassplate@2.0.1 @odopod/odo-sassplate@2.0.0 @odopod/odo-sassplate@1.1.1 @odopod/odo-reveal@2.0.2 @odopod/odo-reveal@2.0.1 @odopod/odo-reveal@2.0.0 @odopod/odo-reveal@1.0.3 @odopod/odo-reveal@1.0.2 @odopod/odo-reveal@1.0.1 @odopod/odo-responsive-images@1.2.0 @odopod/odo-responsive-images@1.1.0 @odopod/odo-responsive-images@1.0.3 @odopod/odo-responsive-images@1.0.2 @odopod/odo-responsive-images@1.0.1 @odopod/odo-responsive-classes@1.1.1 @odopod/odo-responsive-classes@1.1.0 @odopod/odo-responsive-classes@1.0.3 @odopod/odo-responsive-classes@1.0.2 @odopod/odo-responsive-classes@1.0.1 @odopod/odo-responsive-attributes@1.1.1 @odopod/odo-responsive-attributes@1.1.0 @odopod/odo-responsive-attributes@1.0.3 @odopod/odo-responsive-attributes@1.0.2 @odopod/odo-responsive-attributes@1.0.1 @odopod/odo-pointer@1.2.1 @odopod/odo-pointer@1.2.0 @odopod/odo-pointer@1.1.0 @odopod/odo-pointer@1.0.3 @odopod/odo-pointer@1.0.2 @odopod/odo-pointer@1.0.1 @odopod/odo-on-swipe@1.1.2 @odopod/odo-on-swipe@1.1.1 @odopod/odo-on-swipe@1.1.0 @odopod/odo-on-swipe@1.0.3 @odopod/odo-on-swipe@1.0.2 @odopod/odo-on-swipe@1.0.1 @odopod/odo-object-fit@1.1.1 @odopod/odo-object-fit@1.1.0 @odopod/odo-object-fit@1.0.3 @odopod/odo-object-fit@1.0.2 @odopod/odo-object-fit@1.0.1 @odopod/odo-module@1.2.1 @odopod/odo-module@1.2.0 @odopod/odo-module@1.1.0 @odopod/odo-module@1.0.1 @odopod/odo-hotspots@1.2.1 @odopod/odo-hotspots@1.2.0 @odopod/odo-hotspots@1.1.3 @odopod/odo-hotspots@1.1.2 @odopod/odo-hotspots@1.1.1 @odopod/odo-hotspots@1.1.0 @odopod/odo-hotspots@1.0.2 @odopod/odo-hotspots@1.0.1
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
demos
dist
src
test
README.md
bundle.json
coverage.json
index.d.ts
package.json
yarn.lock

README.md

Odo Base Component

Base component for odo components. Includes media query listeners and exports base globals

Install

npm install @odopod/odo-base-component --save

Quick Start

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

class CoolModule extends OdoBaseComponent {
  constructor(element) {
    // Add media query listeners for this component.
    super(element, true);

    // Optionally call the listener on init.
    this.onMediaQueryChange();
  }

  /**
   * Do something when the breakpoint switches.
   */
  onMediaQueryChange() {
    this.element.className = '';

    if (this.breakpoint.matches('xs') || this.breakpoint.matches('sm')) {
      this.element.classList.add('xs-or-sm');
    } else {
      this.element.classList.add('md-or-lg');
    }

    this.element.classList.add('cool--' + OdoBaseComponent.breakpoint.current);
  }
}

Documentation

Visit the Odo component directory for demos, code examples, and documentation.