Necromancers Playing MTG

    seemly
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.6 • Public • Published

    seemly

    Util functions for creating user interface.

    Installation

    npm install --save-dev seemly

    Usage

    import { xxx } from 'seemly'

    API

    Animation

    beforeNextFrame(callback: Function): void

    Call the callback function before next frame.

    beforeNextFrameOnce(callback: Function): void

    Call the callback function before next frame. Same function won't be called more than once.

    Color

    In the following functions, RGBA is [number, number, number, number], RGB is [number, number, number].

    rgba (color: string): RGBA

    Get the rgba value of a string color.

    Color could only be #000, #0000, #000000, #00000000, rgb(0, 0, 0), rgba(0, 0, 0, 0) formatted.

    composite (background: string | RGB | RGBA, overlay: string | RGB | RGBA): string

    Get the rgba formatted string of composited color of the two color.

    For example: composite('#FFF', 'rgba(0, 0, 0, .5)') === 'rgba(127, 127, 127, 1)', composite('rgba(255, 255, 255, .5)', 'rgba(0, 0, 0, .5)') === 'rgba(85, 85, 85, 0.75)'.

    CSS

    depx (value: string | number): number

    Remove the 'px' of the input value and get the number value of it.

    For example: depx('1px') === 1, depx('1') === 1, depx(1) === 1.

    pxfy (value: string | number): string

    Append the 'px' on the input value.

    For example: pxfy(1) === '1px', pxfy('1') === '1px', 'pxfy('1px') === '1px').

    parseResponsiveProp (responsiveProp: string): Record<string, string>

    Transform a css utility class to a js object.

    For example: parseResponsiveProp('6 m:12 l:24') is { '': 6, m: '12', l: '24' }

    parseResponsivePropValue (responsiveProp: string, activeKey: string): string | undefined

    Get corresponding value by key.

    For example: parseResponsiveProp('6 m:12 l:24', 'l') is '24'. parseResponsiveProp('6 m:12 l:24'), parseResponsiveProp('6 m:12 l:24', 'x') are '6'.

    DOM

    getScrollParent (node: Node | null): HTMLElement | Document | null

    Get the scrollable parent node of current node.

    unwrapElement (target: HTMLElement | string | () => HTMLElement): HTMLElement | null

    Unwrap the HTMLElement from a element getter function or a element selector.

    If the target is already a HTMLElement, the same value will be returned.

    Misc

    createId (length: number = 8): string

    Get a unique random id with length of length.

    Keywords

    none

    Install

    npm i seemly

    DownloadsWeekly Downloads

    13,491

    Version

    0.3.6

    License

    MIT

    Unpacked Size

    70.7 kB

    Total Files

    58

    Last publish

    Collaborators

    • 07akioni