Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/odopod/code-library

A collection of vanilla JavaScript components used in Odopod projects.
https://github.com/odopod/code-library

carousel components draggable hotspots javascript modal odopod vanilla-javascript video viewport

Last synced: about 2 months ago
JSON representation

A collection of vanilla JavaScript components used in Odopod projects.

Host: GitHub
URL: https://github.com/odopod/code-library
Owner: odopod
License: mit
Created: 2017-07-21T21:05:07.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-11-07T22:12:33.000Z (almost 6 years ago)
Last Synced: 2024-07-22T13:39:11.063Z (2 months ago)
Topics: carousel, components, draggable, hotspots, javascript, modal, odopod, vanilla-javascript, video, viewport
Language: JavaScript
Homepage: http://code.odopod.com
Size: 2.31 MB
Stars: 28
Watchers: 10
Forks: 8
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        # 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',

    },

  },

}

```

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

```js

module: {

  rules: [

    {

      test: /\.js$/,

      exclude: /node_modules\/(?!@odopod\/odo-)/,

      loader: 'babel-loader',

    },

  }

]

```