Skip to content

Commit 1664d71

Browse files
jasiukiewicztymonjasiukiewicztymon
authored
Update index.js
1 parent e01c7df commit 1664d71

File tree

1 file changed

+87
-288
lines changed

1 file changed

+87
-288
lines changed

‎src/index.js

+87-288
Original file line numberDiff line numberDiff line change
@@ -1,308 +1,107 @@
1-
'use strict';
2-
// to load unofficial theme the user have to download LightWindCSS to local and do changes there in the lightTheme.json
3-
import lightWindTheme from './lightTheme.json' assert {type: 'json'}
1+
{
2+
// Init style tag where data = lightwindcss
3+
let styleLightWind = document.createElement('style');
4+
styleLightWind.setAttribute('data', 'lightwindcss');
5+
styleLightWind.textContent = '.hidden{display:none;}.invisible{visibility:hidden;}'
6+
document.head.appendChild(styleLightWind);
47

5-
let LightJsClasses, lightWindCssConfig = lightWindTheme.default;
6-
7-
// Init style tag where data = lightwindcss
8-
let styleLightWind = document.createElement('style');
9-
styleLightWind.setAttribute('data', 'lightwindcss');
10-
styleLightWind.textContent = '.hidden{display:none;}.invisible{visibility:hidden;}'
11-
document.head.appendChild(styleLightWind);
12-
13-
// observing the DOM
14-
lightObserve(LightJsClasses)
15-
16-
// Getting all classes
17-
LightJsClasses = getAllClasses()
18-
19-
// create style tag with all the content
20-
for (let i in LightJsClasses) {
21-
let classParams = LightJsClasses[i].split(':');
22-
23-
let styleStr = ``;
24-
let breakPointOpen = false;
25-
26-
// getting the breakpoint
27-
28-
for (let k in lightWindCssConfig.breakpoints.screens) {
29-
if (lightWindCssConfig.breakpoints.screens[k].name == classParams[0]) {
30-
if (lightWindCssConfig.breakpoints.screens[k].min == null) {
31-
styleStr += `@media screen and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) { `;
32-
breakPointOpen = true;
33-
}
34-
else if (lightWindCssConfig.breakpoints.screens[k].max == null) {
35-
styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) { `;
36-
breakPointOpen = true;
37-
}
38-
else {
39-
styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) {`;
40-
breakPointOpen = true;
41-
}
42-
break;
43-
}
44-
}
45-
46-
styleStr += `.${LightJsClasses[i].replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\./g, '\\.')}`
47-
48-
for (let j = 0; j < classParams.length - 1; j++) {
49-
// selectors
50-
if (breakPointOpen && j == 0)
51-
j++;
52-
53-
for (let k = 0; k < lightWindCssConfig.selectors[':'].length; k++) {
54-
if (lightWindCssConfig.selectors[':'][k].name == classParams[j] || lightWindCssConfig.selectors[':'][k].alias.indexOf(classParams[j]) != -1) {
55-
styleStr += `:${lightWindCssConfig.selectors[':'][k].selector}`
56-
}
57-
}
58-
for (let k = 0; k < lightWindCssConfig.selectors['::'].length; k++) {
59-
if (lightWindCssConfig.selectors['::'][k].name == classParams[j] || lightWindCssConfig.selectors['::'][k].alias.indexOf(classParams[j]) != -1) {
60-
styleStr += `::${lightWindCssConfig.selectors['::'][k].selector}`
61-
}
62-
}
63-
}
64-
65-
styleStr += "{"
66-
67-
let isFound = false;
68-
for (let k = 0; k < lightWindCssConfig.proprieties.light.length; k++) {
69-
if (isFound)
70-
break;
71-
if (classParams[classParams.length - 1].split('>')[0] == lightWindCssConfig.proprieties.light[k].name) {
72-
let value = classParams[classParams.length - 1].split('>')[1]
73-
if (value.indexOf('calc(') != -1) {
74-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
75-
}
76-
77-
for (let l in lightWindCssConfig.proprieties.light[k].values) {
78-
if (lightWindCssConfig.proprieties.light[k].values[l].name == value)
79-
value = lightWindCssConfig.proprieties.light[k].values[l].value
80-
}
81-
82-
if (value.startsWith('--')) {
83-
value = `var(${value})`
84-
}
85-
86-
lightWindCssConfig.proprieties.light[k].proprieties.forEach(el => {
87-
styleStr += `${el}: ${value};`
88-
})
89-
90-
isFound = true;
91-
}
92-
}
8+
let allClasses = [];
939

94-
for (let k = 0; k < lightWindCssConfig.proprieties.global.length; k++) {
95-
if (isFound)
96-
break;
97-
if (lightWindCssConfig.proprieties.global[k]["value-only"]) {
98-
if (lightWindCssConfig.proprieties.global[k].values.indexOf(classParams[classParams.length - 1].split('>')[0]) != -1) {
99-
styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${classParams[classParams.length - 1].split('>')[0]}`
100-
isFound = true;
101-
}
102-
}
103-
else {
104-
// with value to resolve
105-
try {
106-
if (classParams[classParams.length - 1].split('>')[0] == lightWindCssConfig.proprieties.global[k].propriety || lightWindCssConfig.proprieties.global[k].alias.indexOf(classParams[classParams.length - 1].split('>')[0]) != -1) {
107-
let value = classParams[classParams.length - 1].split('>')[1]
108-
if (value.indexOf('calc(') != -1) {
109-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
110-
}
10+
async function resolveClass(className, res) {
11+
let classSubParams = className.split(':'), screenBreakPointOpen = false;
11112

112-
for (let l in lightWindCssConfig.proprieties.global[k].values) {
113-
if (lightWindCssConfig.proprieties.global[k].values[l].name == value)
114-
value = lightWindCssConfig.proprieties.global[k].values[l].value
13+
for (i in classSubParams) {
14+
if (i == classSubParams.length - 1) {
15+
if (i == 0)
16+
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, '\\|')}`
17+
// value
18+
let name = classSubParams[i].split('>')[0], value = classSubParams[i].split('>')[1]
19+
try {
20+
if (typeof(value) == 'undefined') {
21+
// value only
22+
styleLightWind.textContent += `{${res.proprieties.valueOnly[name].css}}`
11523
}
116-
117-
if (value.startsWith('--')) {
118-
value = `var(${value})`
24+
else {
25+
try {
26+
styleLightWind.textContent += `{${res.proprieties.valueKey[name].propriety}:${res.values[res.proprieties.valueKey[name].values][value]};}`
27+
}
28+
catch {
29+
styleLightWind.textContent += `{${res.proprieties.valueKey[name].propriety}:${value};}`
30+
}
11931
}
120-
121-
styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${value}`
122-
isFound = true;
123-
}
124-
} catch {}
125-
}
126-
}
127-
128-
if (!isFound) {
129-
let value = classParams[classParams.length - 1].split('>')[1]
130-
if (value.indexOf('calc(') != -1) {
131-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
132-
}
133-
134-
if (value.startsWith('--')) {
135-
value = `var(${value})`
136-
}
137-
138-
styleStr += `${classParams[classParams.length - 1].split('>')[0]}: ${value}`;
139-
}
140-
141-
styleStr += ";}"
142-
if (breakPointOpen)
143-
styleStr += '}'
144-
145-
styleLightWind.innerText += styleStr
146-
}
147-
148-
// classes observation functions
149-
async function lightObserve(classes) {
150-
new MutationObserver((mutations) => {
151-
for (let i in mutations) {
152-
// in case of the element creation
153-
mutations[i].addedNodes.forEach(cel => {
154-
cel.classList.forEach(el => {
155-
classEvaluate(el, classes)
156-
})
157-
})
158-
// in case of the element class addition
159-
mutations[i].target.classList.forEach(el => {
160-
classEvaluate(el, classes)
161-
})
162-
}
163-
}).observe(document.querySelector('body'), { attributes: true, subtree: true, childList: true });
164-
}
165-
function getAllClasses() {
166-
let allClasses = [];
167-
let allElements = document.querySelectorAll('*');
168-
for (let i = 0; i < allElements.length; i++) {
169-
allElements[i].classList.value.split(' ').forEach(e => {
170-
if (e != '')
171-
allClasses.push(e)
172-
})
173-
}
174-
return allClasses;
175-
}
176-
async function classEvaluate(el, classes = null) {
177-
let styleLightWind = document.head.querySelector("style[data=\"lightwindcss\"]")
178-
179-
if (classes.indexOf(el) === -1) {
180-
classes.push(el)
181-
182-
let classParams = el.split(':');
183-
184-
let styleStr = ``;
185-
let breakPointOpen = false;
186-
187-
// getting the breakpoint
188-
189-
for (let k in lightWindCssConfig.breakpoints.screens) {
190-
if (lightWindCssConfig.breakpoints.screens[k].name == classParams[0]) {
191-
if (lightWindCssConfig.breakpoints.screens[k].min == null) {
192-
styleStr += `@media screen and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) { `;
193-
breakPointOpen = true;
32+
} catch {
33+
styleLightWind.textContent += `{${name}:${value};}`
19434
}
195-
else if (lightWindCssConfig.breakpoints.screens[k].max == null) {
196-
styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) { `;
197-
breakPointOpen = true;
198-
}
199-
else {
200-
styleStr += `@media screen and (min-width: ${lightWindCssConfig.breakpoints.screens[k].min}) and (max-width: ${lightWindCssConfig.breakpoints.screens[k].max}) {`;
201-
breakPointOpen = true;
202-
}
203-
break;
204-
}
205-
}
20635

207-
styleStr += `.${el.replace(/\:/g, '\\:').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/\>/g, '\\>').replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\%/g, '\\%').replace(/\-/g, '\\-').replace(/\+/g, '\\+').replace(/\*/g, '\\*').replace(/\./g, '\\.')}`
208-
209-
for (let j = 0; j < classParams.length - 1; j++) {
210-
// selectors
211-
if (breakPointOpen && j == 0)
212-
j++;
213-
214-
for (let k = 0; k < lightWindCssConfig.selectors[':'].length; k++) {
215-
if (lightWindCssConfig.selectors[':'][k].name == classParams[j] || lightWindCssConfig.selectors[':'][k].alias.indexOf(classParams[j]) != -1) {
216-
styleStr += `:${lightWindCssConfig.selectors[':'][k].selector}`
217-
}
218-
}
219-
for (let k = 0; k < lightWindCssConfig.selectors['::'].length; k++) {
220-
if (lightWindCssConfig.selectors['::'][k].name == classParams[j] || lightWindCssConfig.selectors['::'][k].alias.indexOf(classParams[j]) != -1) {
221-
styleStr += `::${lightWindCssConfig.selectors['::'][k].selector}`
222-
}
36+
if (screenBreakPointOpen)
37+
styleLightWind.textContent += '}'
22338
}
224-
}
225-
226-
styleStr += "{"
227-
228-
let isFound = false;
229-
for (let k = 0; k < lightWindCssConfig.proprieties.light.length; k++) {
230-
if (isFound)
231-
break;
232-
if (classParams[classParams.length - 1].split('>')[0] == lightWindCssConfig.proprieties.light[k].name) {
233-
let value = classParams[classParams.length - 1].split('>')[1]
234-
if (value.indexOf('calc(') != -1) {
235-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
236-
}
237-
238-
for (let l in lightWindCssConfig.proprieties.light[k].values) {
239-
if (lightWindCssConfig.proprieties.light[k].values[l].name == value)
240-
value = lightWindCssConfig.proprieties.light[k].values[l].value
241-
}
242-
243-
if (value.startsWith('--')) {
244-
value = `var(${value})`
39+
else if (i == 0) {
40+
// screen + selector
41+
try {
42+
// screen
43+
if (res.screens[classSubParams[i]].min != null && res.screens[classSubParams[i]].max != null)
44+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].min}) and (max-width: ${res.screens[classSubParams[i]].max}) {`
45+
else if (res.screens[classSubParams[i]].min != null)
46+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].min}) {`
47+
else if (res.screens[classSubParams[i]].max != null)
48+
styleLightWind.textContent += `@media screen and (min-width: ${res.screens[classSubParams[i]].max}) {`
49+
50+
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, '\\|')}`
51+
screenBreakPointOpen = true
24552
}
246-
247-
lightWindCssConfig.proprieties.light[k].proprieties.forEach(el => {
248-
styleStr += `${el}: ${value};`
249-
})
250-
251-
isFound = true;
252-
}
253-
}
254-
255-
for (let k = 0; k < lightWindCssConfig.proprieties.global.length; k++) {
256-
if (isFound)
257-
break;
258-
if (lightWindCssConfig.proprieties.global[k]["value-only"]) {
259-
if (lightWindCssConfig.proprieties.global[k].values.indexOf(classParams[classParams.length - 1].split('>')[0]) != -1) {
260-
styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${classParams[classParams.length - 1].split('>')[0]}`
261-
isFound = true;
53+
catch {
54+
// selector
55+
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, '\\|')}`
56+
try {
57+
styleLightWind.textContent += `${res.selectors[classSubParams[i]].selector}`
58+
} catch {}
26259
}
26360
}
26461
else {
265-
// with value to resolve
62+
// selector
26663
try {
267-
if (classParams[classParams.length - 1].split('>')[0] == lightWindCssConfig.proprieties.global[k].propriety || lightWindCssConfig.proprieties.global[k].alias.indexOf(classParams[classParams.length - 1].split('>')[0]) != -1) {
268-
let value = classParams[classParams.length - 1].split('>')[1]
269-
if (value.indexOf('calc(') != -1) {
270-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
271-
}
272-
273-
for (let l in lightWindCssConfig.proprieties.global[k].values) {
274-
if (lightWindCssConfig.proprieties.global[k].values[l].name == value)
275-
value = lightWindCssConfig.proprieties.global[k].values[l].value
276-
}
277-
278-
if (value.startsWith('--')) {
279-
value = `var(${value})`
280-
}
281-
282-
styleStr += `${lightWindCssConfig.proprieties.global[k].propriety}: ${value}`
283-
isFound = true;
284-
}
64+
styleLightWind.textContent += `${res.selectors[classSubParams[i]].selector}`
28565
} catch {}
28666
}
28767
}
68+
}
28869

289-
if (!isFound) {
290-
let value = classParams[classParams.length - 1].split('>')[1]
291-
if (value.indexOf('calc(') != -1) {
292-
value = value.replace(/\-/g, ' - ').replace(/\+/g, ' + ').replace(/\//g, ' / ').replace(/\*/g, ' * ')
293-
}
294-
295-
if (value.startsWith('--')) {
296-
value = `var(${value})`
297-
}
298-
299-
styleStr += `${classParams[classParams.length - 1].split('>')[0]}: ${value}`;
300-
}
70+
// mutations
71+
(async () => {
72+
var styleHttpReq = new XMLHttpRequest();
73+
styleHttpReq.open("GET", document.querySelector('[lightwindsrc]').getAttribute('lightwindsrc'), false);
74+
styleHttpReq.send(null);
75+
let res = JSON.parse(styleHttpReq.responseText)
30176

302-
styleStr += ";}"
303-
if (breakPointOpen)
304-
styleStr += '}'
77+
new MutationObserver(function(mutations) {
78+
mutations.forEach(mutation => {
79+
try {
80+
mutation.addedNodes.forEach(node => {
81+
if (typeof(node.classList) != 'undefined') {
82+
node.classList.forEach(elClass => {
83+
if (allClasses.indexOf(elClass) == -1) {
84+
resolveClass(elClass, res)
85+
allClasses.push(elClass)
86+
}
87+
})
88+
}
89+
})
90+
} catch {}
91+
})
92+
}).observe(document, { subtree: true, childList: true });
30593

306-
styleLightWind.innerText += styleStr
307-
}
94+
new MutationObserver(function(mutations) {
95+
try {
96+
mutations.forEach(mutation => {
97+
mutation.target.classList.forEach(elClass => {
98+
if (allClasses.indexOf(elClass) == -1) {
99+
resolveClass(elClass, res)
100+
allClasses.push(elClass)
101+
}
102+
})
103+
})
104+
} catch {}
105+
}).observe(document, { attributes: true, attributeFilter: ["class"], subtree: true });
106+
})()
308107
}

0 commit comments

Comments
 (0)