1
1
const privateData = new WeakMap ( )
2
2
3
- const observer = new IntersectionObserver ( entries => {
4
- for ( const entry of entries ) {
5
- if ( entry . isIntersecting ) {
6
- const { target} = entry
7
- observer . unobserve ( target )
8
- if ( ! ( target instanceof IncludeFragmentElement ) ) return
9
- if ( target . loading === 'lazy' ) {
10
- handleData ( target )
3
+ const observer = new IntersectionObserver (
4
+ entries => {
5
+ for ( const entry of entries ) {
6
+ if ( entry . isIntersecting ) {
7
+ const { target} = entry
8
+ observer . unobserve ( target )
9
+ if ( ! ( target instanceof IncludeFragmentElement ) ) return
10
+ if ( target . loading === 'lazy' ) {
11
+ handleData ( target )
12
+ }
11
13
}
12
14
}
15
+ } ,
16
+ {
17
+ // Currently the threshold is set to 256px from the bottom of the viewport
18
+ // with a threshold of 0.1. This means the element will not load until about
19
+ // 2 keyboard-down-arrow presses away from being visible in the viewport,
20
+ // giving us some time to fetch it before the contents are made visible
21
+ rootMargin : '0px 0px 256px 0px' ,
22
+ threshold : 0.01
13
23
}
14
- } , {
15
- // Currently the threshold is set to 256px from the bottom of the viewport
16
- // with a threshold of 0.1. This means the element will not load until about
17
- // 2 keyboard-down-arrow presses away from being visible in the viewport,
18
- // giving us some time to fetch it before the contents are made visible
19
- rootMargin : '0px 0px 256px 0px' ,
20
- threshold : 0.01
21
- } )
22
-
24
+ )
23
25
24
26
// Functional stand in for the W3 spec "queue a task" paradigm
25
27
function task ( ) : Promise < void > {
@@ -35,7 +37,9 @@ async function handleData(el: IncludeFragmentElement) {
35
37
// eslint-disable-next-line github/no-inner-html
36
38
template . innerHTML = html
37
39
const fragment = document . importNode ( template . content , true )
38
- const canceled = ! el . dispatchEvent ( new CustomEvent ( 'include-fragment-replace' , { cancelable : true , detail : { fragment} } ) )
40
+ const canceled = ! el . dispatchEvent (
41
+ new CustomEvent ( 'include-fragment-replace' , { cancelable : true , detail : { fragment} } )
42
+ )
39
43
if ( canceled ) return
40
44
el . replaceWith ( fragment )
41
45
el . dispatchEvent ( new CustomEvent ( 'include-fragment-replaced' ) )
@@ -81,33 +85,35 @@ function fetchDataWithEvents(el: IncludeFragmentElement) {
81
85
}
82
86
return response . text ( )
83
87
} )
84
- . then ( data => {
85
- // Dispatch `load` and `loadend` async to allow
86
- // the `load()` promise to resolve _before_ these
87
- // events are fired.
88
- task ( ) . then ( ( ) => {
89
- el . dispatchEvent ( new Event ( 'load' ) )
90
- el . dispatchEvent ( new Event ( 'loadend' ) )
91
- } )
92
- return data
93
- } , error => {
94
- // Dispatch `error` and `loadend` async to allow
95
- // the `load()` promise to resolve _before_ these
96
- // events are fired.
97
- task ( ) . then ( ( ) => {
98
- el . dispatchEvent ( new Event ( 'error' ) )
99
- el . dispatchEvent ( new Event ( 'loadend' ) )
100
- } )
101
- throw error
102
- } )
88
+ . then (
89
+ data => {
90
+ // Dispatch `load` and `loadend` async to allow
91
+ // the `load()` promise to resolve _before_ these
92
+ // events are fired.
93
+ task ( ) . then ( ( ) => {
94
+ el . dispatchEvent ( new Event ( 'load' ) )
95
+ el . dispatchEvent ( new Event ( 'loadend' ) )
96
+ } )
97
+ return data
98
+ } ,
99
+ error => {
100
+ // Dispatch `error` and `loadend` async to allow
101
+ // the `load()` promise to resolve _before_ these
102
+ // events are fired.
103
+ task ( ) . then ( ( ) => {
104
+ el . dispatchEvent ( new Event ( 'error' ) )
105
+ el . dispatchEvent ( new Event ( 'loadend' ) )
106
+ } )
107
+ throw error
108
+ }
109
+ )
103
110
}
104
111
105
112
function isWildcard ( accept : string | null ) {
106
113
return accept && ! ! accept . split ( ',' ) . find ( x => x . match ( / ^ \s * \* \/ \* / ) )
107
114
}
108
115
109
116
export default class IncludeFragmentElement extends HTMLElement {
110
-
111
117
static get observedAttributes ( ) : string [ ] {
112
118
return [ 'src' , 'loading' ]
113
119
}
@@ -127,12 +133,12 @@ export default class IncludeFragmentElement extends HTMLElement {
127
133
this . setAttribute ( 'src' , val )
128
134
}
129
135
130
- get loading ( ) : 'eager' | 'lazy' {
136
+ get loading ( ) : 'eager' | 'lazy' {
131
137
if ( this . getAttribute ( 'loading' ) === 'lazy' ) return 'lazy'
132
138
return 'eager'
133
139
}
134
140
135
- set loading ( value : 'eager' | 'lazy' ) {
141
+ set loading ( value : 'eager' | 'lazy' ) {
136
142
this . setAttribute ( 'loading' , value )
137
143
}
138
144
@@ -148,7 +154,7 @@ export default class IncludeFragmentElement extends HTMLElement {
148
154
return getData ( this )
149
155
}
150
156
151
- attributeChangedCallback ( attribute : string , oldVal :string | null ) : void {
157
+ attributeChangedCallback ( attribute : string , oldVal : string | null ) : void {
152
158
if ( attribute === 'src' ) {
153
159
// Source changed after attached so replace element.
154
160
if ( this . isConnected && this . loading === 'eager' ) {
0 commit comments