diff --git a/README.md b/README.md index f30a7e3..8b5a70f 100644 --- a/README.md +++ b/README.md @@ -40,15 +40,18 @@ Add the generator (it's in the `dist` folder) to your html file and let it set t var generator = new ColorfulBackgroundGenerator(); // This adds 5 layers to the generator - // The parameters are: degree[0-360], - // hue[0-360], saturation[0-100], lightness[0-100], - // positionColor[0-100], positionTransparency[0-100] + // The parameters are: degree[0-360], + // h[0-360], + // s[0-1], + // l[0-1], + // posColor[0-100], + // posTransparency[0-100] // The lowest layer (at the bottom) in the css is the first added layer. - generator.addLayer(new ColorfulBackgroundLayer(325, 5, 95, 55, 100)); // bottom layer - generator.addLayer(new ColorfulBackgroundLayer(245, 75, 90, 70, 30, 80)); - generator.addLayer(new ColorfulBackgroundLayer(155, 150, 95, 70, 10, 80)); - generator.addLayer(new ColorfulBackgroundLayer(55, 230, 95, 65, 0, 70)); - generator.addLayer(new ColorfulBackgroundLayer(20, 300, 90, 65, 0, 55)); // top layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 325, h: 5, s: 95, l: 55, posColor: 100})); // bottom layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 225, h: 75, s: 90, l: 70, posColor: 30, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 155, h: 150, s: 95, l: 70, posColor: 10, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 55, h: 230, s: 95, l: 65, posColor: 0, posTransparency: 70})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 20, h: 300, s: 90, l: 65, posColor: 0, posTransparency: 55})); // top layer // Assign generated style to the element identified by it's id generator.assignStyleToElementId("colorful"); @@ -73,13 +76,16 @@ Another way is to use the generator to generate the css for the background and a var generator = new ColorfulBackgroundGenerator(); // This adds 3 layers to the generator - // The parameters are: degree[0-360], - // hue[0-360], saturation[0-100], lightness[0-100], - // positionColor[0-100], positionTransparency[0-100] + // The parameters are: degree[0-360], + // h[0-360], + // s[0-1], + // l[0-1], + // posColor[0-100], + // posTransparency[0-100] // The lowest layer (at the bottom) in the css is the first added layer. - generator.addLayer(new ColorfulBackgroundLayer(50, 35, 95, 45, 100)); // bottom layer - generator.addLayer(new ColorfulBackgroundLayer(140, 220, 90, 70, 30, 80)); - generator.addLayer(new ColorfulBackgroundLayer(210, 340, 90, 65, 10, 55)); // top layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 50, h: 35, s: 95, l: 45, posColor: 100})); // bottom layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 140, h: 220, s: 90, l: 70, posColor: 30, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 210, h: 340, s: 90, l: 65, posColor: 10, posTransparency: 55})); // top layer // Print the css style. var element = document.getElementById("code"); @@ -94,7 +100,7 @@ Hints ----- * Choose a high saturation between `80` and `100` * Choose a lightness between `40` and `60` -* The lowest (first added) layer should have the `positionTransparency` at `100` and `positionColor` > `50` to make the lowest layer more colorful then the other layers +* The lowest (first added) layer should have the `posTransparency` at `100` and `posColor` > `50` to make the lowest layer more colorful then the other layers Supported Browsers ------------------ diff --git a/examples/generate_css_example.html b/examples/generate_css_example.html index 46d9a4e..d595355 100644 --- a/examples/generate_css_example.html +++ b/examples/generate_css_example.html @@ -9,17 +9,20 @@ var generator = new ColorfulBackgroundGenerator(); // This adds 3 layers to the generator - // The parameters are: degree[0-360], - // hue[0-360], saturation[0-100], lightness[0-100], - // positionColor[0-100], positionTransparency[0-100] + // The parameters are: degree[0-360], + // h[0-360], + // s[0-1], + // l[0-1], + // posColor[0-100], + // posTransparency[0-100] // The lowest layer (at the bottom) in the css is the first added layer. - generator.addLayer(new ColorfulBackgroundLayer(50, 35, 95, 45, 100)); // bottom layer - generator.addLayer(new ColorfulBackgroundLayer(140, 220, 90, 70, 30, 80)); - generator.addLayer(new ColorfulBackgroundLayer(210, 340, 90, 65, 10, 55)); // top layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 50, h: 35, s: 95, l: 45, posColor: 100})); // bottom layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 140, h: 220, s: 90, l: 70, posColor: 30, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 210, h: 340, s: 90, l: 65, posColor: 10, posTransparency: 55})); // top layer // Print the css style. var element = document.getElementById("code"); element.innerHTML = generator.getCSSAsText(); - \ No newline at end of file + diff --git a/examples/include_generator_example.html b/examples/include_generator_example.html index 056f782..4e83754 100644 --- a/examples/include_generator_example.html +++ b/examples/include_generator_example.html @@ -17,19 +17,22 @@ var generator = new ColorfulBackgroundGenerator(); // This adds 5 layers to the generator - // The parameters are: degree[0-360], - // hue[0-360], saturation[0-100], lightness[0-100], - // positionColor[0-100], positionTransparency[0-100] + // The parameters are: degree[0-360], + // h[0-360], + // s[0-1], + // l[0-1], + // posColor[0-100], + // posTransparency[0-100] // The lowest layer (at the bottom) in the css is the first added layer. - generator.addLayer(new ColorfulBackgroundLayer(325, 5, 95, 55, 100)); // bottom layer - generator.addLayer(new ColorfulBackgroundLayer(245, 75, 90, 70, 30, 80)); - generator.addLayer(new ColorfulBackgroundLayer(155, 150, 95, 70, 10, 80)); - generator.addLayer(new ColorfulBackgroundLayer(55, 230, 95, 65, 0, 70)); - generator.addLayer(new ColorfulBackgroundLayer(20, 300, 90, 65, 0, 55)); // top layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 325, h: 5, s: 95, l: 55, posColor: 100})); // bottom layer + generator.addLayer(new ColorfulBackgroundLayer({degree: 225, h: 75, s: 90, l: 70, posColor: 30, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 155, h: 150, s: 95, l: 70, posColor: 10, posTransparency: 80})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 55, h: 230, s: 95, l: 65, posColor: 0, posTransparency: 70})); + generator.addLayer(new ColorfulBackgroundLayer({degree: 20, h: 300, s: 90, l: 65, posColor: 0, posTransparency: 55})); // top layer // Assign generated style to the element identified by it's id generator.assignStyleToElementId("colorful"); - \ No newline at end of file + diff --git a/src/.jshintrc b/src/.jshintrc index 770c273..ae1e571 100644 --- a/src/.jshintrc +++ b/src/.jshintrc @@ -1,3 +1,6 @@ { - "evil": true -} \ No newline at end of file + "evil": true, + "strict": true, + "browser": true, + "node": true +} diff --git a/src/generator.js b/src/generator.js index beaf63a..45bda18 100644 --- a/src/generator.js +++ b/src/generator.js @@ -1,3 +1,4 @@ +"use strict"; /** * The Generator contains the layers used to generate the style. * @@ -9,19 +10,22 @@ * var generator = new ColorfulBackgroundGenerator(); * * // This adds 5 layers to the generator - * // The parameters are: degree[0-360], - * // hue[0-360], saturation[0-100], lightness[0-100], - * // positionColor[0-100], positionTransparency[0-100] + * // The parameters are: degree[0-360], + * // h[0-360], + * // s[0-1], + * // l[0-1], + * // posColor[0-100], + * // posTransparency[0-100] * // The lowest layer (at the bottom) in the css is the first added layer. - * generator.addLayer(new ColorfulBackgroundLayer(325, 5, 95, 55, 100)); // bottom layer - * generator.addLayer(new ColorfulBackgroundLayer(245, 75, 90, 70, 30, 80)); - * generator.addLayer(new ColorfulBackgroundLayer(155, 150, 95, 70, 10, 80)); - * generator.addLayer(new ColorfulBackgroundLayer(55, 230, 95, 65, 0, 70)); - * generator.addLayer(new ColorfulBackgroundLayer(20, 300, 90, 65, 0, 55)); // top layer + * generator.addLayer(new ColorfulBackgroundLayer({degree: 325, h: 5, s: 95, l: 55, posColor: 100})); // bottom layer + * generator.addLayer(new ColorfulBackgroundLayer({degree: 225, h: 75, s: 90, l: 70, posColor: 30, posTransparency: 80})); + * generator.addLayer(new ColorfulBackgroundLayer({degree: 155, h: 150, s: 95, l: 70, posColor: 10, posTransparency: 80})); + * generator.addLayer(new ColorfulBackgroundLayer({degree: 55, h: 230, s: 95, l: 65, posColor: 0, posTransparency: 70})); + * generator.addLayer(new ColorfulBackgroundLayer({degree: 20, h: 300, s: 90, l: 65, posColor: 0, posTransparency: 55})); // top layer * * // Assign generated style to the element identified by it's id * generator.assignStyleToElementId("id-of-the-element"); - * + * * // Or just get the cenerated css code * console.log(generator.getCSSAsText()); * @@ -40,7 +44,7 @@ function ColorfulBackgroundGenerator() { * @return {Number} */ ColorfulBackgroundGenerator.prototype.getNumberOfLayers = function() { - return this.layers.length; + return this.layers.length; }; /** @@ -80,13 +84,21 @@ ColorfulBackgroundGenerator.prototype.addLayer = function(layer, position) { * @param {Number} layerIndex */ ColorfulBackgroundGenerator.prototype.deleteLayer = function(layerIndex) { - this.layers.splice(layerIndex, 1); + this.layers.splice(layerIndex, 1); +}; + +/** + * Removes all layers. + * + */ +ColorfulBackgroundGenerator.prototype.deleteAllLayers = function() { + this.layers = []; }; /** * Returns the CSS for the current background as a CSS property. * - * + * * * @param {Boolean} keepWhitespace * @return {String} @@ -98,8 +110,8 @@ ColorfulBackgroundGenerator.prototype.getCSS = function(keepWhitespace, noPrefix if(noPrefixes === undefined || noPrefixes === false) { output = this.getCSSProperty("-webkit-") + output; - } - + } + if (keepWhitespace === undefined || keepWhitespace === false) { return output.trim(); @@ -109,14 +121,14 @@ ColorfulBackgroundGenerator.prototype.getCSS = function(keepWhitespace, noPrefix /** - * Returns the CSS property for all layers for a given css prefix. + * Returns the CSS property for all layers for a given css prefix. * If no prefix is given, the result will be the default W3C format. - * + * * @param {String} prefix * @return {String} */ ColorfulBackgroundGenerator.prototype.getCSSProperty = function(prefix) { - var propertyString = "background:\n\t\t"; + var propertyString = "background:\n "; var numberOfLayers = this.getNumberOfLayers(); @@ -129,7 +141,7 @@ ColorfulBackgroundGenerator.prototype.getCSSProperty = function(prefix) { propertyString += this.layers[i].getCSSProperty(false, prefix); } } - + return propertyString; }; @@ -139,7 +151,7 @@ ColorfulBackgroundGenerator.prototype.getCSSProperty = function(prefix) { * @return {Sting} */ ColorfulBackgroundGenerator.prototype.getCSSAsText = function() { - return ".colorful {\n\t" + this.getCSS(true) + "}"; + return ".colorful {\n " + this.getCSS(true) + "}"; }; /** @@ -159,4 +171,7 @@ ColorfulBackgroundGenerator.prototype.assignStyleToElementId = function(elementI */ ColorfulBackgroundGenerator.prototype.assignStyleToElement = function(element) { element.setAttribute("style", this.getCSS()); -}; \ No newline at end of file +}; + + +module.exports = ColorfulBackgroundGenerator; diff --git a/src/layer.js b/src/layer.js index 82ef860..b214893 100644 --- a/src/layer.js +++ b/src/layer.js @@ -1,81 +1,110 @@ +'use strict'; + /** * The layer defines the gradient. Layers are combined in the generator the get a colorful background. * - * - * @param {Number} degree, default: 45° - * @param {Number} hue, default: 200 - * @param {Number} saturation, default: 100 - * @param {Number} lightness, default: 70 - * @param {Number} positionColor, default: 0 - * @param {Number} positionTransparency, default: 70 + * + * @param {Object} config, default: { + * degree: 45 + * hue: 200 + * saturation: 1.0 + * lightness: 0.7 + * posColor: 0 + * posTransparency: 70 + * } */ -function ColorfulBackgroundLayer(degree, hue, saturation, lightness, positionColor, positionTransparency) { - if(degree === undefined) degree = 45; - this.degree = degree; +function ColorfulBackgroundLayer(config) { + if (config !== undefined && typeof config === 'object') { + var hue = config.h; + var saturation = config.s; + var lightness = config.l; + var posColor = config.posColor; + var posTransparency = config.posTransparency; + var degree = config.degree; + } + + if (degree === undefined) degree = 45; + this.degree = degree; - if(hue === undefined) hue = 200; - this.hue = hue; + if (hue === undefined) hue = 200; + this.hue = hue; - if(saturation === undefined) saturation = 100; - this.saturation = saturation; + if (saturation === undefined || saturation > 1) saturation = 1; + this.saturation = saturation; - if(lightness === undefined) lightness = 70; - this.lightness = lightness; + if (lightness === undefined || lightness > 1) lightness = 0.7; + this.lightness = lightness; - if(positionColor === undefined) positionColor = 0; - this.positionColor = positionColor; + if (posColor === undefined) posColor = 0; + this.posColor = posColor; - if(positionTransparency === undefined) positionTransparency = 70; - this.positionTransparency = positionTransparency; + if (posTransparency === undefined) posTransparency = 70; + this.posTransparency = posTransparency; } +/** + * Round to 2 digits. + * + * @param num + * @returns {number} + */ +function roundToTwo(num) { + return +(Math.round(num + 'e+2') + 'e-2'); +} + /** * Returns the CSS Property of this layer. * If endingWithSemicolon is true, this is the last layer and the returning string will end with a semicolon. * * Its important to use the same color with alpha transparency = 0 as transparent color to cover firefox rendering. - * + * * @param {Boolean} endingWithSemicolon * @param {String} prefix * @return {String} */ -ColorfulBackgroundLayer.prototype.getCSSProperty = function(endingWithSemicolon, prefix) { - var output = ""; - if (prefix !== undefined) { - output = prefix; - } - var hslColor = this.hue + ", " + this.saturation + "%, " + this.lightness + "%"; - output = output + "linear-gradient(" + this.getDegreeForVendor(prefix) + "deg, hsla(" + hslColor + ", 1) " + this.positionColor + "%, hsla(" + hslColor + ", 0) " + this.positionTransparency + "%)"; - - if (endingWithSemicolon === undefined || endingWithSemicolon === false) { - output = output + ",\n\t\t"; - } else { - output = output + ";\n\t"; - } - - return output; +ColorfulBackgroundLayer.prototype.getCSSProperty = function (endingWithSemicolon, prefix) { + var output = ''; + if (prefix !== undefined) { + output = prefix; + } + + var saturation = this.saturation * 100; + var lightness = this.lightness * 100; + + var hslColor = roundToTwo(this.hue) + ', ' + roundToTwo(saturation) + '%, ' + roundToTwo(lightness) + '%'; + output = output + 'linear-gradient(' + this.getDegreeForVendor(prefix) + 'deg, hsla(' + hslColor + ', 1) ' + this.posColor + '%, hsla(' + hslColor + ', 0) ' + this.posTransparency + '%)'; + + if (endingWithSemicolon === undefined || endingWithSemicolon === false) { + output = output + ',\n '; + } else { + output = output + ';\n '; + } + + return output; }; /** - * Returns the degrees for the given vendor prefix. + * Returns the degrees for the given vendor prefix. * * - Prefixed `-webkit-linear-gradient` is counting degrees counterclockwise. 0° is at the left side. * - The standard `linear-gradient` is counting degrees clockwise. 0° is at the bottom side. - * + * * @param {String} prefix * @return {String} */ -ColorfulBackgroundLayer.prototype.getDegreeForVendor = function(prefix) { - // -webkit-linear-gradient is counting degrees counterclockwise. 0° is at the left side. - if (prefix === "-webkit-") { - var convertedDegree = (360 - parseInt(this.degree)) + 90; - if(convertedDegree >= 360){ - convertedDegree -= 360; - } - return convertedDegree; - } - - // linear-gradient is counting degrees clockwise. 0° is at the bottom side. - // (prefix === undefined) - return this.degree; -}; \ No newline at end of file +ColorfulBackgroundLayer.prototype.getDegreeForVendor = function (prefix) { + // -webkit-linear-gradient is counting degrees counterclockwise. 0° is at the left side. + if (prefix === '-webkit-') { + var convertedDegree = (360 - parseInt(this.degree)) + 90; + if (convertedDegree >= 360) { + convertedDegree -= 360; + } + return convertedDegree; + } + + // linear-gradient is counting degrees clockwise. 0° is at the bottom side. + // (prefix === undefined) + return this.degree; +}; + +module.exports = ColorfulBackgroundLayer; diff --git a/test/generator.test.js b/test/generator.test.js new file mode 100644 index 0000000..3a622be --- /dev/null +++ b/test/generator.test.js @@ -0,0 +1,24 @@ +var ColorfulBackgroundGenerator = require('./../src/generator'); +var ColorfulBackgroundLayer = require('./../src/layer'); + +var g = new ColorfulBackgroundGenerator(); + +describe('ColorfulBackgroundGenerator', function () { + test('create new', function() { + expect(g).toBeDefined(); + }); + + test('new has no layers', function() { + expect(g.getNumberOfLayers()).toBe(0); + }); + + test('can add a layer', function () { + g.addLayer(new ColorfulBackgroundLayer()); + expect(g.getNumberOfLayers()).toBe(1); + }); + + test('can remove a layer', function () { + g.deleteLayer(0); + expect(g.getNumberOfLayers()).toBe(0); + }); +}); diff --git a/test/layer.test.js b/test/layer.test.js new file mode 100644 index 0000000..5ada7df --- /dev/null +++ b/test/layer.test.js @@ -0,0 +1,29 @@ +var ColorfulBackgroundLayer = require('./../src/layer'); + +var layer = new ColorfulBackgroundLayer(); + +describe('ColorfulBackgroundLayer', function () { + test('create new', function() { + expect(layer).toBeDefined(); + }); + + test('has default values', function() { + expect(layer.degree).toBe(45); + expect(layer.hue).toBe(200); + expect(layer.saturation).toBe(1); + }); + + test('accepts custom values as object', function () { + var customLayer = new ColorfulBackgroundLayer({h: 45, s: .6789}); + expect(customLayer.hue).toBe(45); + expect(customLayer.saturation).toBe(0.6789); + }); + + test('rounds the output values', function () { + var customLayer = new ColorfulBackgroundLayer({h: 199, s: 0.6789, l: 0.1234}); + expect(customLayer.getCSSProperty()).toMatch(/199, 67.89%, 12.34%/); + + var customLayer2 = new ColorfulBackgroundLayer({h: 222.222222, s: 0, l: 1}); + expect(customLayer2.getCSSProperty()).toMatch(/222.22, 0%, 100%/); + }); +});