san-awesome/lib/components/Icon.js

Font Awesome component for San, using inline SVG.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _register = require('./register');

exports.default = {
  template: '\n    <svg version="1.1"\n      class="{{klass}}"\n      role="{{label ? \'img\' : \'presentation\'}}"\n      aria-label="{{label}}"\n      x="{{x}}"\n      y="{{y}}"\n      width="{{width}}"\n      height="{{height}}"\n      viewBox="{{box}}"\n      style="{{computedStyle}}">\n      <slot>\n        <path s-if="icon && icon.paths"\n          s-for="path in icon.paths"\n          d="{{path.d}}"\n          style="{{path.style}}"/>\n        <polygon s-if="icon && icon.polygons"\n          s-for="polygon in icon.polygons"\n          points="{{polygon.points}}"\n          style="{{polygon.style}}"/>\n        <g s-if="icon && icon.raw" s-html="icon.raw"/>\n      </slot>\n    </svg>\n  ',
  initData: function initData() {
    return {
      x: 0,
      y: 0,
      childrenWidth: 0,
      childrenHeight: 0,
      outerScale: 1
    };
  },

  computed: {
    normalizedScale: function normalizedScale() {
      var scale = this.data.get('scale');
      scale = typeof scale === 'undefined' ? 1 : Number(scale);
      var outerScale = this.data.get('outerScale');
      if (isNaN(scale) || scale <= 0) {
        console.warn('Invalid prop: prop "scale" should be a number over 0.', this);
        return outerScale;
      }
      return scale * outerScale;
    },
    klass: function klass() {
      var classList = ['fa-icon'];
      if (this.data.get('spin')) {
        classList.push('fa-spin');
      }
      if (this.data.get('flip') === 'horizontal') {
        classList.push('fa-flip-horizontal');
      }
      if (this.data.get('flip') === 'vertical') {
        classList.push('fa-flip-vertical');
      }
      if (this.data.get('inverse')) {
        classList.push('fa-inverse');
      }
      if (this.data.get('pulse')) {
        classList.push('fa-pulse');
      }
      return classList;
    },
    icon: function icon() {
      var name = this.data.get('name');
      if (name) {
        return (0, _register.get)(name);
      }
      return null;
    },
    box: function box() {
      var icon = this.data.get('icon');
      if (icon) {
        return '0 0 ' + icon.width + ' ' + icon.height;
      }
      return '0 0 ' + this.data.get('width') + ' ' + this.data.get('height');
    },
    ratio: function ratio() {
      var icon = this.data.get('icon');
      if (!icon) {
        return 1;
      }
      var width = icon.width,
          height = icon.height;

      return Math.max(width, height) / 16;
    },
    width: function width() {
      var icon = this.data.get('icon');
      return this.data.get('childrenWidth') || icon && icon.width / this.data.get('ratio') * this.data.get('normalizedScale') || 0;
    },
    height: function height() {
      var icon = this.data.get('icon');
      return this.data.get('childrenHeight') || icon && icon.height / this.data.get('ratio') * this.data.get('normalizedScale') || 0;
    },
    computedStyle: function computedStyle() {
      var normalizedScale = this.data.get('normalizedScale');
      if (normalizedScale === 1) {
        return {};
      }
      return {
        'font-size': normalizedScale + 'em'
      };
    },
    raw: function raw() {
      var icon = this.data.get('icon');
      if (!icon || !icon.raw) {
        return null;
      }
      var raw = icon.raw;
      var ids = {};
      raw = raw.replace(/\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g, function (match, quote, id) {
        var uniqueId = getId();
        ids[id] = uniqueId;
        return ' id="' + uniqueId + '"';
      });
      raw = raw.replace(/#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g, function (match, rawId, _, pointerId) {
        var id = rawId || pointerId;
        if (!id || !ids[id]) {
          return match;
        }

        return '#' + ids[id];
      });

      return raw;
    }
  },
  trimWhitespace: 'all',
  attached: function attached() {
    var _this = this;

    if (this.data.get('icon')) {
      return;
    }
    var childrenIcons = this.slot()[0].children.filter(function (child) {
      return isComponent(child);
    });
    childrenIcons.forEach(function (child) {
      child.data.set('outerScale', _this.data.get('normalizedScale'));
    });
    var width = 0;
    var height = 0;
    childrenIcons.forEach(function (child) {
      width = Math.max(width, child.data.get('width'));
      height = Math.max(height, child.data.get('height'));
    });
    this.data.set('childrenWidth', width);
    this.data.set('childrenHeight', height);
    childrenIcons.forEach(function (child) {
      child.data.set('x', (width - child.data.get('width')) / 2);
      child.data.set('y', (height - child.data.get('height')) / 2);
    });
  },


  register: _register.register
};


var cursor = 0xd4937;
function getId() {
  return 'fa-' + (cursor++).toString(16);
}
function isComponent(node) {
  return node.hasOwnProperty('data');
}