elmer-ui-core
Version:
web app framework
298 lines (297 loc) • 12.8 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.convertAnimationDataToCssProperty = exports.readWillChangeCssDefaultData = exports.calcPropertyConfigData = exports.calcPropertyData = exports.isCssEmpty = void 0;
var elmer_common_1 = require("elmer-common");
var ElmerColorMapping_1 = require("./ElmerColorMapping");
var rgbToHex = function (r, g, b) {
var hex = ((r << 16) | (g << 8) | b).toString(16);
return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
};
var hexToRgb = function (hex) {
var rgb = [];
var hexStr = hex || "#fff";
var alph = "";
if (hexStr.length >= 9) {
alph = hexStr.substr(7, 2);
}
if (hexStr.length < 6) {
hexStr = "#" + (hexStr.replace(/^#/, "")).repeat(3);
hexStr = hexStr.substr(0, 7);
}
for (var i = 1; i < 7; i += 2) {
var mData = hexStr.slice(i, i + 2);
rgb.push(parseInt(mData, 16));
}
if (!elmer_common_1.StaticCommon.isEmpty(alph)) {
rgb.push(parseInt(alph, 16));
}
return rgb;
};
var gradient = function (startColor, endColor, step) {
var sColor = hexToRgb(startColor), eColor = hexToRgb(endColor);
var rStep = (eColor[0] - sColor[0]) / step, gStep = (eColor[1] - sColor[1]) / step, bStep = (eColor[2] - sColor[2]) / step;
var gradientColorArr = [];
for (var i = 0; i < step; i++) {
gradientColorArr.push(rgbToHex(parseInt((rStep * i + sColor[0]).toString(), 10), parseInt((gStep * i + sColor[1]).toString(), 10), parseInt((bStep * i + sColor[2]).toString(), 10)));
}
return gradientColorArr;
};
var rgbToNums = function (rgbStr) {
var rgbMatch = rgbStr.match(/^\s*rgb\(([0-9]*)\s*\,\s*([0-9]*)\s*\,\s*([0-9]*)\s*\)\s*/);
var rgbaMatch = rgbStr.match(/^\s*rgba\(([0-9]*)\s*\,\s*([0-9]*)\s*\,\s*([0-9]*)\s*\,\s*([0-9]*)\s*\)\s*/);
var result = [];
if (rgbaMatch) {
result.push(parseInt(rgbaMatch[1], 10));
result.push(parseInt(rgbaMatch[2], 10));
result.push(parseInt(rgbaMatch[3], 10));
result.push(parseInt(rgbaMatch[4], 10));
}
else {
if (rgbMatch) {
result.push(parseInt(rgbMatch[1], 10));
result.push(parseInt(rgbMatch[2], 10));
result.push(parseInt(rgbMatch[3], 10));
}
}
return result;
};
var getTransformValue = function (dom) {
var result = "";
if (dom) {
result = dom.style.transform || dom.style.webkitTransform || dom.style["msTransform"] || dom.style["mozTransform"] || dom.style["oTransform"] || "";
}
return result;
};
var isCssEmpty = function (cssValue) {
return cssValue === undefined || cssValue === null;
};
exports.isCssEmpty = isCssEmpty;
var calcPropertyData = function (resultData, key, value) {
var dResult = {
cssKey: key,
unit: ""
};
if (/color$/i.test(key)) {
dResult.unit = "";
if (!elmer_common_1.StaticCommon.isEmpty(value) && elmer_common_1.StaticCommon.isString(value)) {
var mapValue = value.replace(/^\s*/, "").replace(/\s*$/, "").replace(/\s{2,}/, " ");
var mapList = mapValue.split(" ");
if (mapList.length > 0) {
if (!exports.isCssEmpty(ElmerColorMapping_1.default[mapList[0]])) {
mapList[0] = ElmerColorMapping_1.default[mapList[0]];
}
dResult.value1 = /^#/.test(mapList[0]) ? hexToRgb(mapList[0]) : rgbToNums(mapList[0]);
if (mapList.length > 1) {
if (!exports.isCssEmpty(ElmerColorMapping_1.default[mapList[1]])) {
mapList[1] = ElmerColorMapping_1.default[mapList[1]];
}
dResult.value2 = /^#/.test(mapList[1]) ? hexToRgb(mapList[1]) : rgbToNums(mapList[1]);
if (mapList.length > 2) {
if (!exports.isCssEmpty(ElmerColorMapping_1.default[mapList[2]])) {
mapList[2] = ElmerColorMapping_1.default[mapList[2]];
}
dResult.value3 = /^#/.test(mapList[2]) ? hexToRgb(mapList[2]) : rgbToNums(mapList[2]);
if (mapList.length > 3) {
if (!exports.isCssEmpty(ElmerColorMapping_1.default[mapList[3]])) {
mapList[3] = ElmerColorMapping_1.default[mapList[3]];
}
dResult.value4 = /^#/.test(mapList[3]) ? hexToRgb(mapList[3]) : rgbToNums(mapList[3]);
}
}
}
}
}
}
else {
if (elmer_common_1.StaticCommon.isString(value)) {
if (key !== "opacity") {
var mapValue = value.replace(/^\s*/, "").replace(/\s*$/, "").replace(/\s{2,}/, " ");
var mapList = /^transform/i.test(key) ? mapValue.split(",") : mapValue.split(" ");
for (var i = 0; i < mapList.length; i++) {
var tmpValue = mapList[i];
var index = i + 1;
if (!exports.isCssEmpty(tmpValue)) {
if (/^[\-]{0,1}[0-9\.]*$/.test(tmpValue)) {
dResult["value" + index] = elmer_common_1.StaticCommon.isNumeric(tmpValue) && elmer_common_1.StaticCommon.isString(tmpValue) ? parseFloat(tmpValue) : tmpValue;
dResult["value" + index + "Unit"] = "";
}
else if (/^[\-]{0,1}[0-9\.]{1,}([a-z]{1,}|%)$/.test(tmpValue)) {
var tmpMatch = tmpValue.match(/^([\-]{0,1}[0-9]{1,})([a-z]{1,}|%)$/);
if (tmpMatch) {
dResult["value" + index] = elmer_common_1.StaticCommon.isNumeric(tmpMatch[1]) && elmer_common_1.StaticCommon.isString(tmpMatch[1]) ? parseFloat(tmpMatch[1]) : tmpMatch[1];
dResult["value" + index + "Unit"] = tmpMatch[2];
}
}
}
else {
if (key === "opacity") {
dResult["value" + index] = 1;
dResult["value" + index + "Unit"] = "";
}
}
tmpValue = null;
index = null;
}
}
else {
if (/^[0-9\.]{1,}$/.test(value)) {
dResult.value1 = parseFloat(value);
}
else {
dResult.value1 = 1;
}
}
}
else {
dResult.value1 = value;
}
}
resultData[key] = dResult;
};
exports.calcPropertyData = calcPropertyData;
var calcPropertyConfigData = function (configData) {
var result = {};
if (configData) {
for (var key in configData) {
var cssValue = configData[key];
exports.calcPropertyData(result, key, cssValue);
}
}
return result;
};
exports.calcPropertyConfigData = calcPropertyConfigData;
var readWillChangeCssDefaultData = function (dom, from, to) {
var resultData = {};
var fromObj = from || {};
var toObj = to || {};
if (dom) {
var allKeys = __spreadArray(__spreadArray([], Object.keys(fromObj)), Object.keys(toObj));
var transformValue_1;
allKeys.map(function (toKey) {
if (/^transform/i.test(toKey)) {
var transKey = toKey.replace(/^transform/i, "");
transKey = transKey.substr(0, 1).toLowerCase() + transKey.substr(1);
if (transformValue_1 === undefined || transformValue_1 === null) {
transformValue_1 = getTransformValue(dom);
}
if (!elmer_common_1.StaticCommon.isEmpty(transformValue_1)) {
var valueReg = new RegExp(transKey + "s*\\(([0-9a-z,%.]*)\\)s*", "i");
var valueMatch = transformValue_1.match(valueReg);
if (valueMatch) {
exports.calcPropertyData(resultData, toKey, valueMatch[1]);
}
else {
resultData[toKey] = {
unit: "",
value1: 0
};
}
}
}
else {
var value = dom.style.getPropertyValue(toKey);
if (toKey === "width") {
if (dom.clientWidth > 0) {
value = dom.clientWidth.toString();
}
}
else if (toKey === "height") {
if (dom.clientHeight > 0) {
value = dom.clientHeight.toString();
}
}
exports.calcPropertyData(resultData, toKey, value);
}
});
allKeys = null;
}
return resultData;
};
exports.readWillChangeCssDefaultData = readWillChangeCssDefaultData;
var getCssValue = function (cssKey, value, defaultUnit, valueUnit) {
if (!exports.isCssEmpty(value)) {
if (!/color$/i.test(cssKey)) {
if (exports.isCssEmpty(valueUnit)) {
if (!exports.isCssEmpty(defaultUnit)) {
return value.toString() + defaultUnit;
}
else {
return value.toString();
}
}
else {
return value.toString() + valueUnit;
}
}
else {
if (elmer_common_1.StaticCommon.isArray(value)) {
if (value.length === 3) {
return rgbToHex(value[0], value[1], value[2]);
}
else if (value.length === 4) {
return "rgba(" + value.join(",") + ")";
}
else {
return value.join(" ");
}
}
else {
return value;
}
}
}
else {
return value;
}
};
var convertAnimationDataToCssProperty = function (animationData) {
var cssResult = {};
if (animationData) {
var transformValues = [];
for (var cssKey in animationData) {
var cssData = animationData[cssKey];
var cssValue = [];
var cssValue1 = getCssValue(cssKey, cssData.value1, cssData.unit, cssData.value1Unit);
var cssValue2 = getCssValue(cssKey, cssData.value2, cssData.unit, cssData.value2Unit);
var cssValue3 = getCssValue(cssKey, cssData.value3, cssData.unit, cssData.value3Unit);
var cssValue4 = getCssValue(cssKey, cssData.value4, cssData.unit, cssData.value4Unit);
!exports.isCssEmpty(cssValue1) && cssValue.push(cssValue1);
!exports.isCssEmpty(cssValue2) && cssValue.push(cssValue2);
!exports.isCssEmpty(cssValue3) && cssValue.push(cssValue3);
!exports.isCssEmpty(cssValue4) && cssValue.push(cssValue4);
if (!/^transform/i.test(cssKey)) {
cssResult[cssKey] = cssValue.join(" ");
if (cssKey !== "opacity" && /^[0-9\.]{1,}$/.test(cssResult[cssKey])) {
cssResult[cssKey] = cssResult[cssKey] + "px";
}
}
else if (/^transform/i.test(cssKey)) {
var cssKeyValue = cssKey.replace(/^transform/i, "");
cssKeyValue = cssKeyValue.substr(0, 1).toLowerCase() + cssKeyValue.substr(1);
transformValues.push(cssKeyValue + "(" + cssValue.join(",") + ")");
}
}
if (transformValues.length > 0) {
cssResult["transform"] = transformValues.join(" ");
cssResult["webkitTransform"] = transformValues.join(" ");
cssResult["mozTransform"] = transformValues.join(" ");
cssResult["msTransform"] = transformValues.join(" ");
cssResult["oTransform"] = transformValues.join(" ");
}
}
return cssResult;
};
exports.convertAnimationDataToCssProperty = convertAnimationDataToCssProperty;
exports.default = {
converAnimationProperty: exports.convertAnimationDataToCssProperty,
converOption: exports.calcPropertyConfigData,
gradient: gradient,
hexToRgb: hexToRgb,
readWillChangeCssDefaultData: exports.readWillChangeCssDefaultData,
rgbToHex: rgbToHex,
};