javascript-color-gradient - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

package.json

 {
   "name": "javascript-color-gradient",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "javascript-color-gradient is a lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints. ",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -0,1 +1,3 @@
+<img align="right" src="https://mymodernmet.com/wp/wp-content/uploads/2018/09/color-theory-basics.jpg" width="300"/>
+
 ## javascript-color-gradient
@@ -12,4 +14,6 @@
 
-https://codesandbox.io/s/javascript-color-gradient-csgfd
+See [Live Preview on CodeSandbox](https://codesandbox.io/s/javascript-color-gradient-csgfd).
 
+**Note:** All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
+
 ## Installation
@@ -21,4 +25,12 @@
 
+or
+
+```bash
+yarn add javascript-color-gradient
+```
+
 ## Usage
 
+Using two color gradients
+
 ```javascript
@@ -35,17 +47,55 @@ import Gradient from "javascript-color-gradient";
 
+Or more:
+
+```javascript
+import Gradient from "javascript-color-gradient";
+
+const colorGradient = new Gradient();
+
+const color1 = "#3F2CAF";
+const color2 = "#e9446a";
+const color3 = "#edc988";
+const color4 = "#607D8B";
+
+colorGradient.setMidpoint(20);
+
+colorGradient.setGradient(color1, color2, color3, color4);
+```
+
 ## Methods
 
-##### setGradient(color1, color2) - sets two or more hex color values. Should always be defined.
+To set two or more hex color values. Should always be defined.
 
-##### setMidpoint(n) - sets the number range to n. By default n is 10.
+```javascript
+setGradient(color1, color2);
+```
 
-##### getArray() - returns an array of hex colors. Requires no parameters.
+To set the number range to n. By default n is 10.
 
-##### getColor(n) - returns certain hex color, where n is a requested number of midpoint colors.
+```javascript
+setMidpoint(n);
+```
 
+To return an array of hex colors. Requires no parameters.
+
 ```javascript
-console.log(colorGradient.getArray()); // outputs ["#4e4ab9", "#5d68c4", "#6d86ce", "#7ca4d9", "#8bc2e3"]
-console.log(colorGradient.getColor(3)); // outputs #6d86ce
+getArray();
 ```
 
+To return certain hex color corresponding to the number.
+
+```javascript
+getColor(n);
+```
+
+Let's see them in action:
+
+```javascript
+console.log(colorGradient.getArray());
+// outputs ["#4e4ab9", "#5d68c4", "#6d86ce", "#7ca4d9", "#8bc2e3"]
+
+console.log(colorGradient.getColor(3));
+// outputs #6d86ce
+```
+
 ## Example
@@ -55,4 +105,8 @@
 
-![image](https://user-images.githubusercontent.com/48876996/87862417-e1c44080-c960-11ea-817c-b025d8d236ea.PNG)
+![1](https://user-images.githubusercontent.com/48876996/98634350-9c2ae980-233c-11eb-91f5-8c97b2194191.png)
 
+The following example is using four gradient colors and 20 midpoints.
+
+![1](https://user-images.githubusercontent.com/48876996/98633966-e8c1f500-233b-11eb-8b86-26a39c12b7d0.png)
+
 ## Contributing
@@ -67,1 +121,8 @@
 javascript-color-gradient is [MIT licensed.](https://github.com/Adrinlol/javascript-color-gradient/blob/master/LICENSE)
+
+## Contributors
+
+Special thanks to all the contributors who have contributed for this project.
+
+[![](https://avatars2.githubusercontent.com/u/48876996?s=60&u=56a4865489e47ec29133e8792094ae83d8a9952c&v=4)](https://github.com/adrinlol)
+[![](https://avatars2.githubusercontent.com/u/29488727?s=60&u=a25b4053dc78f359299c3b700cb13ff2554b92d7&v=4)](https://github.com/Saspect-IO)

src/index.js

 class Gradient {
-    constructor(gradients = '', maxNum = 10, colors = ['', '']) {
+    constructor(gradients = '', maxNum = 10, colors = ['', ''], intervals = []) {
 
@@ -10,11 +10,23 @@ const setColors = props => {
                 let firstGradient = new GradientColor();
+                let lower = 0;
+                let upper = 0 + increment;
                 firstGradient.setGradient(props[0], props[1]);
-                firstGradient.setMidpoint(0, 0 + increment);
+                firstGradient.setMidpoint(lower, upper);
                 gradients = [firstGradient];
+                intervals = [{
+                    lower,
+                    upper
+                }];
 
                 for (let i = 1; i < props.length - 1; i++) {
                     let gradientColor = new GradientColor();
+                    let lower = 0 + increment * i;
+                    let upper = 0 + increment * (i + 1);
                     gradientColor.setGradient(props[i], props[i + 1]);
-                    gradientColor.setMidpoint(0 + increment * i, 0 + increment * (i + 1));
+                    gradientColor.setMidpoint(lower, upper);
                     gradients[i] = gradientColor;
+                    intervals[i] = {
+                        lower,
+                        upper
+                    };
                 }
@@ -32,4 +44,9 @@ colors = props;
             let gradientArray = [];
-            for (let i = 1; i < maxNum + 1; i++) {
-                gradientArray.push(gradients[0].getColor(i))
+            for (let j = 0; j < intervals.length; j++) {
+                const interval = intervals[j];
+                const start = interval.lower === 0 ? 1 : Math.ceil(interval.lower);
+                const end = interval.upper === maxNum ? interval.upper + 1 : Math.ceil(interval.upper);
+                for (let i = start; i < end; i++) {
+                    gradientArray.push(gradients[j].getColor(i))
+                }
             }
@@ -85,3 +102,2 @@ return gradientArray;
 
-
         const generateHex = (number, start, end) => {
@@ -101,2 +117,3 @@ if (number < minNum) {
         }
+
         const getHexColor = props => {
@@ -103,0 +120,0 @@ return props.substring(props.length - 6, props.length);

No alert changes

Improved metrics

Total package byte prevSize

12068

increased by20.62%

Lines of code

153

increased by12.5%

Number of lines in readme file

124

increased by96.83%

No dependency changes