odopod/code-library

A collection of vanilla JavaScript components used in Odopod projects.

code-library's Issues

`lazy` option for OdoModule's `initializeAll`

A lazy option for OdoModule would default to false. If true, requestIdleCallback would be used inside initializeAll() and return a promise.

requestIdleCallback is supported in Chrome and Firefox and under consideration for WebKit and Edge. A polyfill would be needed https://www.npmjs.com/package/request-idle-callback.

This new option would give developers the ability to delay initialization of modules that are not needed on page load (like a footer, modules below the fold, or a component that won't shift itself after being initialized).

Expandable missing public "update" method.

Usage:

If content shifts after the page loads, offsets will be incorrect for the accordion expandables and need to be updated.

Currently the only option I see is

window.addEventListener('load', function onLoad() {
  window.removeEventListener('load', onLoad);
  expandables.forEach(function (expandable) {
    if (expandable._saveOffsets) {
      expandable._saveOffsets();
    }
  });
});

OdoHelpers Coordinate Docs Typos

Docs for Coordinate

var Coordinate = OdoHelpers.coordinate;

Should be

var Coordinate = OdoHelpers.Coordinate;

Docs for Coordinate.distance use Coordinate.difference

var end = new Coordinate(50, 100);
Coordinate.difference(start, end); // -64.03

Should be

var end = new Coordinate(50, 100);
Coordinate.distance(start, end); // 64.03

Dialog: Use `overscroll-behavior` instead of ScrollFix

Launched in Chrome 63. Feature-detect overscroll-behavior and use that instead of ScrollFix for OdoDialog.

https://developers.google.com/web/updates/2017/11/overscroll-behavior

Viewport: replace custom intersection logic with IntersectionObserver

Would be a breaking change because the polyfill would be required (unless it were bundled).

https://caniuse.com/#feat=intersectionobserver
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://github.com/w3c/IntersectionObserver/tree/master/polyfill

Viewport would become a simple wrapper around IntersectionObserver to determine when to call the enter() and exit() methods for items.

Add a description for each package in the README table

Sassplate: CSS Grid

How should we go about supporting CSS Grid? It's well-supported in evergreen browsers.

Does it make sense to continue with our current classes (e.g. col-4@sm) or should we leverage some more powerful grid features?

Should we remove the push, pull, and offset classes with how easy CSS Grid makes this? Are there helper classes which would replace them?

I'd like to find some examples of another grid framework using CSS Grid.

Non-draggable carousel still has grabbable class

const carousel = new OdoCarousel(element);
carousel.setDraggable(false);

Carousel is no longer draggable, but it still shows the grab cursor because of the grabble class.

In Draggable#set isEnabled, it should probably toggle the grabbable class.

Affix: add class when affixed

Classes are currently added when the affix is at the top and bottom, but not when it's sticky, forcing the use of :not(...) selectors.

Expandable: emit event when item is open or closed

When an expandable item is opened or closed, it would be useful for the ExpandableGroup to emit an event.

Expandable accordion scrolls the page when it shouldn't

Odo component name

Expandable

Odo component version

0.1.1

Reproduction Link

http://code.odopod.com/odo-expandable/

Steps to reproduce

Scroll down to the accordions such that when expanded, the third item's content would be out of view, but the third item's button is in view.

What is Expected?

Page shouldn't scroll

What is actually happening?

Page scrolls

https for code.odopod.com

Let's encrypt that.

Expandable: Add height animation to items

My goal is to have the accordion-like animation with as many as desired expandables to be open at a time. Currently the only way to get the animation is with the accordion and that only allows 1 item open at a time.

Draggable: document SETTLE event

It already exists, just need to add it to the events draggable emits in the documentation.

OdoWindowEvents missing callback parameter docs

Add (scrollTop, scrollLeft) and (viewportWidth, viewportHeight) to odo-window-events documentation examples.

Hotspots demo missing right parenthesis in styles paragraph

http://code.odopod.com/odo-hotspots/

https://github.com/odopod/code-library/blob/master/packages/odo-hotspots/demos/index.html#L32

Draggable: emit settle event if draggable reaches limits

It currently continues to animate even though it can't go anywhere.