Client Specific Colorschemes in Javascript

CssHelper.js

var ColorConversion = require('helpers/ColorConversion');

/**
  Used for parsing all css rules on the document
  object and replacing any default brand color
  instances with the client's brand color scheme.

  @class CssHelper
  @example
      ```javascript
        cssHelper = new CssHelper({
          brandColor: '#343434'
        });
      ```
**/
var CssHelper = function (o) {
  this.initialize(o);
};

_.extend(CssHelper.prototype, {
  /**
    Creates a new clientColors object that contains
    all the required versions of the the client's
    brand color in hex color string format.

    @method initialize
    @params o {object} Object that contains the client
    brand color as passed in on instantiation.
  **/
  initialize: function (o) {
    var clientBrandColor = o.brandColor || this.defaultColors.brand;

    this.clientColors = {
      brand:    clientBrandColor,
      darkOne:  ColorConversion.lightenDarkenColor(clientBrandColor, -5),
      darkTwo:  ColorConversion.lightenDarkenColor(clientBrandColor, -10),
      lightOne: ColorConversion.lightenDarkenColor(clientBrandColor, 5),
      lightTwo: ColorConversion.lightenDarkenColor(clientBrandColor, 20)
    }
  },

  /**
    Checks the given css rule against style and
    default color objects and updates the style
    if it matches the current style and default
    color in the loop.

    @method checkRuleForDefaultColors
    @params rule {object} css rule
  **/
  checkRuleForDefaultColors: function (rule) {
    // Style array at bottom of file.
    _.each(this.styles, function (style) {
      //default colors object at bottom of file
      _.each(this.defaultColors, function (color, key) {
        try {
          if (rule.style[style] && rule.style[style].indexOf(ColorConversion.getRgbAsString(color)) !== -1) {
            rule.style[style] = this.replaceColorInString({
              styleString: rule.style[style],
              defaultColor: ColorConversion.getRgbAsString(color),
              newColor: ColorConversion.getRgbAsString(this.clientColors[key])
            });
          };

          //IE does gradients differently
          if (style === 'filter' && rule.style[style] && rule.style[style].indexOf(color) !== -1) {
            rule.style[style] = this.replaceColorInString({
              styleString: rule.style[style],
              defaultColor: color,
              newColor: this.clientColors[key]
            });
          };
        } catch (e) {
          console.log(e);
        }
      }, this);
    }, this);
  },

  /**
    Loops over each style sheet and then it's
    css rules for the document object.  Each
    rule is handed off to the checkRuleForDefaultColors
    function to be checked for needed replacement.

    @method parseDocumentStyles
  **/
  parseDocumentStyles: function () {
    if (document.styleSheets) {
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i],
          cssRule = false,
          j = 0;

        do {
          if (sheet.cssRules) {
            cssRule = sheet.cssRules[j];
          } else {
            cssRule = sheet.rules[j];
          };

          if (cssRule && cssRule.style) {
            this.checkRuleForDefaultColors(cssRule);
          };

          j++;
        } while (cssRule);
      };
    };
  },

  /**
    Checks the given css rule against style and
    default color objects and updates the style
    if it matches the current style and default
    color in the loop.

    @method replaceColorInString
    @params options {object} options for string replacement
    @return new style string with appropriate client color
    @example
        ```javascript
          var newString = this.replaceColorInString({
            styleString: rule.style[style],
            defaultColor: ColorConversion.getRgbAsString(color),
            newColor: ColorConversion.getRgbAsString(this.clientColors[key])
          })
        ```
  **/
  replaceColorInString: function (options) {
    if (options.styleString) {
      var start = options.styleString.indexOf(options.defaultColor),
          end = options.styleString.indexOf(options.defaultColor) + options.defaultColor.length,
          newStyleString = options.styleString.substring(0, start) + options.newColor + options.styleString.substring(end);

      return newStyleString;
    };
    return options.styleString;
  },

  /**
    Default color scheme that we use if client
    does not have a brand color.  Any other use
    of brand color in the SASS variables file
    as will as through out all SASS files will
    not be replaced unless this and the clientColors
    object are updated appropriately.

    @attribute defaultColors
    @type object
    @required
  **/
  defaultColors: {
    brand:    '#4ba2ea', //Default Brand Color
    darkOne:  '#3496e7', //Default Brand Color Darkened 5%
    darkTwo:  '#1d8ae5', //Default Brand Color Darkened 10%
    lightOne: '#62aeed', //Default Brand Color Lightened 5%
    lightTwo: '#a6d1f5'  //Default Brand Color Lightened 20%
  },

  /**
    List of css styles that can have a color
    set as an attribute in some way.  used
    to narrow down our search.

    @attribute styles
    @type array
    @required
  **/
  styles: [
    'background',
    'backgroundColor',
    'border',
    'borderColor',
    'borderBottom',
    'borderBottomColor',
    'backgroundImage',
    'borderLeft',
    'borderLeftColor',
    'borderRight',
    'borderRightColor',
    'borderTop',
    'borderTopColor',
    'color',
    'cssText',
    'fill',
    'filter',
    'outline',
    'outlineColor',
    'stroke',
    'text-shadow',
    'webkitBorderAfterColor',
    'webkitBorderBeforeColor',
    'webkitBorderEndColor',
    'webkitBorderStartColor',
    'webkitColumnRuleColor',
    'webkitTextEmphasisColor',
    'webkitTextFillColor',
    'webkitTextStroke',
    'webkitTextStrokeColor'
  ]
});

module.exports = CssHelper;