okiba-gang / okiba-ui

Set of ready-made components that offer new capabilities or solve specific issues

Okiba UI

A complete collection of Okiba tools and components that help you to manage UI elements and behaviors

---

Installation

You can grab all Okiba UI packages by using npx installer:

npx @okiba/ui

Usage

Untranspiled code 🛑

Okiba UI packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

Full Components List:

cursor

A base component aimed to handle a custom html cursor

constructor, setup, show, hide, move, hover, reset, onPointerInView, onPointerMove, onPointerOver, onPointerDown, onPointerUp, onRAF, onResize, listen, onDestroy, defaultTriggers

---

detect

Utilities to check some browser features

hasPassiveEvents, hasTouch

---

event-manager

A custom events management system

Submodules:

• EventManager

A singleton to manage centralized event listeners

subscribedEvents, hasListeners, subscribe, unsubscribe, update, on, off, emit, clear, destroy

• AbstractHandler

A base class that defines a global event handler interface

module:AbstractHandler, eventCallback, listen, unlisten, dispatch

• EventHandler

An handler class aimed to centralize a native browser event listener

listen, unlisten, dispatch

• RAFHandler

An handler class aimed to centralize a requestAnimationFrame

nextFrame, listen, unlisten

---

pointer

A wrapper class that collects normalized (both mouse and touch) pointer information

coords, target, inview, lastEvent, matches

---

scroll-container

A class that extends Component (@okiba/component). When is enabled, it set the height of body with the element body, and set the element in fixed position so you can use the native scroll to animate what you want.

disable, enable, onResize, updateBodyHeight, listen, unlisten, onDestroy

---

scroll-element

A class that extends Component (@okiba/component). When enabled, this component translate the dom element to the last Y passed to onScroll function

disable, enable, update, onRaf, onResize, listen, unlisten, onDestroy

---

scroll-manager

A class that extends EventEmitter (@okiba/event-emitter). Basically emits scroll events in two different ways, when enabled it lerp the scroll position and emits scroll events on request animation frame, when disable is like a proxy of native scroll events.

disable, enable, onRaf, onChange, listen, unlisten, trigger

---

sizes-cache

A class to compute and cache element sizes.

get, compute, onResize, listen, unlisten, reset

---

smooth-scroll

Makes elements scroll smoothly with lerped translations Can be extended or instantiated

constructor, enable, disable, onScroll, listen, unlisten, onDestroy

---

sticky-content

Makes an element sticky according to page scroll Can be extended or instantiated

constructor, enable, disable, update, onResize, listen, unlisten, onDestroy

---

view-progress

Retrieves the percentage (0 to 1) of element's in-view portion according to page scroll Can be extended or instantiated

constructor, update, onResize, listen, unlisten, onDestroy