diff --git a/README.md b/README.md index d22d054..31844a7 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,20 @@ nanobar.go( 30 ); // size bar 30% nanobar.go(100); ``` +Change Nanobar Color +```js + +nanobar.setColor('red'); // changes nanobar to red +nanobar.setColor('#00ff00'); // changes nanobar to green +nanobar.setColor('rgba(0,0,0,1)') // changes nanobar to black, 100% opacity + +// You can use any valid CSS Colorstring to change the nanobar color + +// Additional Helper function : +nanobar.setState('danger') // uses Bootstrap color variable codes (success, info, warning, danger) + +``` +

--- diff --git a/index.js b/index.js index 234c1e0..218bc9a 100644 --- a/index.js +++ b/index.js @@ -45,7 +45,7 @@ move = function () { var self = this, dist = this.width - this.here; - + if (dist < 0.1 && dist > -0.1) { place.call( this, this.here ); this.moving = false; @@ -134,13 +134,56 @@ Nanobar.prototype.go = function (p) { // expand bar this.bars[0].go( p ); - + // create new bar at progress end if (p == 100) { init.call( this ); } }; + /** + * Change the Nanobar color, accepts any valid CSS Color-String (rgb, rgba, hex, words ("red","green")) + * @param {String} color [The new Color] + */ + Nanobar.prototype.setColor = function(color) { + if(typeof color == 'string') { + this.bars[0].el.style['background-color'] = color; + } + } + + /** + * Change the Nanobar color to some predefined Colors + * Available Colors: + * 'success', 'info', 'warning', 'danger' + * uses Bootstrap Color codes + * More information : http://getbootstrap.com/css/#less-variables-colors + * + * @param {String} state ['danger', 'success', 'info', 'warning'] + */ + Nanobar.prototype.setState = function(state) { + var clr = null; + if(typeof state == 'string') { + switch(state.toLowerCase()) { + case 'success' : + clr = "#5cb85c"; + break; + case 'info' : + clr = "#5bc0de"; + break; + case 'warning' : + clr = "#f0ad4e"; + break; + case 'danger': + clr = "#d9534f"; + break; + } + } + + if(clr) { + this.setColor(clr); + } + } + return Nanobar; })(); return exports.Nanobar;