Skip to content

Commit 8166b12

Browse files
jasiukiewicztymonjasiukiewicztymon
authored
Update nodelay.html
1 parent ac12f04 commit 8166b12

File tree

1 file changed

+65
-14
lines changed

1 file changed

+65
-14
lines changed

‎experimental/nodelay.html

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,56 +14,107 @@
1414
styleLightWind.textContent = '.hidden{display:none;}.invisible{visibility:hidden;}'
1515
document.head.appendChild(styleLightWind);
1616

17-
let res;
18-
19-
(async (res) => {
20-
res = await fetch(document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc'))
21-
res = await res.json()
22-
})(res)
23-
2417
let allClasses = [];
2518

2619
async function resolveClass(className, res) {
2720
let classSubParams = className.split(':'), screenBreakPointOpen = false;
28-
21+
2922
for (i in classSubParams) {
3023
if (i == classSubParams.length - 1) {
24+
if (i == 0)
25+
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}`
3126
// value
3227
let name = classSubParams[i].split('>')[0], value = classSubParams[i].split('>')[1]
3328
try {
3429
if (typeof(value) == 'undefined') {
3530
// value only
36-
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}{${res.proprieties.valueOnly[name].css}}`
31+
styleLightWind.textContent += `{${res.proprieties.valueOnly[name].css}}`
3732
}
3833
else {
39-
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}{${res.proprieties.valueKey[name].propriety}:${value};}`
34+
styleLightWind.textContent += `{${res.proprieties.valueKey[name].propriety}:${value};}`
4035
}
4136
} catch {
42-
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}{${name}:${value};}`
37+
styleLightWind.textContent += `{${name}:${value};}`
4338
}
4439

4540
if (screenBreakPointOpen)
4641
styleLightWind.textContent += '}'
4742
}
4843
else if (i == 0) {
4944
// screen + selector
45+
try {
46+
// screen
47+
if (res.screens[classSubParams[i]].min != null && res.screens[classSubParams[i]].max != null)
48+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].min}) and (max-width: ${res.screens[classSubParams[i]].max}) {`
49+
else if (res.screens[classSubParams[i]].min != null)
50+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].min}) {`
51+
else if (res.screens[classSubParams[i]].max != null)
52+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].max}) {`
53+
54+
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}`
55+
screenBreakPointOpen = true
56+
}
57+
catch {
58+
// selector
59+
styleLightWind.textContent += `.${className.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\,/g, '\\,').replace(/\|/g, '\\|')}`
60+
try {
61+
styleLightWind.textContent += `${res.selectors[classSubParams[i]].selector}`
62+
} catch {}
63+
}
5064
}
5165
else {
5266
// selector
67+
try {
68+
styleLightWind.textContent += `${res.selectors[classSubParams[i]].selector}`
69+
} catch {}
5370
}
5471
}
5572
}
5673

5774
// mutations
5875
(async () => {
76+
let res = JSON.parse(`{
77+
"values": {
78+
"spacing": { "0": "0px", "px": "1px", "0.5": "0.125rem" }
79+
},
80+
"screens": {
81+
"sm": { "min" : null, "max" : "640px" },
82+
"md": { "min" : null, "max" : "768px" },
83+
"lg": { "min" : null, "max" : "1024px" },
84+
"xl": { "min" : null, "max" : "1280px" },
85+
"2xl": { "min" : null, "max" : "1536px" }
86+
},
87+
"selectors": {
88+
"active": { "selector": ":active" },
89+
"act": { "selector": ":active" },
90+
"checked": { "selector": ":checked" },
91+
"ckd": { "selector": ":checked" },
92+
"hover": { "selector": ":hover" },
93+
"hvr": { "selector": ":hover" }
94+
},
95+
"proprieties": {
96+
"valueOnly": {
97+
"absolute": { "css": "position:absolute;" },
98+
"relative": { "css": "position:relative;" },
99+
"static": { "css": "position:static;" },
100+
"fixed": { "css": "position:fixed;" },
101+
"sticky": { "css": "position:sticky;" }
102+
},
103+
"valueKey": {
104+
"padding": { "propriety": "padding", "values": "spacing" },
105+
"p": { "propriety": "padding", "values": "spacing" }
106+
}
107+
}
108+
}`)
109+
59110
new MutationObserver(function(mutations) {
60111
mutations.forEach(mutation => {
61112
try {
62113
mutation.addedNodes.forEach(node => {
63114
if (typeof(node.classList) != 'undefined') {
64115
node.classList.forEach(elClass => {
65116
if (allClasses.indexOf(elClass) == -1) {
66-
resolveClass(elClass,res)
117+
resolveClass(elClass, res)
67118
allClasses.push(elClass)
68119
}
69120
})
@@ -78,7 +129,7 @@
78129
mutations.forEach(mutation => {
79130
mutation.target.classList.forEach(elClass => {
80131
if (allClasses.indexOf(elClass) == -1) {
81-
resolveClass(elClass,res)
132+
resolveClass(elClass, res)
82133
allClasses.push(elClass)
83134
}
84135
})
@@ -90,7 +141,7 @@
90141
</script>
91142
</head>
92143
<body>
93-
<div class="color>red">
144+
<div class="color>red font-size>40pt hvr:font-size>60pt">
94145
jj
95146
</div>
96147
</body>

0 commit comments

Comments
 (0)