Skip to content

Commit ac12f04

Browse files
jasiukiewicztymonjasiukiewicztymon
authored
Update nodelay.html
1 parent 6b7a19e commit ac12f04

File tree

1 file changed

+29
-72
lines changed

1 file changed

+29
-72
lines changed

‎experimental/nodelay.html

Lines changed: 29 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -8,93 +8,50 @@
88

99
<script lightwindsrc="./lightTheme.json">
1010
{
11-
"use strict";
12-
1311
// Init style tag where data = lightwindcss
1412
let styleLightWind = document.createElement('style');
1513
styleLightWind.setAttribute('data', 'lightwindcss');
1614
styleLightWind.textContent = '.hidden{display:none;}.invisible{visibility:hidden;}'
1715
document.head.appendChild(styleLightWind);
1816

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

21-
async function resolveClass(className) {
22-
let date = new Date();
23-
let lasttime = date.getTime()
24-
let classSubParams = className.split(':'), styleStr = '', screenBreakPointOpen = false
26+
async function resolveClass(className, res) {
27+
let classSubParams = className.split(':'), screenBreakPointOpen = false;
28+
2529
for (i in classSubParams) {
2630
if (i == classSubParams.length - 1) {
27-
// value + name getting
28-
let value = classSubParams[i].split('>')[1], name = classSubParams[i].split('>')[0], resp = '';
29-
let res = await fetch(document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc')), strRet = ''
30-
res = await res.json()
31-
if (resp == '') {
32-
resp = `{${name}:${value};}`
31+
// value
32+
let name = classSubParams[i].split('>')[0], value = classSubParams[i].split('>')[1]
33+
try {
34+
if (typeof(value) == 'undefined') {
35+
// 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}}`
37+
}
38+
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};}`
40+
}
41+
} 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};}`
3343
}
34-
styleStr = styleStr + `.${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, '\\|')}` + resp
44+
3545
if (screenBreakPointOpen)
36-
styleStr += '}'
46+
styleLightWind.textContent += '}'
3747
}
3848
else if (i == 0) {
39-
// screen async search
40-
41-
let resp = async function(classSubParams, screenBreakPointOpen, i, className) {
42-
let res = await fetch(document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc')), strRet = ''
43-
res = await res.json()
44-
res.default.breakpoints.screens.forEach(async (screen) => {
45-
if (screen.name == classSubParams[i]) {
46-
screenBreakPointOpen = true;
47-
if (screen.min != null && screen.max != null) {
48-
strRet = `@media screen and (min-width: ${screen.min}) and (max-width: ${screen.max}){`
49-
}
50-
else if (screen.min != null) {
51-
strRet = `@media screen and (min-width: ${screen.min}){`
52-
}
53-
else if (screen.max != null) {
54-
strRet = `@media screen and (max-width: ${screen.max}){`
55-
}
56-
}
57-
})
58-
return strRet
59-
}(classSubParams, screenBreakPointOpen, i, className);
60-
styleStr += await resp
61-
62-
// selector async search (name + alias on async search)
63-
resp = async function(classSubParams, i) {
64-
let res = await fetch(document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc')), strRet = ''
65-
res = await res.json()
66-
res.default.selectors[':'].forEach(async (sel) => {
67-
if (sel.name == classSubParams[i] || sel.alias.indexOf(classSubParams[i]) != -1)
68-
strRet = `.${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, '\\|')}:${sel.selector}`
69-
})
70-
res.default.selectors['::'].forEach(async (sel) => {
71-
if (sel.name == classSubParams[i] || sel.alias.indexOf(classSubParams[i]) != -1)
72-
strRet = `.${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, '\\|')}::${sel.selector}`
73-
})
74-
return strRet
75-
}(classSubParams, i);
76-
styleStr += await resp
49+
// screen + selector
7750
}
7851
else {
79-
// selector (name + alias on async search)
80-
let resp = async function(classSubParams, i) {
81-
let res = await fetch(document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc')), strRet = ''
82-
res = await res.json()
83-
res.default.selectors[':'].forEach(async (sel) => {
84-
if (sel.name == classSubParams[i] || sel.alias.indexOf(classSubParams[i]) != -1)
85-
strRet = `:${sel.selector}`
86-
})
87-
res.default.selectors['::'].forEach(async (sel) => {
88-
if (sel.name == classSubParams[i] || sel.alias.indexOf(classSubParams[i]) != -1)
89-
strRet = `::${sel.selector}`
90-
})
91-
return strRet
92-
}(classSubParams, i);
93-
styleStr += await resp
52+
// selector
9453
}
9554
}
96-
styleLightWind.textContent += styleStr
97-
console.log(date.getTime() - lasttime)
9855
}
9956

10057
// mutations
@@ -106,7 +63,7 @@
10663
if (typeof(node.classList) != 'undefined') {
10764
node.classList.forEach(elClass => {
10865
if (allClasses.indexOf(elClass) == -1) {
109-
resolveClass(elClass)
66+
resolveClass(elClass,res)
11067
allClasses.push(elClass)
11168
}
11269
})
@@ -121,7 +78,7 @@
12178
mutations.forEach(mutation => {
12279
mutation.target.classList.forEach(elClass => {
12380
if (allClasses.indexOf(elClass) == -1) {
124-
resolveClass(elClass)
81+
resolveClass(elClass,res)
12582
allClasses.push(elClass)
12683
}
12784
})
@@ -133,7 +90,7 @@
13390
</script>
13491
</head>
13592
<body>
136-
<div class="md:color>red top>100px position>absolute">
93+
<div class="color>red">
13794
jj
13895
</div>
13996
</body>

0 commit comments

Comments
 (0)