lazycss-base
Version:
A javaScript powered Css tool
1,185 lines (1,146 loc) • 47.8 kB
JavaScript
var Lazy = (function (exports) {
'use strict';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
var cssMethod = {
width: function (value) { return { width: typeof value === "number" ? value : value }; },
height: function (value) { return { height: typeof value === "number" ? value : value }; },
color: function (value) { return { color: value }; },
autoFlex: function (value) { return autoFlexMethods$1(value); },
animation: function (value) { return { animation: value }; },
animationDelay: function (value) { return { animationDelay: value }; },
fontSize: function (value) { return { fontSize: autoFontSize$1(value) }; }
};
var autoFlexMethods$1 = function (value) {
var result = {};
var split = value.split(" ");
if (split.length === 2) {
//存在两个
result = {
display: "flex",
justifyContent: split[0],
alignItems: split[1],
alignContent: split[1],
};
}
else {
result = {
display: "flex",
justifyContent: value,
alignItems: value,
alignContent: value,
};
}
return result;
};
var autoFontSize$1 = function (fontSize) {
var w = window.screen.width;
var math = fontSize * 1800 / w;
if (w < 660) {
math = math / 1.7;
}
math = Math.round(math);
return math;
};
//自动兼容表，使用驼峰命名
var List$1 = [
"animationDelay"
];
var autoCompatible$1 = function (cssName) {
return List$1.includes(cssName);
};
//渲染主CSS
//主函数，跟据key特征分配渲染方式
var render$1 = function (DomName, StyleMap, namespace) {
return __awaiter(this, void 0, void 0, function () {
var dom, styleKey, styleList, i, itemName;
return __generator(this, function (_a) {
dom = getDom((namespace !== null && namespace !== void 0 ? namespace : "") + "." + DomName);
if (!dom) {
return [2 /*return*/, false];
}
styleKey = Object.keys(StyleMap);
styleList = (namespace ? "." + namespace + "-" : ".") + DomName + "{";
for (i = 0; i < styleKey.length; i++) {
itemName = styleKey[i];
//父节点直接跳过
if (["fatherNode", "autoGroup", "namespace"].includes(itemName.toString())) {
continue;
}
//伪元素
if (itemName.toString().indexOf("_") === 0) {
//进入伪元素渲染队列
pseudoRender(DomName, itemName.toString(), StyleMap[itemName], namespace);
continue;
}
//子元素
if (itemName.toString() === "children") {
childRender(DomName, StyleMap[itemName]);
continue;
}
//默认渲染队列
styleList += getCssStr(itemName, StyleMap[itemName], namespace);
}
styleList += "}";
dom.innerHTML = styleList;
return [2 /*return*/];
});
});
};
//渲染伪元素CSS
var pseudoRender = function (DomName, pseudoType, pseudoMap, namespace) {
return __awaiter(this, void 0, void 0, function () {
var pseudoName, styleKey, pseudoList, i, dom;
return __generator(this, function (_a) {
pseudoName = pseudoType.split("_")[1];
styleKey = Object.keys(pseudoMap);
pseudoList = (namespace ? "." + namespace + "-" : ".") + DomName + ":" + pseudoName + "{";
for (i = 0; i < styleKey.length; i++) {
if (styleKey[i].toString() === "fatherNode") {
continue;
}
pseudoList += getCssStr(styleKey[i], pseudoMap[styleKey[i]], namespace);
}
pseudoList += "}";
dom = getDom((namespace !== null && namespace !== void 0 ? namespace : "") + "." + DomName + "." + pseudoType);
if (!dom) {
return [2 /*return*/];
}
dom.innerHTML = pseudoList;
return [2 /*return*/];
});
});
};
//渲染子元素CSS
var childRender = function (fatherNode, childList, namespace) {
return __awaiter(this, void 0, void 0, function () {
var keys, i, childName, dom, childStyle, childValue, childStyleKey, j, key;
return __generator(this, function (_a) {
keys = Object.keys(childList);
for (i = 0; i < keys.length; i++) {
childName = keys[i];
dom = getDom((namespace !== null && namespace !== void 0 ? namespace : "") + "." + fatherNode + "." + childName);
if (!dom) {
return [2 /*return*/, false];
}
childStyle = childList[keys[i]];
childValue = (namespace ? "." + namespace + "-" : ".") + fatherNode + " ." + childName + "{";
childStyleKey = Object.keys(childStyle);
for (j = 0; j < childStyleKey.length; j++) {
key = childStyleKey[j];
childValue += getCssStr(key, childStyle[key], namespace);
}
childValue += "}";
dom.innerHTML = childValue;
}
return [2 /*return*/];
});
});
};
var oneChildRender = function (fatherNode, childName, cssList, namespace) {
return __awaiter(this, void 0, void 0, function () {
var dom, childValue, childStyleKey, j, key;
return __generator(this, function (_a) {
dom = getDom((namespace !== null && namespace !== void 0 ? namespace : "") + "." + fatherNode + "." + childName);
if (!dom) {
return [2 /*return*/, false];
}
childValue = (namespace ? "." + namespace + "-" : ".") + fatherNode + " ." + childName + "{";
childStyleKey = Object.keys(cssList);
for (j = 0; j < childStyleKey.length; j++) {
key = childStyleKey[j];
childValue += getCssStr(key, cssList[key], namespace);
}
childValue += "}";
dom.innerHTML = childValue;
return [2 /*return*/];
});
});
};
//到cssMethod里找，如果没有，则执行默认的值
//cssMethod 仅对数值做处理，不对单位做处理，单位处理将会放在全局处理
//需要引入的有 readSuffix autoCompatible cssMethodDefault
var getCssStr = function (styleName, styleValue, styleNamespace) {
if (styleNamespace === void 0) { styleNamespace = "__default"; }
if (styleName === "fatherNode") {
return false;
}
var autoSuffix = getUnit(styleName, styleNamespace);
var keys = Object.keys(cssMethod);
if (keys.includes(styleName)) {
var value = cssMethod[styleName](styleValue);
var valueKey = Object.keys(value);
var resultStr = "";
for (var i = 0; i < valueKey.length; i++) {
//找到后进行查找自动装载
var autoValue_1 = autoCompatible$1(valueKey[i]); //返回需要适配的表
var lowerName_1 = humpToLine$1(valueKey[i]);
resultStr += lowerName_1 + ":" + value[valueKey[i]] + ";";
if (autoValue_1) {
resultStr += getCompatibleValue(lowerName_1, value[valueKey[i]]);
}
}
return resultStr;
}
else {
//默认的数值处理
console.log(autoSuffix);
if (styleValue instanceof Array) {
var value = "";
for (var i = 0; i < styleValue.length; i++) {
var val = styleValue[i];
value += val;
if (typeof val === "number" && autoSuffix === "") {
value += "px";
}
if (i != styleValue.length - 1) {
value += " ";
}
}
styleValue = value;
}
}
if (typeof styleValue === "number" && autoSuffix === "") {
styleValue = styleValue + "px";
}
var autoValue = autoCompatible$1(styleName);
var lowerName = humpToLine$1(styleName);
if (autoValue) {
getCompatibleValue(lowerName, styleValue);
}
return lowerName + ":" + styleValue + autoSuffix + ";";
};
var getUnit = function (cssName, namespace) {
var _a, _b, _c;
if (namespace === void 0) { namespace = "__default"; }
if (namespace === "") {
namespace = "__default";
}
console.log("getUnit", window.cssLazy.__style[namespace], namespace);
return (_c = (_b = (_a = window.cssLazy) === null || _a === void 0 ? void 0 : _a.__style[namespace]) === null || _b === void 0 ? void 0 : _b.__unit[cssName]) !== null && _c !== void 0 ? _c : "px";
};
var getDom = function (tagName) {
var tagStyles = document.getElementsByTagName("styles");
var __tagStyles;
if (tagStyles.length > 0) {
__tagStyles = tagStyles[0];
}
else {
console.error("find a error");
return false;
}
var tagStyle = __tagStyles.getElementsByTagName("style");
for (var i = 0; i < tagStyle.length; i++) {
if (tagStyle[i].getAttribute("name") === tagName) {
return tagStyle[i];
}
}
var newStyle = document.createElement("style");
newStyle.setAttribute("name", tagName);
__tagStyles.appendChild(newStyle);
return newStyle;
};
var humpToLine$1 = function (value) {
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
};
var getCompatibleValue = function (lowerName, styleValue) {
var result = "-webkit-" + lowerName + ":" + styleValue + ";";
result += "-moz-" + lowerName + ":" + styleValue + ";";
result += "-o-" + lowerName + ":" + styleValue + ";";
return result;
};
var Observe = function (namespace, elementName, itemName, oldValue, latestValue) {
if (namespace === void 0) { namespace = "__default"; }
return __awaiter(this, void 0, void 0, function () {
var effect, i, item;
return __generator(this, function (_a) {
namespace = namespace === "" ? "__default" : namespace;
effect = window.cssLazy.__watch;
for (i = 0; i < effect.length; i++) {
item = effect[i];
if (item.namespace === namespace && item.cssName === elementName && item.itemName === itemName) {
item.func(latestValue, oldValue);
}
}
return [2 /*return*/];
});
});
};
//响应函数
var useEffect = function (elementName, func) {
//namespace.cssName.elementName
var split = elementName.split(".");
var element = {
namespace: "",
cssName: "",
itemName: "",
func: func
};
if (split.length > 1) {
if (split.length === 2) {
//为默认的命名空间
element.namespace = "__default";
element.cssName = split[0];
element.itemName = split[1];
}
if (split.length === 3) {
element.namespace = split[0];
element.cssName = split[1];
element.itemName = split[2];
}
}
if (split.length === 1) {
var line = humpToLine$1(elementName).split("-");
if (line.length >= 2) {
element.namespace = "__global";
element.cssName = line[1];
element.itemName = line[2];
}
}
window.cssLazy.__watch.push(element);
};
/**
* method 1: use array in under
*/
var windowObjectInit = function () {
//style
var __style = createFirstSheet({});
//media
var __media = createFirstSheet({});
var __watch = [];
window.cssLazy = new Proxy({ __style: __style, __media: __media, __watch: __watch }, {
set: function (target, p, value) {
target[p] === undefined || target[p] === null ? target['__style'][p] = value : target[p] = value;
return true;
},
get: function (target, p) {
return target[p] === undefined || target[p] === null ? target['__style'][p] : target[p];
}
});
window.cssLazy['$add'] = function (className, _a, namespace) {
var args = __rest(_a, []);
createElement(className, args, namespace);
};
createNameSpace("__default");
createMediaNamespace("__default");
};
var createElement = function (fatherNode, cssList, namespace) {
//create namespace
namespace !== undefined ? createNameSpace(namespace) : namespace = "";
var cssListKey = Object.keys(cssList);
for (var i = 0; i < cssListKey.length; i++) {
var key = cssListKey[i];
if (key === "children") {
//遍历children，分别创建
var childElement = cssList[key];
for (var childElementKey in childElement) {
console.log(childElementKey);
var pushValue = childElement[childElementKey];
pushValue['fatherNode'] = fatherNode + "." + "children" + "." + childElementKey;
cssList[key][childElementKey] = new Proxy(pushValue, {
set: function (target, p, value, receiver) {
if (p === "fatherNode") {
return false;
}
target[p] = value;
var split = target['fatherNode'].split(".children.");
oneChildRender(split[0], split[1], target);
return true;
}
});
}
continue;
}
if (key.indexOf("_") === 0) {
//直接创建
cssList[key]['fatherNode'] = fatherNode + "." + key;
cssList[key] = new Proxy(cssList[key], {
set: function (target, property, value, receiver) {
if (property === "fatherNode") {
return false;
}
target[property] = value;
var split = target['fatherNode'].split(".");
pseudoRender(split[0], split[1], target, namespace);
return true;
}
});
}
}
cssList['fatherNode'] = fatherNode;
cssList['namespace'] = namespace;
render$1(fatherNode, cssList, namespace);
window.cssLazy.__style[namespace === "" ? "__default" : namespace][fatherNode] = new Proxy(cssList, {
set: function (target, p, value) {
var _a;
if (p === "fatherNode") {
return false;
}
Observe(target['namespace'], fatherNode, p.toString(), target[p], value);
target[p] = value;
render$1((_a = target['fatherNode']) !== null && _a !== void 0 ? _a : "", target, target['namespace']);
return true;
},
get: function (target, p) {
return target[p];
}
});
};
var createNameSpace = function (name) {
//创建命名级单位表
if (name in window.cssLazy.__style) {
return;
}
var selfObject = {
__unit: createUnitSheet(),
__method: createMethodSheet()
};
window.cssLazy.__style[name] = new Proxy(selfObject, {
set: function (target, p, value) {
target[p] = value;
return true;
},
get: function (target, p) {
return target[p];
}
});
};
var createUnitSheet = function () {
return new Proxy({}, {
set: function (target, p, value) {
target[p] = value;
return true;
},
get: function (target, p) {
return target[p];
}
});
};
var createMethodSheet = function () {
return new Proxy({}, {
set: function (target, p, value) {
target[p] = value;
return true;
},
get: function (target, p) {
return target[p];
}
});
};
var createFirstSheet = function (obj) {
return new Proxy(obj, {
set: function (target, p, value) {
target[p] = value;
return true;
},
get: function (target, p) {
return target[p] === undefined || target[p] === null ? target['__default'][p] : target[p];
}
});
};
var createMediaNamespace = function (name) {
if (name in window.cssLazy.__media) {
return;
}
window.cssLazy.__media[name] = new Proxy({}, {
set: function (target, p, value) {
target[p] = value;
return true;
},
get: function (target, p) {
return target[p];
}
});
};
var createMediaElement = function (DomName, config, styleSheet, namespace) {
if (namespace === void 0) { namespace = "__default"; }
namespace !== undefined ? createMediaNamespace(namespace) : namespace = "";
window.cssLazy.__media[namespace][DomName] = {
config: config,
styleSheet: styleSheet
};
};
var globalReactive = function () {
return __awaiter(this, void 0, void 0, function () {
var timer;
return __generator(this, function (_a) {
window.onresize = function () {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if (timer)
clearTimeout(timer);
// 如果已经执行过，不再执行
var callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, 100);
if (callNow) {
Observe("__global", "client", "resize", width, height);
}
};
return [2 /*return*/];
});
});
};
//初始化
var globalInit = function () {
if (document.getElementsByTagName("styles").length === 0) {
windowObjectInit();
globalReactive();
//挂载watch函数
//appendWatch();
window.cssUnit = Object.create({});
var styles = document.createElement("styles");
var selfStyle = document.createElement("style");
selfStyle.innerHTML = "styles{display:none}";
styles.appendChild(selfStyle);
document.body.appendChild(styles);
}
};
//主函数
var useStyle = function (_a, namespace, presetStyle) {
var args = __rest(_a, []);
globalInit();
//初始化
var mapArgs = Object.entries(args);
for (var i = 0; i < mapArgs.length; i++) {
createElement(mapArgs[i][0], mapArgs[i][1], namespace);
}
return window.cssLazy;
};
/**
* useClass: add class when used useStyle
* */
var useClass = function (className, _a, namespace) {
var args = __rest(_a, []);
createElement(className, args, namespace);
};
//将media设置加入到global中
var useMedia = function (DomName, config, styleList, namespace) {
if (namespace === void 0) { namespace = "__default"; }
createMediaElement(DomName, config, styleList, namespace);
};
var useLib = function (lib) {
globalInit();
var namespace = lib.namespace, cssList = lib.cssList;
var keys = Object.keys(cssList);
for (var i = 0; i < keys.length; i++) {
//需要集成到window中
createElement(keys[i], cssList[keys[i]], namespace);
}
return true;
};
var setStyleLib = function (namespace, _a) {
var args = __rest(_a, []);
return {
namespace: namespace,
cssList: args
};
};
var setPresetStyle = function (_a) {
__rest(_a, []);
return "setPresetStyle";
};
var setUnit = function (name, unit, namespace) {
if (namespace === void 0) { namespace = "__default"; }
//将name和unit挂载到window上
globalInit();
if (typeof name === "string") {
window.cssLazy[namespace].__unit[name] = unit;
}
else if (name.length > 0) {
name.forEach(function (item) {
window.cssLazy[namespace].__unit[item] = unit;
});
}
};
var humpToLine = function (value) {
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
};
//自动兼容表，使用驼峰命名
var List = [
"animationDelay"
];
var autoCompatible = function (cssName) {
return List.includes(cssName);
};
var getCompatible = function (lowerName, styleValue) {
var result = "-webkit-" + lowerName + ":" + styleValue + ";";
result += "-moz-" + lowerName + ":" + styleValue + ";";
result += "-o-" + lowerName + ":" + styleValue + ";";
return result;
};
var Methods = {
width: function (value) { return { width: typeof value === "number" ? value : value }; },
height: function (value) { return { height: typeof value === "number" ? value : value }; },
color: function (value) { return { color: value }; },
autoFlex: function (value) { return autoFlexMethods(value); },
animation: function (value) { return { animation: value }; },
animationDelay: function (value) { return { animationDelay: value }; },
fontSize: function (value) { return { fontSize: autoFontSize(value) }; }
};
var getSystemMethods = function (name, value) {
var userMethod = Methods;
var methodKey = Object.keys(userMethod);
var includes = methodKey.includes(name);
if (includes) {
return userMethod[name](value);
}
return false;
};
var getMethods = function (name, value, namespace) {
if (namespace === void 0) { namespace = "_default"; }
var userMethod;
var globalMethod = window.Lazy._global._default._method;
userMethod = __assign({}, globalMethod);
if (namespace !== "_default") {
var namespaceMethod = window.Lazy._global[namespace]._method;
userMethod = __assign(__assign({}, globalMethod), namespaceMethod);
}
var methodKey = Object.keys(userMethod);
var includes = methodKey.includes(name);
if (includes) {
return userMethod[name](value);
}
return false;
};
var autoFlexMethods = function (value) {
var result = {};
var split = value.split(" ");
if (split.length === 2) {
//存在两个
result = {
display: "flex",
justifyContent: split[0],
alignItems: split[1],
alignContent: split[1],
};
}
else {
result = {
display: "flex",
justifyContent: value,
alignItems: value,
alignContent: value,
};
}
return result;
};
var autoFontSize = function (fontSize) {
var w = window.screen.width;
var math = fontSize * 1800 / w;
if (w < 660) {
math = math / 1.7;
}
math = Math.round(math);
return math;
};
var Units = {
width: "px",
height: "px",
margin: "px"
};
var getUnits = function (name, value, namespace) {
if (namespace === void 0) { namespace = "_default"; }
var userUnit;
var globalUnit = window.Lazy._global._default._unit;
userUnit = __assign({}, globalUnit);
if (namespace !== "_default") {
var namespaceUnit = window.Lazy._global[namespace]._unit;
userUnit = __assign(__assign({}, globalUnit), namespaceUnit);
}
var methodKey = Object.keys(userUnit);
var includes = methodKey.includes(name);
if (includes) {
return userUnit[name];
}
return false;
};
var getSystemUnits = function (name) {
var _a;
return (_a = Units[name]) !== null && _a !== void 0 ? _a : false;
};
var Renderer = function (fatherNode, cssList, namespace) {
if (namespace === void 0) { namespace = "_default"; }
main();
function main() {
var dom = createStyleTag();
if (!dom) {
return false;
}
var cssMapKey = Object.keys(cssList);
var styleList = (namespace !== "_default" ? "." + namespace + "-" : ".") + fatherNode + "{";
for (var i = 0; i < cssMapKey.length; i++) {
var itemName = cssMapKey[i];
//父节点直接跳过
if (["fatherNode", "autoGroup", "nameSpace"].includes(itemName.toString())) {
continue;
}
//伪元素
if (itemName.toString().indexOf("_") === 0) {
//进入伪元素渲染队列
pseudo(fatherNode, itemName.toString(), cssList[itemName]);
continue;
}
//子元素
if (itemName.toString() === "child") {
child(fatherNode, cssList[itemName]);
continue;
}
//默认渲染队列
styleList += createCSS(itemName, cssList[itemName]);
}
styleList += "}";
dom.innerHTML = styleList;
}
function child(fatherNode, childList) {
var keys = Object.keys(childList);
for (var i = 0; i < keys.length; i++) {
var childName = keys[i];
var dom = createStyleTag(childName);
if (!dom) {
return false;
}
var childStyle = childList[keys[i]];
var childValue = (namespace ? "." + namespace + "-" : ".") + fatherNode + " " + (namespace ? "." + namespace + "-" : ".") + childName + "{";
var childStyleKey = Object.keys(childStyle);
for (var j = 0; j < childStyleKey.length; j++) {
var key = childStyleKey[j];
childValue += createCSS(key, childStyle[key]);
}
childValue += "}";
dom.innerHTML = childValue;
}
}
function pseudo(DomName, pseudoType, pseudoMap) {
var pseudoName;
pseudoName = pseudoType.split("_")[1];
var styleKey = Object.keys(pseudoMap);
var pseudoList = (namespace ? "." + namespace + "-" : ".") + DomName + ":" + pseudoName + "{";
for (var i = 0; i < styleKey.length; i++) {
if (styleKey[i].toString() === "fatherNode") {
continue;
}
pseudoList += createCSS(styleKey[i], pseudoMap[styleKey[i]]);
}
pseudoList += "}";
var dom = createStyleTag(pseudoType);
if (!dom) {
return;
}
dom.innerHTML = pseudoList;
}
function createCSS(cssName, cssValue) {
var lowerName = humpToLine(cssName);
var result = "";
//用户方法
var methodResult = getMethods(cssName, cssValue, namespace);
if (methodResult !== false) {
//循环输出
if (methodResult instanceof Object) {
var keys = Object.keys(methodResult);
for (var i = 0; i < keys.length; i++) {
var lowerName_1 = humpToLine(keys[i]);
result += lowerName_1 + ":" + methodResult[keys[i]] + ";";
var autoValue_1 = autoCompatible(keys[i]); //返回需要适配的表
if (autoValue_1) {
result += getCompatible(lowerName_1, methodResult[keys[i]]);
}
}
return result;
}
if (methodResult instanceof Array) {
var value = "";
for (var i = 0; i < methodResult.length; i++) {
value += methodResult[i] + " ";
}
result += lowerName + ":" + value + ";";
var autoValue_2 = autoCompatible(cssName); //返回需要适配的表
if (autoValue_2) {
result += getCompatible(lowerName, value);
}
return result;
}
result += lowerName + ":" + methodResult + ";";
var autoValue = autoCompatible(cssName); //返回需要适配的表
if (autoValue) {
result += getCompatible(lowerName, cssValue);
}
return result;
}
//用户unit
var unitResult = getUnits(cssName, cssValue, namespace);
if (unitResult !== false) {
if (cssValue instanceof Array) {
var value = "";
for (var i = 0; i < cssValue.length; i++) {
var val = cssValue[i];
value += val + unitResult;
if (i != cssValue.length - 1) {
value += " ";
}
}
cssValue = value;
}
else {
cssValue = cssValue + unitResult;
}
return lowerName + ":" + cssValue + ";";
}
//系统方法
var sysMethodResult = getSystemMethods(cssName, cssValue);
if (sysMethodResult !== false) {
//循环输出
if (sysMethodResult instanceof Object) {
var keys = Object.keys(sysMethodResult);
for (var i = 0; i < keys.length; i++) {
var lowerName_2 = humpToLine(keys[i]);
result += lowerName_2 + ":" + sysMethodResult[keys[i]] + ";";
var autoValue_3 = autoCompatible(keys[i]); //返回需要适配的表
if (autoValue_3) {
result += getCompatible(lowerName_2, sysMethodResult[keys[i]]);
}
}
return result;
}
if (sysMethodResult instanceof Array) {
var value = "";
for (var i = 0; i < sysMethodResult.length; i++) {
value += sysMethodResult[i] + " ";
}
result += lowerName + ":" + value + ";";
var autoValue_4 = autoCompatible(cssName); //返回需要适配的表
if (autoValue_4) {
result += getCompatible(lowerName, value);
}
return result;
}
result += lowerName + ":" + sysMethodResult + ";";
var autoValue = autoCompatible(cssName); //返回需要适配的表
if (autoValue) {
result += getCompatible(lowerName, cssValue);
}
return result;
}
//系统unit
var sysUnitResult = getSystemUnits(cssName);
if (sysUnitResult !== false) {
return lowerName + ":" + cssValue + sysUnitResult + ";";
}
//直接输出
return lowerName + ":" + cssValue + ";";
}
function createStyleTag(addition) {
var id;
if (namespace === "_default") {
id = fatherNode;
}
else {
id = namespace + "." + fatherNode;
}
if (addition) {
id += "." + addition;
}
var tagStyles = document.getElementsByTagName("lazy");
var __tagStyles;
if (tagStyles.length > 0) {
__tagStyles = tagStyles[0];
}
else {
console.error("find a error");
return false;
}
var tagStyle = __tagStyles.getElementsByTagName("style");
for (var i = 0; i < tagStyle.length; i++) {
if (tagStyle[i].getAttribute("name") === id) {
return tagStyle[i];
}
}
var newStyle = document.createElement("style");
newStyle.setAttribute("name", id);
__tagStyles.appendChild(newStyle);
return newStyle;
}
};
var obs = function (name, oldValue, newValue) {
console.log(name, oldValue, newValue);
};
//所有创建的功能
var create = {
_namespace: "_default",
namespace: function (name) {
console.log(window.Lazy);
this._namespace = name;
if (window.Lazy._global[name] === undefined) {
var _method = {};
var _unit = {};
var _sheet = {};
window.Lazy._global[name] = {
_method: _method,
_unit: _unit,
_sheet: _sheet
};
}
return this;
},
//create element
element: function (elementObj) {
var keys = Object.keys(elementObj);
var proxyObj = {};
for (var i = 0; i < keys.length; i++) {
var keyValue = keys[i];
elementObj[keyValue]["fatherNode"] = keyValue;
elementObj[keyValue]["nameSpace"] = this._namespace;
Renderer(keyValue, elementObj[keyValue], this._namespace);
proxyObj[keyValue] = new Proxy(elementObj[keyValue], {
set: function (target, p, value, receiver) {
obs(p, target[p], value);
console.log(target);
console.log(1);
target[p] = value;
Renderer(target["fatherNode"], target, target["nameSpace"]);
return true;
},
get: function (target, p, receiver) {
return target[p];
}
});
}
return proxyObj;
},
tags: function () {
if (document.getElementsByTagName("lazy").length === 0) {
var styles = document.createElement("lazy");
var selfStyle = document.createElement("style");
selfStyle.innerHTML = "lazy{display:none;}";
styles.appendChild(selfStyle);
document.body.appendChild(styles);
}
},
sheet: function (sheet) {
window.Lazy._global[this._namespace]._sheet = sheet;
},
unit: function (unitName, unitValue) {
window.Lazy._global[this._namespace]._unit[unitName] = unitValue;
},
method: function (methodName, methodFunc) {
window.Lazy._global[this._namespace]._method[methodName] = methodFunc;
}
};
var render = function (_a) {
var _b, _c, _d;
var config = __rest(_a, []);
//config 配置
var namespace = (_b = config === null || config === void 0 ? void 0 : config.namespace) !== null && _b !== void 0 ? _b : "_default";
var c = create.namespace(namespace);
var units = (_c = config === null || config === void 0 ? void 0 : config.unit) !== null && _c !== void 0 ? _c : {};
if (units !== {}) {
var unitKey = Object.keys(units);
for (var i = 0; i < unitKey.length; i++) {
c.unit(unitKey[i], units[unitKey[i]]);
}
}
var methods = (_d = config === null || config === void 0 ? void 0 : config.method) !== null && _d !== void 0 ? _d : {};
if (methods !== {}) {
var methodKey = Object.keys(methods);
for (var i = 0; i < methodKey.length; i++) {
c.method(methodKey[i], methods[methodKey[i]]);
}
}
c.sheet(c.element(window.Lazy._sheet));
delete window.Lazy._sheet;
delete window.Lazy._namespace;
console.log(window.Lazy);
};
var set = function (path, value) {
var paths = getPaths(path);
//namespace.className.styleName && N.C.childName.styleName &&
setDeepValue(window.Lazy._global, paths, value);
};
var get = function (path) {
var paths = getPaths(path);
return getDeepValue(window.Lazy._global, paths);
};
var getPaths = function (path) {
var paths = path.split(".");
if (paths.length <= 2) {
paths.unshift("_sheet");
paths.unshift("_default");
}
else {
var namespace = paths[0];
paths.shift();
paths.unshift("_sheet");
paths.unshift(namespace);
}
console.log("deepPath", paths);
return paths;
};
var setDeepValue = function (object, path, value) {
var fieldPath = __spreadArray([], path, true);
if (fieldPath.length) {
var key = fieldPath.shift();
if (object && object[key]) {
object[key] = setDeepValue(object[key], fieldPath, value);
}
}
else {
object = value;
}
return object;
};
var getDeepValue = function (object, path) {
var value = "";
var fieldPath = __spreadArray([], path, true);
if (fieldPath.length) {
var key = fieldPath.shift();
if (object && object[key]) {
return getDeepValue(object[key], fieldPath);
}
}
else {
value = object;
}
return value;
};
var init = function () {
window.Lazy = {
_global: {},
_effect: [],
_plugin: [],
_setting: {}
};
var c = create.namespace("_default");
c.tags();
};
var use = function (type) {
if (type instanceof Function) {
type();
}
return {
use: use,
render: render
};
};
var createSheet = function (cssSheet) {
init();
window.Lazy._sheet = cssSheet;
return {
render: render,
use: use
};
};
var namespace = function (namespace) {
return function () {
window.Lazy._namespace = namespace;
};
};
var rgb = function (r, g, b) {
if (g !== undefined) {
return "#" + Number(0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).substring(1);
}
else {
return "#" + Number(0x1000000 + r[0] * 0x10000 + r[1] * 0x100 + r[2]).toString(16).substring(1);
}
};
var rgba = function (r, g, b, a) {
var hex = Number(r).toString(16) + Number(g).toString(16) + Number(b).toString(16);
if (a !== void 0) {
hex += (Math.floor((a * 100 * 255) / 100)).toString(16);
}
return hex;
};
exports.createSheet = createSheet;
exports.get = get;
exports.namespace = namespace;
exports.render = render;
exports.rgb = rgb;
exports.rgba = rgba;
exports.set = set;
exports.setPresetStyle = setPresetStyle;
exports.setStyleLib = setStyleLib;
exports.setUnit = setUnit;
exports.useClass = useClass;
exports.useEffect = useEffect;
exports.useLib = useLib;
exports.useMedia = useMedia;
exports.useStyle = useStyle;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({});