# ab-gradient-picker

> Simple gradient picker

Latest version **1.2.6** (published 2020-12-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install ab-gradient-picker
pnpm add ab-gradient-picker
yarn add ab-gradient-picker
bun add ab-gradient-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2020-12-13 |
| First published | 2020-08-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 125 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | antonchyk |
| Maintainers | antonchyk |
| Keywords | gradient, picker |

## Links

- npm: https://www.npmjs.com/package/ab-gradient-picker
- Repository: https://github.com/Antonchyk/ab-gradient-picker
- Homepage: https://github.com/Antonchyk/ab-gradient-picker#readme
- Issues: https://github.com/Antonchyk/ab-gradient-picker/issues
- npm.io page: https://npm.io/package/ab-gradient-picker

## Recent versions

- 1.2.6 (latest) — 2020-12-13
- 1.2.5 — 2020-11-04
- 1.2.4 — 2020-10-28
- 1.2.3 — 2020-10-28
- 1.2.2 — 2020-08-21
- 1.2.1 — 2020-08-21
- 1.2.0 — 2020-08-20
- 1.1.0 — 2020-08-20
- 1.0.4 — 2020-08-18
- 1.0.3 — 2020-08-18
- 1.0.2 — 2020-08-18
- 1.0.1 — 2020-08-18
- 1.0.0 — 2020-08-17

## README

# ab-gradient-picker

Simple gradient picker, with no dependencies.

![Screenshot](https://iili.io/3sxIs4.png)

## Download

Install `npm i ab-gradient-picker`





## Usage

```ts
    const gp = createGradientPicker({
            initColors: [
                {
                    color: '#000000',
                    position: 0        
                },
                {
                    color: '#ffffff',
                    position: 100        
                }
            ]       
    });

    // Do stuff on change of the gradient
    gp.on('change', colors => {
        console.log(colors);
    })
```





# Configurations

* `initColors` - array of colors and positions (default: 
```
[
    { 
        color: '#ffffff',
        position: 0,            
    },
    {
        color: '#000000',
        position: 100,
    }
]

```
)
* `zIndex` - zIndex of popup (default: 999)
* `isCustomColorPicker` - if custom color picker is to be used; by default native browser one is used (default: false)




## Add custom color picker

ab-gradient-picker color picker is independent and uses the browser's native one by default, just to make it more accessible, but you can easily switch it with one of your choices (recommended as not all browsers support properly `input[type=color]`).

In the example below we use [a-color-picker](https://narsenico.github.io/a-color-picker/) just as the proof of concept

```ts
import {createGradientPicker, IGradientPickerConfig} from 'ab-gradient-picker';
import * as AColorPicker from 'a-color-picker';

const config: IGradientPickerConfig = {
    initColors: [
        {
            color: '#000000',
            position: 0,
        },
        {
            color: '#ffffff',
            position: 100,
        }
    ],
    zIndex: 1001,
    isCustomColorPicker: true
}

const gp = createGradientPicker(config);
gp.on('change', v => console.log('change', v));
gp.on('drag:start', v => console.log('drag:start', v));
gp.on('drag:end', v => console.log('drag:end', v));
const colorInput = gp.getInputElement();
colorInput.addEventListener('click', (e) => {
    const picker = AColorPicker.createPicker(colorInput, {color: gp.getActiveColor()});
    picker.on('change', (p: AColorPicker.ACPController, color) => {
        gp.setActiveColor(color);
    });
    picker.element.addEventListener('click', e => e.stopPropagation());

    document.addEventListener('click', (e) => {
        if (e.target !== colorInput && picker.element?.parentNode) {
            picker.element.parentNode.removeChild(picker.element);
        }
    });
    e.preventDefault();
})


```


## Events

Available events

* `change` - gradient is changed
* `drag:start` - started dragging the handler
* `drag:end` - stopped dragging the handler

## API

Methods

* `setActiveColor(color: string)` - change active color
* `getInputElement():HTMLElement | null` - get color input element to override its behaviour. If isCustomColorPicker set to true there is just div with background color. 
* `getActiveColor():string` - get color of active stop
* `show()` - show picker
* `hide()` - hide picker
## License

MIT

---
_Source: https://npm.io/package/ab-gradient-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._