smooth-gradient - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

docs/index.js

@@ -0,2 +1,85 @@
+const NB_COLORS = 4;
+let colors = [];
 
-const gradient = new Gradient();
+const randomValue = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+const decToHex = (dec) => {
+  let hex = dec.toString(16);
+  if (hex.length <= 1) {
+    hex = "0" + hex;
+  }
+  return hex;
+};
+
+
+for (let i = 0; i < NB_COLORS; i++) {
+  const r = randomValue(0, 255),
+    g = randomValue(0, 255),
+    b = randomValue(0, 255);
+  colors.push(`#${decToHex(r)}${decToHex(g)}${decToHex(b)}`)
+}
+
+
+const gradient = new Gradient(...colors);
+
+const addColorGradient = (color1, color2) => {
+  let div = document.createElement('div');
+  div.className = "gradient";
+  div.style.background = `linear-gradient(90deg, ${toRGB(color1)} 0%, ${toRGB(color2)} 100%)`
+  document.getElementById('gradients').append(div);
+}
+
+const toRGB = (color) => {
+  return `rgb(${color.r}, ${color.g}, ${color.b})`
+}
+
+for (let i = 0; i < gradient.colors.length - 1; i++) {
+  //addColorGradient(gradient.colors[i], gradient.colors[i + 1]);
+}
+
+const gradientColor = gradient.colors;
+const gradientScale = gradient.getColorsScale();
+let backgroundColor = `linear-gradient(90deg, `;
+
+for (let i = 0; i < gradientScale.length; i++) {
+  backgroundColor += `${toRGB(gradientColor[i])} ${gradientScale[i]}%${i !== gradientScale.length - 1 ? ',' : ''} `
+}
+backgroundColor += ')';
+
+
+document.getElementById('gradients').style.background = backgroundColor;
+
+const color = gradient.getColorFromValue(50, 'rgb');
+document.getElementById('selector').style.backgroundColor = color;
+
+
+/**
+ * HOVER
+ */
+
+document.getElementById('gradients').addEventListener("mousemove", (event) => {
+  const { x } = event;
+  const { width } = document.getElementById('gradients').getBoundingClientRect();
+  const position = x - document.getElementById('gradients').getBoundingClientRect().x;
+  const value = Math.floor(position * 100 / width);
+
+  if (value < 0) value = 0;
+  if (value > 100) value = 100;
+
+
+  document.getElementById('selector').style.left = `${value - 1}%`;
+  const color = gradient.getColorFromValue(value, 'rgb');
+  const colorHex = gradient.getColorFromValue(value, 'hex');
+  const colorComposite = gradient.getColorFromValue(value, null);
+  document.getElementById('hex').innerHTML = colorHex.toUpperCase();
+  document.getElementById('r').innerHTML = colorComposite[0];
+  document.getElementById('g').innerHTML = colorComposite[1];
+  document.getElementById('b').innerHTML = colorComposite[2];
+  document.getElementById('val').innerHTML = value + "%";
+
+  document.getElementById('selector').style.backgroundColor = color;
+  //document.getElementById('selector').style.border = `4px solid ${color}`;
+  //document.getElementById('gradients').style.border = `4px solid ${color}`;
+});

package.json

 {
   "name": "smooth-gradient",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Generates a gradient and can return a calculated color from an input",
@@ -5,0 +5,0 @@ "type": "module",

src/Gradient.js

@@ -69,6 +69,6 @@ import Color from './Color.js';
 
-    const totalWeight = (subGradient.to.value + subGradient.from.value)
+    const totalWeight = Math.round(subGradient.to.value - subGradient.from.value)
 
-    const leftWeight = totalWeight - Math.abs(subGradient.from.value - value);
-    const rightWeight = totalWeight - Math.abs(subGradient.to.value - value);
+    const leftWeight = Math.round(totalWeight - Math.abs(subGradient.from.value - value));
+    const rightWeight = Math.round(totalWeight - leftWeight);
 
@@ -75,0 +75,0 @@ const red = Math.round(this.getWeightedAverage(subGradient.from.color.r, leftWeight, subGradient.to.color.r, rightWeight));

No alert changes

Improved metrics

Total package byte prevSize

12929

increased by36.25%

Lines of code

294

increased by139.02%

Worsened metrics

Number of package files

11

decreased by-8.33%

No dependency changes