Skip to content

Commit

Permalink
Saturation and lightness require values from 0 to 1.
Browse files Browse the repository at this point in the history 
Layer is now created with 1 object containing all parameters.
Replaced tabs with whitespaces.
  • Loading branch information
@webcore-it
webcore-it committed Jun 3, 2018
1 parent f795b0c commit 245abe1
Show file tree
Hide file tree
Showing 8 changed files with 217 additions and 105 deletions.
36 changes: 21 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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");
Expand All @@ -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
------------------
Expand Down
17 changes: 10 additions & 7 deletions examples/generate_css_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
</script>
</body>
</html>
</html>
21 changes: 12 additions & 9 deletions examples/include_generator_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
</script>

</body>
</html>
</html>
7 changes: 5 additions & 2 deletions src/.jshintrc
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"evil": true
}
"evil": true,
"strict": true,
"browser": true,
"node": true
}
55 changes: 35 additions & 20 deletions src/generator.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use strict";
/**
* The Generator contains the layers used to generate the style.
*
Expand All @@ -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());
*
Expand All @@ -40,7 +44,7 @@ function ColorfulBackgroundGenerator() {
* @return {Number}
*/
ColorfulBackgroundGenerator.prototype.getNumberOfLayers = function() {
return this.layers.length;
return this.layers.length;
};

/**
Expand Down Expand Up @@ -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}
Expand All @@ -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();
Expand All @@ -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();

Expand All @@ -129,7 +141,7 @@ ColorfulBackgroundGenerator.prototype.getCSSProperty = function(prefix) {
propertyString += this.layers[i].getCSSProperty(false, prefix);
}
}

return propertyString;
};

Expand All @@ -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) + "}";
};

/**
Expand All @@ -159,4 +171,7 @@ ColorfulBackgroundGenerator.prototype.assignStyleToElementId = function(elementI
*/
ColorfulBackgroundGenerator.prototype.assignStyleToElement = function(element) {
element.setAttribute("style", this.getCSS());
};
};


module.exports = ColorfulBackgroundGenerator;
Loading

0 comments on commit 245abe1

Please sign in to comment.