1 /*global one*/ 2 one.include('js:one/color.js'); 3 4 one.include('js:one/color-installColorSpace.js'); 5 one.include('js:one/color/RGB.js'); 6 one.include('js:one/color/HSV.js'); 7 8 /** 9 * @name one.color.HSL 10 * @class 11 * <p>A color in the HSL colorspace, with an optional alpha value.</p> 12 * <p>one.color.(RGB|HSL|HSV|CMYK) objects are designed to be 13 * immutable; all the conversion, set, and adjust methods return new 14 * objects.</p> 15 * <p>one.color.(RGB|HSL|HSV|CMYK) objects automatically get the set 16 * and adjust methods from all other installed colorspaces, so 17 * although you can use the explicit conversion methods ({@link 18 * one.color.HSL#toRGB}, {@link one.color.HSL#toHSV}...), the below 19 * will work just fine:</p><pre><code> 20 one.include('jslib:one/color/HSL.js'); 21 one.include('jslib:one/color/CMYK.js'); 22 one.include('jslib:one/color/RGB.js'); 23 24 new one.color.HSL(.4, .3, .9, .9). // HSL with alpha 25 adjustBlack(+.1). // Implicit conversion to CMYK (with alpha) 26 setGreen(-.1). // Implicit conversion to RGB (with alpha) 27 toCSSWithAlpha(); // "rgba(198,0,203,0.9)" 28 </code></pre> 29 * 30 * @constructor 31 * Create a new one.color.HSL object. Component values outside the 32 * supported range, [0..1], will be adjusted automatically. 33 * @param {Number} h The hue component, range: [0..1] 34 * @param {Number} s The saturation component, range: [0..1] 35 * @param {Number} l The lightness component, range: [0..1] 36 * @param {Number} [a] The alpha value, range: [0..1], 37 * defaults to 1 38 */ 39 40 one.color.installColorSpace('HSL', ['Hue', 'Saturation', 'Lightness', 'Alpha'], { 41 toHSV: function () { 42 // Algorithm adapted from http://wiki.secondlife.com/wiki/Color_conversion_scripts 43 var s = this.s, 44 l = this.l * 2; 45 if (l <= 1) { 46 s *= l; 47 } else { 48 s *= (2 - l); 49 } 50 return new one.color.HSV(this.h, (2 * s) / (l + s), (l + s) / 2, this.a); 51 }, 52 53 toRGB: function () { 54 return this.toHSV().toRGB(); 55 }, 56 57 fromRGB: function () { // Becomes one.color.RGB.prototype.toHSV 58 return this.toHSV().toHSL(); 59 } 60 }); 61 62 /** 63 * @name one.color.HSL.prototype.h 64 * @property 65 * @type Number 66 * @description The hue component, range: [0..1] 67 */ 68 69 /** 70 * @name one.color.HSL.prototype.s 71 * @property 72 * @type Number 73 * @description The saturation component, range: [0..1] 74 */ 75 76 /** 77 * @name one.color.HSL.prototype.l 78 * @property 79 * @type Number 80 * @description The lightness component, range: [0..1] 81 */ 82 83 /** 84 * @name one.color.HSL.prototype.a 85 * @property 86 * @type Number 87 * @description The alpha value, range: [0..1] 88 */ 89 90 /** 91 * @name one.color.HSL.prototype.setHue 92 * @function 93 * @param {Number} h The new hue component, range: [0..1] 94 * @return {one.color.HSL} New color object with the changed value. 95 */ 96 97 /** 98 * @name one.color.HSL.prototype.setSaturation 99 * @function 100 * @param {Number} s The new saturation component, range: [0..1] 101 * @return {one.color.HSL} New color object with the changed value. 102 */ 103 104 /** 105 * @name one.color.HSL.prototype 106 * @function setLightness 107 * @param {Number} l The new lightness component, range: [0..1] 108 * @return {one.color.HSL} New color object with the changed value. 109 */ 110 111 /** 112 * @name one.color.HSL.prototype.setAlpha 113 * @function 114 * @param {Number} a The new alpha value, range: [0..1] 115 * @return {one.color.HSL} New color object with the changed value. 116 */ 117 118 /** 119 * @name one.color.HSL.prototype.adjustHue 120 * @function 121 * @param {Number} h The value to add to the hue component. If the resulting 122 * value falls outside the supported range, [0..1], it will be 123 * adjusted automatically. 124 * @return {one.color.HSL} New color object with the changed value. 125 */ 126 127 /** 128 * @name one.color.HSL.prototype.adjustSaturation 129 * @function 130 * @param {Number} s The value to add to the saturation component. If the 131 * resulting value falls outside the supported range, [0..1], it will 132 * be adjusted automatically. 133 * @return {one.color.HSL} New color object with the changed value. 134 */ 135 136 /** 137 * @name one.color.HSL.prototype.adjustLightness 138 * @function 139 * @param {Number} l The value to add to the lightness component. If the 140 * resulting value falls outside the supported range, [0..1], it will 141 * be adjusted automatically. 142 * @return {one.color.HSL} New color object with the changed value. 143 */ 144 145 /** 146 * @name one.color.HSL.prototype.adjustAlpha 147 * @function 148 * @param {Number} a The value to add to the alpha value. If the resulting 149 * value falls outside the supported range, [0..1], it will be 150 * adjusted automatically. 151 * @return {one.color.HSL} New color object with the changed value. 152 */ 153 154 /** 155 * @name one.color.HSL.prototype.toJSON 156 * @description Convert the color to a JSON representation. 157 * @function 158 * @return {Array} 159 */ 160 161 /** 162 * @name one.color.HSL.prototype.toRGB 163 * @description Convert the color to a {@link one.color.RGB} object. 164 * @function 165 * @return {one.color.RGB} 166 */ 167 168 /** 169 * @name one.color.HSL.prototype.toHSV 170 * @description Convert the color to a {@link one.color.HSV} object. 171 * @function 172 * @return {one.color.HSV} 173 * @requires one.color.HSV 174 */ 175 176 /** 177 * @name one.color.HSL.prototype.toHSL 178 * @description Convert the color to a {@link one.color.HSL} object, ie. return the object itself. 179 * @function 180 * @return {one.color.HSL} 181 */ 182 183 /** 184 * @name one.color.HSL.prototype.toCMYK 185 * @description Convert the color to a {@link one.color.CMYK} object. 186 * @function 187 * @requires one.color.CMYK 188 * @return {one.color.CMYK} 189 */ 190 191 /** 192 * @name one.color.HSL.prototype.toHex 193 * @description Get the standard RGB hex representation of the color. 194 * @function 195 * @return {String} The hex string, e.g. "#f681df" 196 */ 197 198 /** 199 * @name one.color.HSL.prototype.toCSS 200 * @description Get a valid CSS color representation of the color without an alpha value. 201 * @function 202 * @return {String} The CSS color string, e.g. "rgb(123, 2, 202)" 203 */ 204 205 /** 206 * @name one.color.HSL.prototype.toCSSWithAlpha 207 * @description Get a valid CSS color representation of the color, including the alpha value. 208 * @function 209 * @return {String} The CSS color string, e.g. "rgba(123, 2, 202, 0.253)" 210 */ 211