11const privateData = new WeakMap ( )
22
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+ }
1113 }
1214 }
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
1323 }
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+ )
2325
2426// Functional stand in for the W3 spec "queue a task" paradigm
2527function task ( ) : Promise < void > {
@@ -35,7 +37,9 @@ async function handleData(el: IncludeFragmentElement) {
3537 // eslint-disable-next-line github/no-inner-html
3638 template . innerHTML = html
3739 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+ )
3943 if ( canceled ) return
4044 el . replaceWith ( fragment )
4145 el . dispatchEvent ( new CustomEvent ( 'include-fragment-replaced' ) )
@@ -81,33 +85,35 @@ function fetchDataWithEvents(el: IncludeFragmentElement) {
8185 }
8286 return response . text ( )
8387 } )
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+ )
103110}
104111
105112function isWildcard ( accept : string | null ) {
106113 return accept && ! ! accept . split ( ',' ) . find ( x => x . match ( / ^ \s * \* \/ \* / ) )
107114}
108115
109116export default class IncludeFragmentElement extends HTMLElement {
110-
111117 static get observedAttributes ( ) : string [ ] {
112118 return [ 'src' , 'loading' ]
113119 }
@@ -127,12 +133,12 @@ export default class IncludeFragmentElement extends HTMLElement {
127133 this . setAttribute ( 'src' , val )
128134 }
129135
130- get loading ( ) : 'eager' | 'lazy' {
136+ get loading ( ) : 'eager' | 'lazy' {
131137 if ( this . getAttribute ( 'loading' ) === 'lazy' ) return 'lazy'
132138 return 'eager'
133139 }
134140
135- set loading ( value : 'eager' | 'lazy' ) {
141+ set loading ( value : 'eager' | 'lazy' ) {
136142 this . setAttribute ( 'loading' , value )
137143 }
138144
@@ -148,7 +154,7 @@ export default class IncludeFragmentElement extends HTMLElement {
148154 return getData ( this )
149155 }
150156
151- attributeChangedCallback ( attribute : string , oldVal :string | null ) : void {
157+ attributeChangedCallback ( attribute : string , oldVal : string | null ) : void {
152158 if ( attribute === 'src' ) {
153159 // Source changed after attached so replace element.
154160 if ( this . isConnected && this . loading === 'eager' ) {
0 commit comments