A collection of vanilla JavaScript components used in Odopod projects.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs-src Add "View on GitHub" link to the footer. Sep 1, 2017
docs
gulp-tasks Add "es" bundle for every package. Add `module` field to every packag… Feb 10, 2018
packages Publish Jun 11, 2018
scripts Stop auto-polyfilling Element#closest, Element#matches, and requestAn… Feb 7, 2018
utils
.editorconfig Initial public commit. Jul 21, 2017
.eslintignore
.eslintrc.json Initial public commit. Jul 21, 2017
.gitignore Add "es" bundle for every package. Add `module` field to every packag… Feb 10, 2018
.travis.yml
CHANGELOG.md Update changelog [skip ci] Jun 11, 2018
CONTRIBUTING.md
LICENSE
README.md
gulpfile.js
karma.conf.js Add "es" bundle for every package. Add `module` field to every packag… Feb 10, 2018
lerna.json
package.json Upgrade dependencies Jun 7, 2018
yarn.lock Upgrade dependencies Jun 7, 2018

README.md

Odopod Code Library (Odo) Build Status

A collection of vanilla JavaScript components used in Odopod projects.

Want to contribute to Odo?

Take a look at CONTRIBUTING.md.

Packages

The Odo repo is managed as a monorepo; it's composed of many npm packages.

Package Version
@odopod/odo-affix npm
@odopod/odo-background-video npm
@odopod/odo-base-component npm
@odopod/odo-carousel npm
@odopod/odo-device npm
@odopod/odo-dialog npm
@odopod/odo-draggable npm
@odopod/odo-dropdown npm
@odopod/odo-dual-viewer npm
@odopod/odo-expandable npm
@odopod/odo-helpers npm
@odopod/odo-hotspots npm
@odopod/odo-module npm
@odopod/odo-object-fit npm
@odopod/odo-on-swipe npm
@odopod/odo-pointer npm
@odopod/odo-responsive-attributes npm
@odopod/odo-responsive-classes npm
@odopod/odo-responsive-images npm
@odopod/odo-reveal npm
@odopod/odo-sassplate npm
@odopod/odo-scroll-animation npm
@odopod/odo-scroll-feedback npm
@odopod/odo-share npm
@odopod/odo-sticky-headers npm
@odopod/odo-tabs npm
@odopod/odo-tap npm
@odopod/odo-video npm
@odopod/odo-viewport npm
@odopod/odo-window-events npm

Tips for advanced webpack configuration

If you use webpack (or another bundler) for your project and are already using a compiler for your JavaScript (like babel), you have the option of using odo component source files and compiling them with your project.

This has a couple benefits:

  • No dependencies for odo are bundled with their dist files. For example, the debounce package is bundled in a couple odo components.
  • Use the same babel preset for your app's code and odo components. Maybe you're using babel-preset-env so that you can compile less.

Use the alias object to map requests for odo components to their source files instead of dist files. This configuration is intended for webpack 2, 3, or 4.

// Webpack config
{
  resolve: {
    alias: {
      '@odopod/odo-carousel$': '@odopod/odo-carousel/src/carousel.js',
      '@odopod/odo-device$': '@odopod/odo-device/src/device.js',
      '@odopod/odo-draggable$': '@odopod/odo-draggable/src/draggable.js',
      '@odopod/odo-helpers$': '@odopod/odo-helpers/src/helpers.js',
      '@odopod/odo-pointer$': '@odopod/odo-pointer/src/pointer.js',
    },
  },
}

Don't exclude odo components from being compiled with babel.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!@odopod\/odo-)/,
      loader: 'babel-loader',
    },
  }
]