@@ -43,6 +43,7 @@ export interface ElementMatcher {
43
43
*/
44
44
@Injectable ( { providedIn : 'root' } )
45
45
export class MediaMarshaller {
46
+ private _useFallbacks = true ;
46
47
private activatedBreakpoints : BreakPoint [ ] = [ ] ;
47
48
private elementMap : ElementMap = new Map ( ) ;
48
49
private elementKeyMap : ElementKeyMap = new WeakMap ( ) ;
@@ -53,7 +54,11 @@ export class MediaMarshaller {
53
54
private subject : Subject < ElementMatcher > = new Subject ( ) ;
54
55
55
56
get activatedAlias ( ) : string {
56
- return this . activatedBreakpoints [ 0 ] ? this . activatedBreakpoints [ 0 ] . alias : '' ;
57
+ return this . activatedBreakpoints [ 0 ] ?. alias ?? '' ;
58
+ }
59
+
60
+ set useFallbacks ( value : boolean ) {
61
+ this . _useFallbacks = value ;
57
62
}
58
63
59
64
constructor ( protected matchMedia : MatchMedia ,
@@ -68,18 +73,20 @@ export class MediaMarshaller {
68
73
*/
69
74
onMediaChange ( mc : MediaChange ) {
70
75
const bp : BreakPoint | null = this . findByQuery ( mc . mediaQuery ) ;
76
+
71
77
if ( bp ) {
72
78
mc = mergeAlias ( mc , bp ) ;
73
79
74
- if ( mc . matches && this . activatedBreakpoints . indexOf ( bp ) === - 1 ) {
80
+ const bpIndex = this . activatedBreakpoints . indexOf ( bp ) ;
81
+
82
+ if ( mc . matches && bpIndex === - 1 ) {
75
83
this . activatedBreakpoints . push ( bp ) ;
76
84
this . activatedBreakpoints . sort ( sortDescendingPriority ) ;
77
85
78
86
this . updateStyles ( ) ;
79
-
80
- } else if ( ! mc . matches && this . activatedBreakpoints . indexOf ( bp ) !== - 1 ) {
87
+ } else if ( ! mc . matches && bpIndex !== - 1 ) {
81
88
// Remove the breakpoint when it's deactivated
82
- this . activatedBreakpoints . splice ( this . activatedBreakpoints . indexOf ( bp ) , 1 ) ;
89
+ this . activatedBreakpoints . splice ( bpIndex , 1 ) ;
83
90
this . activatedBreakpoints . sort ( sortDescendingPriority ) ;
84
91
85
92
this . updateStyles ( ) ;
@@ -193,7 +200,6 @@ export class MediaMarshaller {
193
200
this . clearElement ( el , k ) ;
194
201
}
195
202
} ) ;
196
-
197
203
} ) ;
198
204
}
199
205
@@ -204,6 +210,7 @@ export class MediaMarshaller {
204
210
*/
205
211
clearElement ( element : HTMLElement , key : string ) : void {
206
212
const builders = this . clearMap . get ( element ) ;
213
+
207
214
if ( builders ) {
208
215
const clearFn : ClearCallback = builders . get ( key ) as ClearCallback ;
209
216
if ( ! ! clearFn ) {
@@ -316,12 +323,20 @@ export class MediaMarshaller {
316
323
for ( let i = 0 ; i < this . activatedBreakpoints . length ; i ++ ) {
317
324
const activatedBp = this . activatedBreakpoints [ i ] ;
318
325
const valueMap = bpMap . get ( activatedBp . alias ) ;
326
+
319
327
if ( valueMap ) {
320
328
if ( key === undefined || ( valueMap . has ( key ) && valueMap . get ( key ) != null ) ) {
321
329
return valueMap ;
322
330
}
323
331
}
324
332
}
333
+
334
+ // On the server, we explicitly have an "all" section filled in to begin with.
335
+ // So we don't need to aggressively find a fallback if no explicit value exists.
336
+ if ( ! this . _useFallbacks ) {
337
+ return undefined ;
338
+ }
339
+
325
340
const lastHope = bpMap . get ( '' ) ;
326
341
return ( key === undefined || lastHope && lastHope . has ( key ) ) ? lastHope : undefined ;
327
342
}
@@ -347,14 +362,11 @@ export class MediaMarshaller {
347
362
function initBuilderMap ( map : BuilderMap ,
348
363
element : HTMLElement ,
349
364
key : string ,
350
- input ?: UpdateCallback | ClearCallback ) : void {
365
+ input ?: Builder ) : void {
351
366
if ( input !== undefined ) {
352
- let oldMap = map . get ( element ) ;
353
- if ( ! oldMap ) {
354
- oldMap = new Map ( ) ;
355
- map . set ( element , oldMap ) ;
356
- }
367
+ const oldMap = map . get ( element ) ?? new Map ( ) ;
357
368
oldMap . set ( key , input ) ;
369
+ map . set ( element , oldMap ) ;
358
370
}
359
371
}
360
372
0 commit comments