react-font-style/lib/config.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.stateToStyle = exports.generateConfigState = exports.generateConfig = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _objHasObj = require('obj-has-obj');

var _objHasObj2 = _interopRequireDefault(_objHasObj);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var fontSizeList = [9, 10, 11, 12, 13, 14, 18, 24, 30, 36, 48, 64, 72].map(function (font) {
  return {
    type: 'font-' + font,
    label: font,
    style: {
      fontSize: font + 'px'
    }
  };
});

var lineHeightList = [1.0, 1.15, 1.5, 2.0, 2.5, 3.0].map(function (height) {
  return {
    type: 'line-height-' + height,
    label: height,
    style: {
      lineHeight: height
    }
  };
});

var toolbarConfig = {
  display: ['INLINE_STYLE_BUTTONS', 'FONT_HIGHLIGHT_BUTTON', 'FONT_COLOR_BUTTON', 'FONT_SIZE_DROPDOWN', 'FONT_FAMILY_DROPDOWN', 'LINE_HEIGHT_DROPDOWN', 'ALIGN_DROPDOWN'],
  INLINE_STYLE_BUTTONS: [{
    type: 'bold',
    style: {
      fontWeight: 'bold'
    }
  }, {
    type: 'italic',
    style: {
      fontStyle: 'italic'
    }
  }, {
    type: 'underline',
    style: {
      textDecoration: 'underline'
    }
  }],
  FONT_SIZE_DROPDOWN: fontSizeList,
  LINE_HEIGHT_DROPDOWN: lineHeightList,
  FONT_FAMILY_DROPDOWN: [{
    label: 'Helvetica neue',
    style: {
      fontFamily: 'Helvetica neue'
    }
  }, {
    label: "Arial",
    style: {
      fontFamily: "Arial"
    }
  }, {
    label: "Arial Narrow",
    style: {
      fontFamily: "Arial Narrow"
    }
  }, {
    label: "Arial Black",
    style: {
      fontFamily: "Arial Black"
    }
  }, {
    label: "Courier New",
    style: {
      fontFamily: "Courier New"
    }
  }, {
    label: "Georgia",
    style: {
      fontFamily: "Georgia"
    }
  }, {
    label: "Lucida Console",
    style: {
      fontFamily: "Lucida Console"
    }
  }, {
    label: "Tahoma",
    style: {
      fontFamily: "Tahoma"
    }
  }, {
    label: "Times New Roman",
    style: {
      fontFamily: "Times New Roman"
    }
  }, {
    label: "Verdana",
    style: {
      fontFamily: "Verdana"
    }
  }, {
    label: "微軟正黑體",
    style: {
      fontFamily: "Microsoft JhengHei, 微軟正黑體"
    }
  }, {
    label: "標楷體",
    style: {
      fontFamily: "DFKai-sb, 標楷體"
    }
  }],
  ALIGN_DROPDOWN: [{
    label: 'Align Left',
    style: {
      textAlign: 'left'
    }
  }, {
    label: 'Align Center',
    style: {
      textAlign: 'center'
    }
  }, {
    label: 'Align Right',
    style: {
      textAlign: 'right'
    }
  }]
};

var aryObjToObj = function aryObjToObj(ary, key) {
  var obj = {};
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = ary[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var item = _step.value;

      obj[item[key]] = item;
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return obj;
};

var generateConfig = exports.generateConfig = function generateConfig() {
  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  // change array of object to object
  config = Object.assign({}, toolbarConfig, config);
  config.inlineStyleObj = aryObjToObj(config.INLINE_STYLE_BUTTONS, 'type');
  config.fontSizeObj = aryObjToObj(config.FONT_SIZE_DROPDOWN, 'label');
  config.lineHeightObj = aryObjToObj(config.LINE_HEIGHT_DROPDOWN, 'label');
  config.alignObj = aryObjToObj(config.ALIGN_DROPDOWN, 'label');
  config.fontFamilyObj = aryObjToObj(config.FONT_FAMILY_DROPDOWN, 'label');
  return config;
};

var generateConfigState = exports.generateConfigState = function generateConfigState(config) {
  var defaultStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  var activeInlineStyle = void 0;
  var activeColor = defaultStyle.color || '#000';
  var activeBackgroundColor = defaultStyle.backgroundColor || 'none';
  var activeFontSize = void 0;
  var activeLineHeight = void 0;
  var activeAlign = 'Align Left'; // default
  var activeFontFamily = config.FONT_FAMILY_DROPDOWN[0].label;
  if (config.INLINE_STYLE_BUTTONS) {
    activeInlineStyle = Object.values(config.INLINE_STYLE_BUTTONS).reduce(function (obj, item) {
      obj[item.type] = false;
      if ((0, _objHasObj2.default)(defaultStyle, item.style)) {
        obj[item.type] = true;
      }
      return obj;
    }, {});
  }
  if (config.ALIGN_DROPDOWN && defaultStyle.textAlign) {
    Object.values(config.ALIGN_DROPDOWN).forEach(function (item) {
      if (item.style.textAlign === defaultStyle.textAlign) {
        activeAlign = item.label;
      }
    });
  }
  if (config.FONT_FAMILY_DROPDOWN && defaultStyle.fontFamily) {
    Object.values(config.FONT_FAMILY_DROPDOWN).forEach(function (item) {
      if (item.style.fontFamily === defaultStyle.fontFamily) {
        activeFontFamily = item.label;
      }
    });
  }
  if (config.FONT_SIZE_DROPDOWN && config.FONT_SIZE_DROPDOWN[0]) {
    activeFontSize = defaultStyle.fontSize ? defaultStyle.fontSize.replace('px', '') : config.FONT_SIZE_DROPDOWN[0].label;
  }
  if (config.LINE_HEIGHT_DROPDOWN && config.LINE_HEIGHT_DROPDOWN[0]) {
    activeLineHeight = defaultStyle.lineHeight ? defaultStyle.lineHeight : config.LINE_HEIGHT_DROPDOWN[0].label;
  }
  return {
    activeInlineStyle: activeInlineStyle,
    activeColor: activeColor,
    activeBackgroundColor: activeBackgroundColor,
    activeFontSize: activeFontSize,
    activeLineHeight: activeLineHeight,
    activeFontFamily: activeFontFamily,
    activeAlign: activeAlign
  };
};

var stateToStyle = exports.stateToStyle = function stateToStyle(_ref) {
  var activeInlineStyle = _ref.activeInlineStyle,
      activeColor = _ref.activeColor,
      activeBackgroundColor = _ref.activeBackgroundColor,
      activeFontSize = _ref.activeFontSize,
      activeLineHeight = _ref.activeLineHeight,
      activeAlign = _ref.activeAlign,
      activeFontFamily = _ref.activeFontFamily,
      config = _ref.config;
  var inlineStyleObj = config.inlineStyleObj,
      fontSizeObj = config.fontSizeObj,
      lineHeightObj = config.lineHeightObj,
      alignObj = config.alignObj,
      fontFamilyObj = config.fontFamilyObj;

  var style = _extends({
    color: activeColor,
    backgroundColor: activeBackgroundColor
  }, fontSizeObj[activeFontSize].style, lineHeightObj[activeLineHeight].style, alignObj[activeAlign].style, fontFamilyObj[activeFontFamily].style);

  // inline style
  Object.keys(activeInlineStyle).map(function (type) {
    if (activeInlineStyle[type]) {
      style = _extends({}, style, inlineStyleObj[type].style);
    }
  });
  return style;
};

exports.default = toolbarConfig;