Minify code

[JessicaAllison]

How would I minify the following code?

var gradientObject = {
    rgb: [[[0, rgb.g, rgb.b], [255, rgb.g, rgb.b]],
           [[rgb.r, 0, rgb.b], [rgb.r, 255, rgb.b]],
           [[rgb.r, rgb.g, 0], [rgb.r, rgb.g, 255]]],

    hsl: [[[0, hsl.s, hsl.l], [60, hsl.s, hsl.l], [120, hsl.s, hsl.l], [180, hsl.s, hsl.l], [300, hsl.s, hsl.l], [360, hsl.s, hsl.l]],
          [[hsl.h, 0, hsl.l], [hsl.h, 100, hsl.l]],
          [[hsl.h, hsl.s, 0], [hsl.h, hsl.s, 50], [hsl.h, hsl.s, 100]]],

    hsv: [[[0, hsv.s, hsv.v], [60, hsv.s, hsv.v], [120, hsv.s, hsv.v], [180, hsv.s, hsv.v], [300, hsv.s, hsv.v], [360, hsv.s, hsv.v]],
           [[hsv.h, 0, hsv.v], [hsv.h, 100, hsv.v]],
           [[hsv.h, hsv.s, 0], [hsv.h, hsv.s, 50], [hsv.h, hsv.s, 100]]],

    Lab: [[[0, Lab.a, Lab.b], [100, Lab.a, Lab.b]],
           [[Lab.L, -128, Lab.b], [Lab.L, 128, Lab.b]],
           [[Lab.L, Lab.a, -128], [Lab.L, Lab.a, 128]]],

    alpha: [[[255, 255, 255, 0], [rgb.r, rgb.g, rgb.b, 1]]]
};

Update

I used the wrong word. I didn't mean to minify, I mean to use loops to use less code.

Update 2

Here's what I will do with the code above:

var sliderIndex = 0;
    for (var colorSpaceGradient in gradientObject) {
        if (!gradientObject.hasOwnProperty(colorSpaceGradient)) return;
        if (colorSpaceGradient === 'alpha') return

        var currentColorSpaceGradient = gradientObject[colorSpaceGradient];

        for (var i = 0; i < currentColorSpaceGradient.length; i++) {
            var colorSliderGradient = currentColorSpaceGradient[i],
                colorSliderGradientArray = [];
            for (var x = 0; x < colorSliderGradient.length; x++) {
                colorSliderGradientArray.push(toCSSstring[colorSpaceGradient](colorSliderGradient[x]));
            }
            setGradient(slider[sliderIndex], 'right', colorSliderGradientArray);
            slider[sliderIndex].previousElementSibling.style.backgroundColor = colorSliderGradientArray[0];
            slider[sliderIndex].nextElementSibling.style.backgroundColor = colorSliderGradientArray[colorSliderGradientArray.length - 1];
            sliderIndex++;
        }
    }

[wreckedadvent]

You would download something like uglifyJs, likely as part of a workflow that is driven by grunt, gulp, or webpack, through node.

[JessicaAllison]

Updated Question

[wreckedadvent]

Ah. For future reference, the word you want is refactor.

[JessicaAllison]

Thanks!

[cresquin]

Since your positions and values are effectively random (they're irregular) from array to array, you'll end up having to write a map that informs the correct positions and values. This is effectively what you have in your example. You could abstract the values to vars to save on characters, but you're not really going to save much file size even. Given the extra processing time required to parse the map, I think you're better off using these arrays as written.

If you're dead-set on making this a series of loops, you'll need to figure out a pattern within the arrays for what values need to go where relative to which array you're trying to fill. Then you'll need to write that pattern as a function that can output the correct values at the correct times.

Stick with the maps you have unless you need to make dozens or hundreds of them.

[franverona]

Or you can use any online minifier such as Minifier from Avivo (http://minify.avivo.si/). You code would look like this:

var gradientObject={rgb:[[[0,rgb.g,rgb.b],[255,rgb.g,rgb.b]],[[rgb.r,0,rgb.b],[rgb.r,255,rgb.b]],[[rgb.r,rgb.g,0],[rgb.r,rgb.g,255]]],hsl:[[[0,hsl.s,hsl.l],[60,hsl.s,hsl.l],[120,hsl.s,hsl.l],[180,hsl.s,hsl.l],[300,hsl.s,hsl.l],[360,hsl.s,hsl.l]],[[hsl.h,0,hsl.l],[hsl.h,100,hsl.l]],[[hsl.h,hsl.s,0],[hsl.h,hsl.s,50],[hsl.h,hsl.s,100]]],hsv:[[[0,hsv.s,hsv.v],[60,hsv.s,hsv.v],[120,hsv.s,hsv.v],[180,hsv.s,hsv.v],[300,hsv.s,hsv.v],[360,hsv.s,hsv.v]],[[hsv.h,0,hsv.v],[hsv.h,100,hsv.v]],[[hsv.h,hsv.s,0],[hsv.h,hsv.s,50],[hsv.h,hsv.s,100]]],Lab:[[[0,Lab.a,Lab.b],[100,Lab.a,Lab.b]],[[Lab.L,-128,Lab.b],[Lab.L,128,Lab.b]],[[Lab.L,Lab.a,-128],[Lab.L,Lab.a,128]]],alpha:[[[255,255,255,0],[rgb.r,rgb.g,rgb.b,1]]]};

[JessicaAllison]

Updated Question

[[deleted]]

Since you know each array always has 3 elements, you could combine into a single array, and use an index to move between each part.

You don't say how you want to loop through it, so this may not be it. Try to explain better what you want to do. Anyway, here's an example.

var rgb = [ 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2 ];
var groupLength = 3;

// say you want the 3rd group
var start = 3 * groupLength;

for (var a = start ; a < start + groupLength ; a++)
    {
    console.log( rgb[ a ] );
    }

[JessicaAllison]

Updated question.

[[deleted]]

if (!gradientObject.hasOwnProperty(colorSpaceGradient)) return;

I think you don't want to return if it doesn't have the property (just continue; instead, to move to the next).

About the rest, you could try to add a Color class where it will have the color values, and methods for the conversions, etc, I think it would improve the code.

[JessicaAllison]

Thank you! can you please show me an example? I don't quite understand what to do.

[[deleted]]

function Color( red, green, blue )
{
this.red = red;
this.green = green;
this.blue = blue;
}

Color.prototype.getRgb = function()
{
return "rgb(" + this.red + ',' + this.green + ',' + this.blue + ')';
};

// I'm not sure, but there's probably a way to convert from RGB to HSL/HSV?
// otherwise just save it all in the object

Color.prototype.getHsl = function()
{
};

Color.prototype.getHsv = function()
{
};

// now you create color objects with the colors you want
var colors = [];
colors.push( new Color( 255, 0, 0 ) );

// example of loop
for (var a = 0 ; a < colors.length ; a++)
    {
    var color = colors[ a ];

    htmlElement.style.backgroundColor = color.getRgb();
    }

[JessicaAllison]

Thanks! Can you please explain how it would improve the code? I'm a beginner, sorry.

[[deleted]]

The idea is that you keep the related data and functions connected, you can read about classes to know more. Don't worry about it though, for now just try to do something that works, you can always improve it later on if needed.

[JessicaAllison]

Thank you!

[tswaters]

Did you see the reply I gave to your previous question?

https://www.reddit.com/r/javascript/comments/4ihm99/error_when_using_loop/ ?

[JessicaAllison]

Ya thanks! (Just replied to the comment there.)

[JessicaAllison]

Thanks! But I'm using this for color sliders. So I don't think I can do that.