29
29
* @returns {MutationObserver } Returns the observer used in case you want to disconnect it.
30
30
*/
31
31
function jscss ( selector , props ) { // eslint-disable-line no-unused-vars
32
- const body = document . getRootNode ( ) . body
32
+ const body = document . getRootNode ( ) . body ;
33
33
34
- let matchCache = body . querySelectorAll ( selector )
34
+ let matchCache = body . querySelectorAll ( selector ) ;
35
35
matchCache . forEach ( ( elem ) => {
36
- applyStyle ( elem , props )
37
- } )
36
+ applyStyle ( elem , props ) ;
37
+ } ) ;
38
38
39
39
const observer = new MutationObserver ( ( ) => {
40
- const matches = body . querySelectorAll ( selector )
40
+ const matches = body . querySelectorAll ( selector ) ;
41
41
42
42
// Exit early if there are no new items. Also works for the empty case.
43
43
if ( matchCache . length === matches . length ) {
44
- let different = false
44
+ let different = false ;
45
45
for ( let k = 0 ; k < matches . length ; k ++ ) {
46
- different = matches [ k ] !== matchCache [ k ]
47
- if ( different ) { break }
46
+ different = matches [ k ] !== matchCache [ k ] ;
47
+ if ( different ) { break ; }
48
48
}
49
- if ( ! different ) { return }
49
+ if ( ! different ) { return ; }
50
50
}
51
51
52
52
// MutationObservers can trigger themselves recursively so we want to
53
53
// update matchCache now, before we possibly modify elements further.
54
- const oldMatches = matchCache
55
- matchCache = matches
54
+ const oldMatches = matchCache ;
55
+ matchCache = matches ;
56
56
57
- let i
58
- let j
59
- let seen
57
+ let i ;
58
+ let j ;
59
+ let seen ;
60
60
61
61
/**
62
62
* Apply styles to newly ADDED elements.
@@ -65,35 +65,35 @@ function jscss (selector, props) { // eslint-disable-line no-unused-vars
65
65
* possible cuz there's no duplicate items.
66
66
*/
67
67
for ( i = 0 ; i < matches . length ; i ++ ) {
68
- seen = false
68
+ seen = false ;
69
69
for ( j = 0 ; j < oldMatches . length ; j ++ ) {
70
- seen = matches [ i ] === oldMatches [ j ]
71
- if ( seen ) { break }
70
+ seen = matches [ i ] === oldMatches [ j ] ;
71
+ if ( seen ) { break ; }
72
72
}
73
- if ( seen ) { continue }
73
+ if ( seen ) { continue ; }
74
74
// From this point forward matches[i] is known to be newly ADDED.
75
- applyStyle ( matches [ i ] , props )
75
+ applyStyle ( matches [ i ] , props ) ;
76
76
77
77
// As an optimization, jscss can be requested to apply only once.
78
78
if ( props . firstResultOnly ) {
79
- observer . disconnect ( )
79
+ observer . disconnect ( ) ;
80
80
}
81
81
}
82
82
83
83
/**
84
84
* Apply styles to newly REMOVED elements.
85
85
*/
86
86
for ( j = 0 ; j < oldMatches . length ; j ++ ) {
87
- seen = false
87
+ seen = false ;
88
88
for ( i = 0 ; i < matches . length ; i ++ ) {
89
- seen = oldMatches [ j ] === matches [ i ]
90
- if ( seen ) { break }
89
+ seen = oldMatches [ j ] === matches [ i ] ;
90
+ if ( seen ) { break ; }
91
91
}
92
- if ( seen ) { continue }
92
+ if ( seen ) { continue ; }
93
93
// From this point forward oldMatches[i] is known to be newly REMOVED.
94
- removeStyle ( oldMatches [ j ] , props )
94
+ removeStyle ( oldMatches [ j ] , props ) ;
95
95
}
96
- } )
96
+ } ) ;
97
97
98
98
observer . observe ( body , {
99
99
subtree : true ,
@@ -102,15 +102,15 @@ function jscss (selector, props) { // eslint-disable-line no-unused-vars
102
102
// Technically any attribute can cause a change worth observing since css
103
103
// has attribute selectors. No need atm though, so let's be performant.
104
104
attributeFilter : [ 'id' , 'class' ]
105
- } )
105
+ } ) ;
106
106
107
- return observer
107
+ return observer ;
108
108
}
109
109
110
110
function applyStyle ( elem , props ) {
111
111
// Search/replace text support
112
112
if ( 'search' in props && 'replace' in props ) {
113
- addTextObserver ( elem , props )
113
+ addTextObserver ( elem , props ) ;
114
114
}
115
115
}
116
116
@@ -122,22 +122,22 @@ function removeStyle (elem, props) {
122
122
}
123
123
124
124
function addTextObserver ( elem , props ) {
125
- searchAndReplaceChildren ( elem , props )
125
+ searchAndReplaceChildren ( elem , props ) ;
126
126
127
- const observer = new MutationObserver ( ( ) => searchAndReplaceChildren ( elem , props ) )
127
+ const observer = new MutationObserver ( ( ) => searchAndReplaceChildren ( elem , props ) ) ;
128
128
observer . observe ( elem , {
129
129
childList : true ,
130
130
characterData : true
131
- } )
131
+ } ) ;
132
132
}
133
133
134
134
function searchAndReplaceChildren ( elem , props ) {
135
135
elem . childNodes . forEach ( ( child ) => {
136
- if ( child . nodeType !== Node . TEXT_NODE ) { return }
137
- const newStr = child . textContent . replace ( props . search , props . replace )
136
+ if ( child . nodeType !== Node . TEXT_NODE ) { return ; }
137
+ const newStr = child . textContent . replace ( props . search , props . replace ) ;
138
138
// Only assign if the value would actually change, since blindly
139
139
// assigning could cause another mutation to be observed.
140
- if ( child . textContent === newStr ) { return }
141
- child . textContent = newStr
142
- } )
140
+ if ( child . textContent === newStr ) { return ; }
141
+ child . textContent = newStr ;
142
+ } ) ;
143
143
}
0 commit comments