<commit_before># Odopod Code Library (Odo) [![Build Status](https://travis-ci.org/odopod/code-library.svg?branch=master)](https://travis-ci.org/odopod/code-library)

> A collection of vanilla JavaScript components used in Odopod projects.

## Want to contribute to Odo?

Take a look at [CONTRIBUTING.md](https://github.com/odopod/code-library/blob/master/CONTRIBUTING.md).

## Packages

The Odo repo is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md); it's composed of many npm packages.

| Package | Version |
|---------|---------|
| [`@odopod/odo-affix`](/packages/odo-affix) | [![npm](https://img.shields.io/npm/v/@odopod/odo-affix.svg)](https://www.npmjs.com/package/@odopod/odo-affix) |
| [`@odopod/odo-background-video`](/packages/odo-background-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-background-video.svg)](https://www.npmjs.com/package/@odopod/odo-background-video) |
| [`@odopod/odo-base-component`](/packages/odo-base-component) | [![npm](https://img.shields.io/npm/v/@odopod/odo-base-component.svg)](https://www.npmjs.com/package/@odopod/odo-base-component) |
| [`@odopod/odo-carousel`](/packages/odo-carousel) | [![npm](https://img.shields.io/npm/v/@odopod/odo-carousel.svg)](https://www.npmjs.com/package/@odopod/odo-carousel) |
| [`@odopod/odo-device`](/packages/odo-device) | [![npm](https://img.shields.io/npm/v/@odopod/odo-device.svg)](https://www.npmjs.com/package/@odopod/odo-device) |
| [`@odopod/odo-dialog`](/packages/odo-dialog) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dialog.svg)](https://www.npmjs.com/package/@odopod/odo-dialog) |
| [`@odopod/odo-draggable`](/packages/odo-draggable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-draggable.svg)](https://www.npmjs.com/package/@odopod/odo-draggable) |
| [`@odopod/odo-dropdown`](/packages/odo-dropdown) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dropdown.svg)](https://www.npmjs.com/package/@odopod/odo-dropdown) |
| [`@odopod/odo-dual-viewer`](/packages/odo-dual-viewer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dual-viewer.svg)](https://www.npmjs.com/package/@odopod/odo-dual-viewer) |
| [`@odopod/odo-expandable`](/packages/odo-expandable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-expandable.svg)](https://www.npmjs.com/package/@odopod/odo-expandable) |
| [`@odopod/odo-helpers`](/packages/odo-helpers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-helpers.svg)](https://www.npmjs.com/package/@odopod/odo-helpers) |
| [`@odopod/odo-hotspots`](/packages/odo-hotspots) | [![npm](https://img.shields.io/npm/v/@odopod/odo-hotspots.svg)](https://www.npmjs.com/package/@odopod/odo-hotspots) |
| [`@odopod/odo-module`](/packages/odo-module) | [![npm](https://img.shields.io/npm/v/@odopod/odo-module.svg)](https://www.npmjs.com/package/@odopod/odo-module) |
| [`@odopod/odo-object-fit`](/packages/odo-object-fit) | [![npm](https://img.shields.io/npm/v/@odopod/odo-object-fit.svg)](https://www.npmjs.com/package/@odopod/odo-object-fit) |
| [`@odopod/odo-on-swipe`](/packages/odo-on-swipe) | [![npm](https://img.shields.io/npm/v/@odopod/odo-on-swipe.svg)](https://www.npmjs.com/package/@odopod/odo-on-swipe) |
| [`@odopod/odo-pointer`](/packages/odo-pointer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-pointer.svg)](https://www.npmjs.com/package/@odopod/odo-pointer) |
| [`@odopod/odo-responsive-attributes`](/packages/odo-responsive-attributes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-attributes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-attributes) |
| [`@odopod/odo-responsive-classes`](/packages/odo-responsive-classes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-classes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-classes) |
| [`@odopod/odo-responsive-images`](/packages/odo-responsive-images) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-images.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-images) |
| [`@odopod/odo-reveal`](/packages/odo-reveal) | [![npm](https://img.shields.io/npm/v/@odopod/odo-reveal.svg)](https://www.npmjs.com/package/@odopod/odo-reveal) |
| [`@odopod/odo-sassplate`](/packages/odo-sassplate) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sassplate.svg)](https://www.npmjs.com/package/@odopod/odo-sassplate) |
| [`@odopod/odo-scroll-animation`](/packages/odo-scroll-animation) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-animation.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-animation) |
| [`@odopod/odo-scroll-feedback`](/packages/odo-scroll-feedback) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-feedback.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-feedback) |
| [`@odopod/odo-share`](/packages/odo-share) | [![npm](https://img.shields.io/npm/v/@odopod/odo-share.svg)](https://www.npmjs.com/package/@odopod/odo-share) |
| [`@odopod/odo-sticky-headers`](/packages/odo-sticky-headers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sticky-headers.svg)](https://www.npmjs.com/package/@odopod/odo-sticky-headers) |
| [`@odopod/odo-tabs`](/packages/odo-tabs) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tabs.svg)](https://www.npmjs.com/package/@odopod/odo-tabs) |
| [`@odopod/odo-tap`](/packages/odo-tap) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tap.svg)](https://www.npmjs.com/package/@odopod/odo-tap) |
| [`@odopod/odo-video`](/packages/odo-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-video.svg)](https://www.npmjs.com/package/@odopod/odo-video) |
| [`@odopod/odo-viewport`](/packages/odo-viewport) | [![npm](https://img.shields.io/npm/v/@odopod/odo-viewport.svg)](https://www.npmjs.com/package/@odopod/odo-viewport) |
| [`@odopod/odo-window-events`](/packages/odo-window-events) | [![npm](https://img.shields.io/npm/v/@odopod/odo-window-events.svg)](https://www.npmjs.com/package/@odopod/odo-window-events) |

## 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`](https://github.com/babel/babel-preset-env) so that you can compile less.
* Less boilerplate code. Each odo component comes with webpack's [UMD](https://github.com/umdjs/umd) [wrapper](https://webpack.js.org/configuration/output/#output-librarytarget) so that it can work in multiple environments.

Use the `alias` object to map requests for odo components to their source files instead of dist files. This configuration is intended for webpack v2.

```js
// 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',
    },
  },
}
```<commit_msg>Remove UMD note [skip ci]<commit_after># Odopod Code Library (Odo) [![Build Status](https://travis-ci.org/odopod/code-library.svg?branch=master)](https://travis-ci.org/odopod/code-library)

> A collection of vanilla JavaScript components used in Odopod projects.

## Want to contribute to Odo?

Take a look at [CONTRIBUTING.md](https://github.com/odopod/code-library/blob/master/CONTRIBUTING.md).

## Packages

The Odo repo is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md); it's composed of many npm packages.

| Package | Version |
|---------|---------|
| [`@odopod/odo-affix`](/packages/odo-affix) | [![npm](https://img.shields.io/npm/v/@odopod/odo-affix.svg)](https://www.npmjs.com/package/@odopod/odo-affix) |
| [`@odopod/odo-background-video`](/packages/odo-background-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-background-video.svg)](https://www.npmjs.com/package/@odopod/odo-background-video) |
| [`@odopod/odo-base-component`](/packages/odo-base-component) | [![npm](https://img.shields.io/npm/v/@odopod/odo-base-component.svg)](https://www.npmjs.com/package/@odopod/odo-base-component) |
| [`@odopod/odo-carousel`](/packages/odo-carousel) | [![npm](https://img.shields.io/npm/v/@odopod/odo-carousel.svg)](https://www.npmjs.com/package/@odopod/odo-carousel) |
| [`@odopod/odo-device`](/packages/odo-device) | [![npm](https://img.shields.io/npm/v/@odopod/odo-device.svg)](https://www.npmjs.com/package/@odopod/odo-device) |
| [`@odopod/odo-dialog`](/packages/odo-dialog) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dialog.svg)](https://www.npmjs.com/package/@odopod/odo-dialog) |
| [`@odopod/odo-draggable`](/packages/odo-draggable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-draggable.svg)](https://www.npmjs.com/package/@odopod/odo-draggable) |
| [`@odopod/odo-dropdown`](/packages/odo-dropdown) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dropdown.svg)](https://www.npmjs.com/package/@odopod/odo-dropdown) |
| [`@odopod/odo-dual-viewer`](/packages/odo-dual-viewer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dual-viewer.svg)](https://www.npmjs.com/package/@odopod/odo-dual-viewer) |
| [`@odopod/odo-expandable`](/packages/odo-expandable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-expandable.svg)](https://www.npmjs.com/package/@odopod/odo-expandable) |
| [`@odopod/odo-helpers`](/packages/odo-helpers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-helpers.svg)](https://www.npmjs.com/package/@odopod/odo-helpers) |
| [`@odopod/odo-hotspots`](/packages/odo-hotspots) | [![npm](https://img.shields.io/npm/v/@odopod/odo-hotspots.svg)](https://www.npmjs.com/package/@odopod/odo-hotspots) |
| [`@odopod/odo-module`](/packages/odo-module) | [![npm](https://img.shields.io/npm/v/@odopod/odo-module.svg)](https://www.npmjs.com/package/@odopod/odo-module) |
| [`@odopod/odo-object-fit`](/packages/odo-object-fit) | [![npm](https://img.shields.io/npm/v/@odopod/odo-object-fit.svg)](https://www.npmjs.com/package/@odopod/odo-object-fit) |
| [`@odopod/odo-on-swipe`](/packages/odo-on-swipe) | [![npm](https://img.shields.io/npm/v/@odopod/odo-on-swipe.svg)](https://www.npmjs.com/package/@odopod/odo-on-swipe) |
| [`@odopod/odo-pointer`](/packages/odo-pointer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-pointer.svg)](https://www.npmjs.com/package/@odopod/odo-pointer) |
| [`@odopod/odo-responsive-attributes`](/packages/odo-responsive-attributes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-attributes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-attributes) |
| [`@odopod/odo-responsive-classes`](/packages/odo-responsive-classes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-classes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-classes) |
| [`@odopod/odo-responsive-images`](/packages/odo-responsive-images) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-images.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-images) |
| [`@odopod/odo-reveal`](/packages/odo-reveal) | [![npm](https://img.shields.io/npm/v/@odopod/odo-reveal.svg)](https://www.npmjs.com/package/@odopod/odo-reveal) |
| [`@odopod/odo-sassplate`](/packages/odo-sassplate) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sassplate.svg)](https://www.npmjs.com/package/@odopod/odo-sassplate) |
| [`@odopod/odo-scroll-animation`](/packages/odo-scroll-animation) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-animation.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-animation) |
| [`@odopod/odo-scroll-feedback`](/packages/odo-scroll-feedback) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-feedback.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-feedback) |
| [`@odopod/odo-share`](/packages/odo-share) | [![npm](https://img.shields.io/npm/v/@odopod/odo-share.svg)](https://www.npmjs.com/package/@odopod/odo-share) |
| [`@odopod/odo-sticky-headers`](/packages/odo-sticky-headers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sticky-headers.svg)](https://www.npmjs.com/package/@odopod/odo-sticky-headers) |
| [`@odopod/odo-tabs`](/packages/odo-tabs) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tabs.svg)](https://www.npmjs.com/package/@odopod/odo-tabs) |
| [`@odopod/odo-tap`](/packages/odo-tap) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tap.svg)](https://www.npmjs.com/package/@odopod/odo-tap) |
| [`@odopod/odo-video`](/packages/odo-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-video.svg)](https://www.npmjs.com/package/@odopod/odo-video) |
| [`@odopod/odo-viewport`](/packages/odo-viewport) | [![npm](https://img.shields.io/npm/v/@odopod/odo-viewport.svg)](https://www.npmjs.com/package/@odopod/odo-viewport) |
| [`@odopod/odo-window-events`](/packages/odo-window-events) | [![npm](https://img.shields.io/npm/v/@odopod/odo-window-events.svg)](https://www.npmjs.com/package/@odopod/odo-window-events) |

## 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`](https://github.com/babel/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.

```js
// 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',
    },
  },
}
```
{'fraction_non_alphanumeric': 0.23274789102475452, 'fraction_numerical': 0.00027658691743880515, 'mean_word_length': 4.7098302408211605, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 132, 'lorem ipsum': 0, 'www.': 60, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5117119', 'n_tokens_mistral': 6093, 'n_tokens_neox': 5524, 'n_words': 496}