Gradient Generator UI

> Visual and interactive gradient generator

Library to create a gradient generator in vanilla-js with interactive user interface in html

Installing

``bash
yarn add gradient-generator-ui
`

or

`bash
npm install gradient-generator-ui
`

Or with CDN links

`HTML





`

Basic Usage

`js
const gradientRoot = document.getElementById('gradient-root');

const myColorGen = new GradientGenerator({
mainElement: gradientRoot,
initialColors: [
{ colorHex: '#ff0000', position: 0 },
{ colorHex: '#00ff00', position: 50 },
{ colorHex: '#0000ff', position: 100 },
],
});

const colors1 = myColorGen.generateColors(50);
console.log(colors1); // Generate 50 colors using the first values

myColorGen.addColors(
{ colorHex: '#fafa00', position: 80 },
{ colorHex: '#001919', position: 30 }
);

const colors2 = myColorGen.generateColors(100);
console.log(colors2); // Generate 100 colors using the first values and the news
`

see example here

$3

`js
const myColorGen = new GradientGenerator();

const colors1 = myColorGen.generateColors();
console.log(colors1); // Generate 100 colors using the default values

myColorGen.addColors(
{ colorHex: '#fafa00', position: 80 },
{ colorHex: '#001919', position: 30 }
);

const colors2 = myColorGen.generateColors(100);
console.log(colors2); // Generate 100 colors using the default values and the news
`

See this example here

$3

`js
const gradientRoot = document.getElementById('gradient-root');

const myColorGen = new GradientGenerator({ mainElement: gradientRoot });
const myGenManager = myColorGen.createUIManager({ keepChanges: false });

const addBtn = document.getElementById('add');
addBtn.addEventListener('click', () => {
myGenManager.setAddMode();
});

const cancelBtn = document.getElementById('cancel');
cancelBtn.addEventListener('click', () => {
myGenManager.cancelAddMode();
});
`

See this example here

API

$3

- Constructor Options:

- mainElement (_default:_ null) - pass a empty HTMLElement root of the gradient.
- initialColors (_default:_ [
{ colorHex: '#ff0000', position: 10 },
{ colorHex: '#ffff00', position: 40 },
{ colorHex: '#00ff77', position: 70 } ]) - pass an array of objects with a hexadecimal color and relative position (0 - 100)

- generateColors(size = 100) - Generate the intermediate colors accord an expected number of colors generated

- addColors(...{ colorHex, position }) - Add one or many new intermediate color with ther respective relative position

- getGradientColors() - Get the gradient generator colors ordered by position

- setGradientColors([{colorHex, position}]) - Reset the gradient generator colors base

- createUIManager(ManagerConstructorOptions) - Get a new Generator Manager with this generator to interact with the user interface.

$3

- Constructor Options:

- generator: GradientGenerator - Pass the generator to manage
- keepChanges (_default_: true) - keep the changes on the interface in each interaction

- activateAddMode() - Activates the interaction with the user interface to add a new element on click on the main element

- cancelAddMode() - Deactivate the interaction with the user interface to add new elements

- restoreColors() - if keepChanges is false, it restores the colors of the last restore point

- saveColors() - Create a new restore point with current colors

Author

Edison Peñuela – @EdisonPeM – edisonpe961206@hotmail.com

Distributed under the MIT license. See LICENSE for more information.

Contributing

1. Fork it ()
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar`)
5. Create a new Pull Request