Skip to content

Commit a1668d5

Browse files
tomhodginstomhodgins
committed
Refactor to be cleaner/faster
1 parent 550a48b commit a1668d5

File tree

4 files changed

+60
-123
lines changed

4 files changed

+60
-123
lines changed

‎index.browser.js

+20-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
function element(selector, conditions, stylesheet) {
2-
2+
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
33
const features = {
44
minWidth: (el, number) => number <= el.offsetWidth,
55
maxWidth: (el, number) => number >= el.offsetWidth,
@@ -17,41 +17,32 @@ function element(selector, conditions, stylesheet) {
1717
maxScrollY: (el, number) => number >= el.scrollTop,
1818
minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
1919
maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
20-
orientation: (el, string) => {
21-
switch (string) {
22-
case 'portrait': return el.offsetWidth < el.offsetHeight
23-
case 'square': return el.offsetWidth === el.offsetHeight
24-
case 'landscape': return el.offsetWidth > el.offsetHeight
25-
}
26-
}
20+
orientation: (el, string) => ({
21+
portrait: el => el.offsetWidth < el.offsetHeight,
22+
square: el => el.offsetWidth === el.offsetHeight,
23+
landscape: el => el.offsetHeight < el.offsetWidth
24+
})
2725
}
28-
29-
return Array.from(document.querySelectorAll(selector))
30-
31-
.reduce((styles, tag, count) => {
32-
33-
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
34-
26+
const result = Array.from(document.querySelectorAll(selector))
27+
.reduce((output, tag, count) => {
3528
if (
3629
Object.entries(conditions).every(test =>
3730
features[test[0]](tag, test[1])
3831
)
3932
) {
40-
41-
tag.setAttribute(`data-element-${attr}`, count)
42-
styles += stylesheet.replace(
43-
/:self|\$this|\[--self\]/g,
44-
`[data-element-${attr}="${count}"]`
33+
output.add.push({tag: tag, count: count})
34+
output.styles.push(
35+
stylesheet.replace(
36+
/:self|\$this|\[--self\]/g,
37+
`[data-element-${attr}="${count}"]`
38+
)
4539
)
46-
4740
} else {
48-
49-
tag.setAttribute(`data-element-${attr}`, '')
50-
41+
output.remove.push(tag)
5142
}
52-
53-
return styles
54-
55-
}, '')
56-
43+
return output
44+
}, {add: [], remove: [], styles: []})
45+
result.add.forEach(tag => tag.tag.setAttribute(`data-element-${attr}`, tag.count))
46+
result.remove.forEach(tag => tag.setAttribute(`data-element-${attr}`, ''))
47+
return result.styles.join('\n')
5748
}

‎index.js

+20-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = (selector, conditions, stylesheet) => {
2-
2+
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
33
const features = {
44
minWidth: (el, number) => number <= el.offsetWidth,
55
maxWidth: (el, number) => number >= el.offsetWidth,
@@ -17,41 +17,32 @@ module.exports = (selector, conditions, stylesheet) => {
1717
maxScrollY: (el, number) => number >= el.scrollTop,
1818
minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
1919
maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
20-
orientation: (el, string) => {
21-
switch (string) {
22-
case 'portrait': return el.offsetWidth < el.offsetHeight
23-
case 'square': return el.offsetWidth === el.offsetHeight
24-
case 'landscape': return el.offsetWidth > el.offsetHeight
25-
}
26-
}
20+
orientation: (el, string) => ({
21+
portrait: el => el.offsetWidth < el.offsetHeight,
22+
square: el => el.offsetWidth === el.offsetHeight,
23+
landscape: el => el.offsetHeight < el.offsetWidth
24+
})
2725
}
28-
29-
return Array.from(document.querySelectorAll(selector))
30-
31-
.reduce((styles, tag, count) => {
32-
33-
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
34-
26+
const result = Array.from(document.querySelectorAll(selector))
27+
.reduce((output, tag, count) => {
3528
if (
3629
Object.entries(conditions).every(test =>
3730
features[test[0]](tag, test[1])
3831
)
3932
) {
40-
41-
tag.setAttribute(`data-element-${attr}`, count)
42-
styles += stylesheet.replace(
43-
/:self|\$this|\[--self\]/g,
44-
`[data-element-${attr}="${count}"]`
33+
output.add.push({tag: tag, count: count})
34+
output.styles.push(
35+
stylesheet.replace(
36+
/:self|\$this|\[--self\]/g,
37+
`[data-element-${attr}="${count}"]`
38+
)
4539
)
46-
4740
} else {
48-
49-
tag.setAttribute(`data-element-${attr}`, '')
50-
41+
output.remove.push(tag)
5142
}
52-
53-
return styles
54-
55-
}, '')
56-
43+
return output
44+
}, {add: [], remove: [], styles: []})
45+
result.add.forEach(tag => tag.tag.setAttribute(`data-element-${attr}`, tag.count))
46+
result.remove.forEach(tag => tag.setAttribute(`data-element-${attr}`, ''))
47+
return result.styles.join('\n')
5748
}

‎index.vanilla.js

+20-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default (selector, conditions, stylesheet) => {
2-
2+
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
33
const features = {
44
minWidth: (el, number) => number <= el.offsetWidth,
55
maxWidth: (el, number) => number >= el.offsetWidth,
@@ -17,41 +17,32 @@ export default (selector, conditions, stylesheet) => {
1717
maxScrollY: (el, number) => number >= el.scrollTop,
1818
minAspectRatio: (el, number) => number <= el.offsetWidth / el.offsetHeight,
1919
maxAspectRatio: (el, number) => number >= el.offsetWidth / el.offsetHeight,
20-
orientation: (el, string) => {
21-
switch (string) {
22-
case 'portrait': return el.offsetWidth < el.offsetHeight
23-
case 'square': return el.offsetWidth === el.offsetHeight
24-
case 'landscape': return el.offsetWidth > el.offsetHeight
25-
}
26-
}
20+
orientation: (el, string) => ({
21+
portrait: el => el.offsetWidth < el.offsetHeight,
22+
square: el => el.offsetWidth === el.offsetHeight,
23+
landscape: el => el.offsetHeight < el.offsetWidth
24+
})
2725
}
28-
29-
return Array.from(document.querySelectorAll(selector))
30-
31-
.reduce((styles, tag, count) => {
32-
33-
const attr = (selector + Object.keys(conditions) + Object.values(conditions)).replace(/\W/g, '')
34-
26+
const result = Array.from(document.querySelectorAll(selector))
27+
.reduce((output, tag, count) => {
3528
if (
3629
Object.entries(conditions).every(test =>
3730
features[test[0]](tag, test[1])
3831
)
3932
) {
40-
41-
tag.setAttribute(`data-element-${attr}`, count)
42-
styles += stylesheet.replace(
43-
/:self|\$this|\[--self\]/g,
44-
`[data-element-${attr}="${count}"]`
33+
output.add.push({tag: tag, count: count})
34+
output.styles.push(
35+
stylesheet.replace(
36+
/:self|\$this|\[--self\]/g,
37+
`[data-element-${attr}="${count}"]`
38+
)
4539
)
46-
4740
} else {
48-
49-
tag.setAttribute(`data-element-${attr}`, '')
50-
41+
output.remove.push(tag)
5142
}
52-
53-
return styles
54-
55-
}, '')
56-
43+
return output
44+
}, {add: [], remove: [], styles: []})
45+
result.add.forEach(tag => tag.tag.setAttribute(`data-element-${attr}`, tag.count))
46+
result.remove.forEach(tag => tag.setAttribute(`data-element-${attr}`, ''))
47+
return result.styles.join('\n')
5748
}

‎source/element.sexp

-36
This file was deleted.

0 commit comments

Comments
 (0)