https://github.com/07akioni/seemly

https://github.com/07akioni/seemly

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/07akioni/seemly
• Owner: 07akioni
• License: mit
• Created: 2020-12-02T09:43:30.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-08T14:01:28.000Z (3 months ago)
• Last Synced: 2024-10-08T15:21:01.105Z (3 months ago)
• Language: TypeScript
• Size: 83 KB
• Stars: 21
• Watchers: 2
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# seemly

Util functions for creating user interface.

## Installation

```bash

npm install --save-dev seemly

```

## Usage

```js

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`

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`.