react-font-style
Version:
React font style editor
257 lines (237 loc) • 7.29 kB
JavaScript
;
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;