Updated generator

.gitignore

@@ -0,0 +1 @@
+node_modules

Gruntfile.js

@@ -0,0 +1,54 @@
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		// ----------------------------------------------------------------------
+		jshint: {
+			gruntfile: {
+				src: 'Gruntfile.js'
+			},
+			src: {
+				options: {
+					jshintrc: 'src/.jshintrc'
+				},
+				src: ['src/*.js']
+			}
+		},
+		// ----------------------------------------------------------------------
+		concat: {
+			options: {
+				banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+				stripBanners: true
+			},
+			src: {
+				src: ['src/*.js'],
+				dest: 'bin/<%= pkg.name %>.js'
+			}
+		},
+		// ----------------------------------------------------------------------
+		uglify: {
+			options: {
+				banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+			},
+			src: {
+				src: 'bin/<%= pkg.name %>.js',
+				dest: 'bin/<%= pkg.name %>.min.js',
+			}
+		},
+		// ----------------------------------------------------------------------
+		watch: {
+			files: ['src/**/*', '!Gruntfile.js'],
+			tasks: ['default'],
+		},
+	});
+
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+
+	// Default task(s).
+	grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
+
+};

bin/colorful-background-css-generator.js

@@ -0,0 +1,196 @@
+/*! colorful-background-css-generator 2014-08-25 */
+/**
+ * The generator class
+ */
+
+function ColorfulBackgroundGenerator() {
+	/**
+	 * Holds all layers.
+	 * @type {Array}
+	 */
+	this.layers = [];
+}
+
+/**
+ * Returns the amount of current layers.
+ *
+ * @return {Number}
+ */
+ColorfulBackgroundGenerator.prototype.getNumberOfLayers = function() {
+	return this.layers.length;
+};
+
+/**
+ * Returns a ColorfulBackgroundLayer for the given index
+ * @param  {Number} layerIndex
+ * @return {ColorfulBackgroundLayer}
+ */
+ColorfulBackgroundGenerator.prototype.getLayerByIndex = function(layerIndex) {
+	if (layerIndex === undefined) {
+		return false;
+	}
+	if (layerIndex >= this.getNumberOfLayers()) {
+		return false;
+	}
+
+	return this.layers[layerIndex];
+};
+
+/**
+ * Adds a new layer to the generator.
+ * If no position is given, push the new layer to the top (highest index).
+ *
+ * @param {ColorfulBackgroundLayer} layer
+ * @param {Number} position
+ */
+ColorfulBackgroundGenerator.prototype.addLayer = function(layer, position) {
+	if (position === undefined || position > this.getNumberOfLayers()) {
+		this.layers.push(layer);
+	} else {
+		this.layers.splice(position, 0, layer);
+	}
+};
+
+/**
+ * Removes the layer at the given index.
+ *
+ * @param  {Number} layerIndex
+ */
+ColorfulBackgroundGenerator.prototype.deleteLayer = function(layerIndex) {
+	this.layers.splice(layerIndex, 1);
+};
+
+/**
+ * Returns the CSS for the current background as a CSS property.
+ *
+ * 
+ *
+ * @param  {Boolean} keepWhitespace
+ * @return {String}
+ */
+ColorfulBackgroundGenerator.prototype.getCSS = function(keepWhitespace, noPrefixes) {
+	var propertyOutputs;
+	var output = this.getCSSProperty();
+
+
+	if(noPrefixes === undefined || noPrefixes === false) {
+		output = this.getCSSProperty("-webkit-") + output;
+	} 
+
+
+	if (keepWhitespace === undefined || keepWhitespace === false) {
+		return output.trim();
+	}
+	return output;
+};
+
+
+/**
+ * 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";
+
+	var numberOfLayers = this.getNumberOfLayers();
+
+	// The lowest layer is at index 0, so walk through the layers top to bottom to genderate the CSS in the right order.
+	for (var i = numberOfLayers - 1; i >= 0; i--) {
+		// Last layer, add a ";" to the string.
+		if (i === 0) {
+			propertyString += this.layers[i].getCSSProperty(true, prefix);
+		} else {
+			propertyString += this.layers[i].getCSSProperty(false, prefix);
+		}
+	}
+
+	return propertyString;
+};
+
+/**
+ * Returns the CSS for the current background as css class.
+ *
+ * @return {Sting}
+ */
+ColorfulBackgroundGenerator.prototype.getCSSAsText = function() {
+	return ".colorful {\n" + this.getCSS(true) + "}";
+};
+
+/**
+ * Set the generatey backgrouns style to an DOM elementID.
+ *
+ * @param  {String} elementId
+ */
+ColorfulBackgroundGenerator.prototype.assignStyleToElementId = function(elementId) {
+	var element = document.getElementById(elementId);
+	this.assignStyleToElement(element);
+};
+
+/**
+ * Set the generated background style to an DOM element.
+ *
+ * @param  {Object} element
+ */
+ColorfulBackgroundGenerator.prototype.assignStyleToElement = function(element) {
+	element.setAttribute("style", this.getCSS());
+};
+/**
+ * The layer class.
+ *
+ * 
+ * @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
+ */
+function ColorfulBackgroundLayer(degree, hue, saturation, lightness, positionColor, positionTransparency) {
+	if(degree === undefined) degree = 45;
+	this.degree = degree;
+
+	if(hue === undefined) hue = 200;
+	this.hue = hue;
+
+	if(saturation === undefined) saturation = 100;
+	this.saturation = saturation;
+
+	if(lightness === undefined) lightness = 70;
+	this.lightness = lightness;
+
+	if(positionColor === undefined) positionColor = 0;
+	this.positionColor = positionColor;
+
+	if(positionTransparency === undefined) positionTransparency = 70;
+	this.positionTransparency = positionTransparency;
+
+}
+
+/**
+ * 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.
+ * 
+ * 
+ * @param  {Boolean} endingWithSemicolon
+ * @param  {String} prefix
+ * @return {String}
+ */
+ColorfulBackgroundLayer.prototype.getCSSProperty = function(endingWithSemicolon, prefix) {
+	var output = "";
+	if (prefix !== undefined) {
+		output = prefix;
+	}
+
+	output = output + "linear-gradient(" + this.degree + "deg, hsl(" + this.hue + ", " + this.saturation + "%, " + this.lightness + "%) " + this.positionColor + "%, transparent " + this.positionTransparency + "%)";
+
+	if (endingWithSemicolon === undefined || endingWithSemicolon === false) {
+		output = output + ",\n\t";
+	} else {
+		output = output + ";\n";
+	}
+
+	return output;
+};

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "colorful-background-css-generator",
+  "description": "A Colorful CSS Gradient Background Generator.",
+  "version": "0.1.1",
+  "homepage": "https://github.com/webcore-it/colorful-background-css-generator",
+  "author": {
+    "name": "Thomas Zanthoff",
+    "url": "http://www.webcore-it.com",
+    "twitter": "@WebCoreIT",
+    "twitter-url": "https://twitter.com/WebCoreIT"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.5",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-concat": "~0.5.0",
+    "grunt-contrib-uglify": "~0.5.1",
+    "grunt-contrib-copy": "~0.5.0",
+    "grunt-contrib-watch": "~0.6.1"
+  }
+}

src/.jshintrc

@@ -0,0 +1,3 @@
+{
+    "evil": true
+}