Code coverage report for ./console.style.js

Statements: 100% (58 / 58)      Branches: 100% (14 / 14)      Functions: 100% (11 / 11)      Lines: 100% (58 / 58)      Ignored: 1 branch     

All files » ./ » console.style.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110        1   1 1 1 1 1 1 1 1 1             1 16 16 13 1 1 1 1 1 1 3     1 1   1 1   1 1 1     1 1 1 1 1   13 14 14 14 14   2 2   2 2   14 21 21   14 14     16             1 1 9 9   9 9                 1 16                   1 19        
/**
 * @file console.style is micro-library for intuitively styling browser console text with CSS.
 * @author Daniel Lamb <dlamb.open.source@gmail.com>
 */
(function(console) {
  /* istanbul ignore else */
  Eif (console && console.log) {
    var colors = 'Black Blue Cyan Gray Green Magenta Red White Yellow'.split(' ');
    var rxTags = /<(css|b|i)(?:=['"](.*?)['"])?>(.*?)<\/(?:css|b|i)>/ig;
    var rxRules = /([a-z\-]+)\s?:\s?([^;'"]+);?/ig;
    var rxImgs = /<img=['"](.*?)['"]>/ig;
    var bg = 'background';
    var px = 'px';
    var style;
    var wrap;
 
    /**
     * Regex mojo to parse the text to log in the console
     * @param text - the text with styles to parse
     * @returns an array of console.log arguments
     */
    var parse = function(text) {
      var args = [text];
      if (typeof text === 'string') {
        text = text.replace(rxImgs, function(matchI, $1I) {
          var width;
          var height;
          var halfHeight;
          var halfWidth;
          var styles = ['font-size:1px'];
          $1I.replace(rxRules, function(matchR, $1R, $2R) {
            switch ($1R) {
              case bg:
              case bg + '-image':
                styles.push($1R+ ':' + $2R, bg + '-repeat:no-repeat');
                break;
              case 'width':
                width = $2R;
                break;
              case 'height':
                height = $2R;
                styles.push('line-height:' + $2R);
                break;
            }
          });
          halfWidth = Math.ceil(parseInt(width) / 2);
          halfHeight = Math.ceil(parseInt(height) / 2);
          styles.push(bg + '-size:' + width + ' ' + height);
          styles.push('padding:' + halfHeight + px + ' ' + halfWidth + px);
          return wrap('', styles.join(';'));
        });
        args[0] = text.replace(rxTags, function(matchT, $1T, $2T, $3T) {
          var styles = [];
          var resets = [];
          $2T = $2T || '';
          switch ($1T) {
            case 'b':
              $2T += ';font-weight:bold';
              break;
            case 'i':
              $2T += ';font-style:italic';
              break;
          }
          $2T.replace(rxRules, function(matchR, $1R, $2R) {
            styles.push($1R + ':' + $2R);
            resets.push($1R + ':inherit');
          });
          args.push(styles.join(';'), resets.join(';'));
          return '%c' + $3T + '%c';
        });
      }
      return args;
    };
 
    /**
     * Define color shortcut methods on the console
     * @example console.style('Wow, this is ' + console.colors.green('so much') + ' better!');
     */
    console.colors = {};
    colors.forEach(function(color) {
      console.colors[color.toLowerCase()] = function(text) {
        return wrap(text, 'color:' + color);
      };
      console.colors['bg' + color] = function(text) {
        return wrap(text, bg + '-color:' + color);
      };
    });
 
    /**
     * Intuitively Style Browser Console Text with CSS.
     * @param text - the text to style
     * @example console.style('Wow, this is <css="color:green;font-weight:bold;">so much</css> better!');
     */
    console.style = style = function(text) {
      console.log.apply(console, parse(text));
    };
 
    /**
     * Wraps the given text in a <css> tag with the provided style rules
     * @param text - the text to wrap
     * @param rule - CSS rules to apply
     * @returns {string} the wrapped text
     * @example console.style('I just ' + console.style.wrap('♥', 'color:#c00;font-weight:bold;') + ' console.style');
     */
    console.style.wrap = wrap = function(text, rules) {
      return '<css="' + rules + '">' + text + '</css>';
    };
  }
}(window.console));