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