Skip to content

Commit

Permalink
feat(breakpoints): support custom breakpoints and enhanced selectors
Browse files Browse the repository at this point in the history 
* Add **FlexLayoutModule.provideBreakPoints()** to easily
  * add custom breakpoints to defaults
  * replace defaults with custom breakpoints
* Add extended breakpoints from Material2:
  * selectors include **handset**, **tablet**, **web**
  * include orientations for *Portrait* and *Landscape*
* Add selectors for **`lt-sm`**, **`lt-md`**, **`lt-lg`**, **`lt-xl`**
  * update mock-match-media fallback rules
* Update **ObservableMedia** and **MediaMonitor** to use orientation breakpoints
  * also support custom breakpoints (if registered)
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Mar 10, 2017
1 parent 2340a19 commit 1e29dfb
Show file tree
Hide file tree
Showing 46 changed files with 1,314 additions and 737 deletions.
29 changes: 25 additions & 4 deletions src/lib/flexbox/_module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
import {MediaMonitor} from '../media-query/media-monitor';
import {MediaQueriesModule} from '../media-query/_module';

import {BreakPoint} from '../media-query/breakpoints/break-point';
import {
provideCustomBreakPoints,
BreakPointsProvider
} from '../media-query/breakpoints/break-points-provider';

import {FlexDirective} from './api/flex';
import {LayoutDirective} from './api/layout';
import {ShowHideDirective} from './api/show-hide';
Expand Down Expand Up @@ -48,20 +54,35 @@ const ALL_DIRECTIVES = [
StyleDirective,
];

/**
* @deprecated, use FlexLayoutModule.provideLayout instead!
*/
export function provideBreakPoints(_custom: BreakPoint[], excludeDefaults = false): any[] {
return [
MediaMonitor,
provideCustomBreakPoints(_custom, excludeDefaults)
];
}

/**
*
*/
@NgModule({
declarations: ALL_DIRECTIVES,
imports: [MediaQueriesModule],
exports: [MediaQueriesModule, ...ALL_DIRECTIVES],
providers: [MediaMonitor]
providers: [
MediaMonitor,
BreakPointsProvider // Extend defaults with internal custom breakpoints
]
})
export class FlexLayoutModule {
/** @deprecated */
static forRoot(): ModuleWithProviders {
/** External uses can easily add custom breakpoints */
static provideBreakPoints(breakpoints: BreakPoint[],
excludeDefaults = false): ModuleWithProviders {
return {
ngModule: FlexLayoutModule
ngModule: FlexLayoutModule,
providers: provideBreakPoints(breakpoints, excludeDefaults)
};
}
}
2 changes: 1 addition & 1 deletion src/lib/flexbox/api/class.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
import {MatchMedia} from '../../media-query/match-media';
import {ObservableMedia} from '../../media-query/observable-media-service';
import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
import {BreakPointsProvider} from '../../media-query/breakpoints/break-points-provider';
import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';

import {customMatchers} from '../../utils/testing/custom-matchers';
Expand Down
43 changes: 27 additions & 16 deletions src/lib/flexbox/api/class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,40 +32,51 @@ export type NgClassType = string | string[] | Set<string> | {[klass: string]: an
*/
@Directive({
selector: `
[ngClass.xs], [class.xs],
[ngClass.gt-xs], [class.gt-xs],
[ngClass.sm], [class.sm],
[ngClass.gt-sm], [class.gt-sm],
[ngClass.md], [class.md],
[ngClass.gt-md], [class.gt-md],
[ngClass.lg], [class.lg],
[ngClass.gt-lg], [class.gt-lg]
[class.xs], [class.sm], [class.md], [class.lg], [class.xl],
[class.lt-sm], [class.lt-md], [class.lt-lg], [class.lt-xl],
[class.gt-xs], [class.gt-sm], [class.gt-md], [class.gt-lg],
[ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],
[ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],
[ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]
`
})
export class ClassDirective extends NgClass implements OnInit, OnChanges, OnDestroy {

/* tslint:disable */
@Input('ngClass.xs') set ngClassXs(val: NgClassType) { this._base.cacheInput('classXs', val, true); }
@Input('ngClass.gt-xs') set ngClassGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('ngClass.sm') set ngClassSm(val: NgClassType) { this._base.cacheInput('classSm', val, true); };
@Input('ngClass.gt-sm') set ngClassGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true);} ;
@Input('ngClass.md') set ngClassMd(val: NgClassType) { this._base.cacheInput('classMd', val, true); };
@Input('ngClass.gt-md') set ngClassGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('ngClass.lg') set ngClassLg(val: NgClassType) { this._base.cacheInput('classLg', val, true);};
@Input('ngClass.gt-lg') set ngClassGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
@Input('ngClass.xl') set ngClassXl(val: NgClassType) { this._base.cacheInput('classXl', val, true); };

@Input('ngClass.lt-xs') set ngClassLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
@Input('ngClass.lt-sm') set ngClassLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true);} ;
@Input('ngClass.lt-md') set ngClassLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
@Input('ngClass.lt-lg') set ngClassLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };

@Input('ngClass.gt-xs') set ngClassGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('ngClass.gt-sm') set ngClassGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true);} ;
@Input('ngClass.gt-md') set ngClassGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('ngClass.gt-lg') set ngClassGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };

/** Deprecated selectors */
@Input('class.xs') set classXs(val: NgClassType) { this._base.cacheInput('classXs', val, true); }
@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('class.sm') set classSm(val: NgClassType) { this._base.cacheInput('classSm', val, true); };
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
@Input('class.md') set classMd(val: NgClassType) { this._base.cacheInput('classMd', val, true);};
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('class.lg') set classLg(val: NgClassType) { this._base.cacheInput('classLg', val, true); };
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
@Input('class.xl') set classXl(val: NgClassType) { this._base.cacheInput('classXl', val, true); };

@Input('class.lt-xs') set classLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
@Input('class.lt-sm') set classLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true); };
@Input('class.lt-md') set classLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
@Input('class.lt-lg') set classLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };

@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };

/* tslint:enable */
constructor(protected monitor: MediaMonitor,
protected _bpRegistry: BreakPointRegistry,
Expand Down
71 changes: 22 additions & 49 deletions src/lib/flexbox/api/flex-align.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,59 +28,32 @@ import {MediaMonitor} from '../../media-query/media-monitor';
@Directive({
selector: `
[fxFlexAlign],
[fxFlexAlign.xs],
[fxFlexAlign.gt-xs],
[fxFlexAlign.sm],
[fxFlexAlign.gt-sm],
[fxFlexAlign.md],
[fxFlexAlign.gt-md],
[fxFlexAlign.lg],
[fxFlexAlign.gt-lg],
[fxFlexAlign.xl]
[fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl],
[fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl],
[fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]
`
})
export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

@Input('fxFlexAlign') set align(val) {
this._cacheInput('align', val);
}

@Input('fxFlexAlign.xs') set alignXs(val) {
this._cacheInput('alignXs', val);
}

@Input('fxFlexAlign.gt-xs') set alignGtXs(val) {
this._cacheInput('alignGtXs', val);
};

@Input('fxFlexAlign.sm') set alignSm(val) {
this._cacheInput('alignSm', val);
};

@Input('fxFlexAlign.gt-sm') set alignGtSm(val) {
this._cacheInput('alignGtSm', val);
};

@Input('fxFlexAlign.md') set alignMd(val) {
this._cacheInput('alignMd', val);
};

@Input('fxFlexAlign.gt-md') set alignGtMd(val) {
this._cacheInput('alignGtMd', val);
};

@Input('fxFlexAlign.lg') set alignLg(val) {
this._cacheInput('alignLg', val);
};

@Input('fxFlexAlign.gt-lg') set alignGtLg(val) {
this._cacheInput('alignGtLg', val);
};

@Input('fxFlexAlign.xl') set alignXl(val) {
this._cacheInput('alignXl', val);
};

/* tslint:disable */
@Input('fxFlexAlign') set align(val) { this._cacheInput('align', val); };
@Input('fxFlexAlign.xs') set alignXs(val) { this._cacheInput('alignXs', val); };
@Input('fxFlexAlign.sm') set alignSm(val) { this._cacheInput('alignSm', val); };
@Input('fxFlexAlign.md') set alignMd(val) { this._cacheInput('alignMd', val); };
@Input('fxFlexAlign.lg') set alignLg(val) { this._cacheInput('alignLg', val); };
@Input('fxFlexAlign.xl') set alignXl(val) { this._cacheInput('alignXl', val); };

@Input('fxFlexAlign.lt-sm') set alignLtSm(val) { this._cacheInput('alignLtSm', val); };
@Input('fxFlexAlign.lt-md') set alignLtMd(val) { this._cacheInput('alignLtMd', val); };
@Input('fxFlexAlign.lt-lg') set alignLtLg(val) { this._cacheInput('alignLtLg', val); };
@Input('fxFlexAlign.lt-xl') set alignLtXl(val) { this._cacheInput('alignLtXl', val); };

@Input('fxFlexAlign.gt-xs') set alignGtXs(val) { this._cacheInput('alignGtXs', val); };
@Input('fxFlexAlign.gt-sm') set alignGtSm(val) { this._cacheInput('alignGtSm', val); };
@Input('fxFlexAlign.gt-md') set alignGtMd(val) { this._cacheInput('alignGtMd', val); };
@Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
28 changes: 15 additions & 13 deletions src/lib/flexbox/api/flex-offset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
*/
@Directive({selector: `
[fxFlexOffset],
[fxFlexOffset.xs],
[fxFlexOffset.gt-xs],
[fxFlexOffset.sm],
[fxFlexOffset.gt-sm],
[fxFlexOffset.md],
[fxFlexOffset.gt-md],
[fxFlexOffset.lg],
[fxFlexOffset.gt-lg],
[fxFlexOffset.xl]
[fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl],
[fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl],
[fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]
`})
export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

/* tslint:disable */
@Input('fxFlexOffset') set offset(val) { this._cacheInput('offset', val); }
@Input('fxFlexOffset.xs') set offsetXs(val) { this._cacheInput('offsetXs', val); }
@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
@Input('fxFlexOffset.sm') set offsetSm(val) { this._cacheInput('offsetSm', val); };
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
@Input('fxFlexOffset.md') set offsetMd(val) { this._cacheInput('offsetMd', val); };
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
@Input('fxFlexOffset.lg') set offsetLg(val) { this._cacheInput('offsetLg', val); };
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };
@Input('fxFlexOffset.xl') set offsetXl(val) { this._cacheInput('offsetXl', val); };

@Input('fxFlexOffset.lt-sm') set offsetLtSm(val) { this._cacheInput('offsetLtSm', val); };
@Input('fxFlexOffset.lt-md') set offsetLtMd(val) { this._cacheInput('offsetLtMd', val); };
@Input('fxFlexOffset.lt-lg') set offsetLtLg(val) { this._cacheInput('offsetLtLg', val); };
@Input('fxFlexOffset.lt-xl') set offsetLtXl(val) { this._cacheInput('offsetLtXl', val); };

@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
28 changes: 15 additions & 13 deletions src/lib/flexbox/api/flex-order.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
*/
@Directive({selector: `
[fxFlexOrder],
[fxFlexOrder.xs],
[fxFlexOrder.gt-xs],
[fxFlexOrder.sm],
[fxFlexOrder.gt-sm],
[fxFlexOrder.md],
[fxFlexOrder.gt-md],
[fxFlexOrder.lg],
[fxFlexOrder.gt-lg],
[fxFlexOrder.xl]
[fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md], [fxFlexOrder.lg], [fxFlexOrder.xl],
[fxFlexOrder.lt-sm], [fxFlexOrder.lt-md], [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl],
[fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm], [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]
`})
export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

/* tslint:disable */
@Input('fxFlexOrder') set order(val) { this._cacheInput('order', val); }
@Input('fxFlexOrder.xs') set orderXs(val) { this._cacheInput('orderXs', val); }
@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
@Input('fxFlexOrder.sm') set orderSm(val) { this._cacheInput('orderSm', val); };
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
@Input('fxFlexOrder.md') set orderMd(val) { this._cacheInput('orderMd', val); };
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
@Input('fxFlexOrder.lg') set orderLg(val) { this._cacheInput('orderLg', val); };
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };
@Input('fxFlexOrder.xl') set orderXl(val) { this._cacheInput('orderXl', val); };

@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };

@Input('fxFlexOrder.lt-sm') set orderLtSm(val) { this._cacheInput('orderLtSm', val); };
@Input('fxFlexOrder.lt-md') set orderLtMd(val) { this._cacheInput('orderLtMd', val); };
@Input('fxFlexOrder.lt-lg') set orderLtLg(val) { this._cacheInput('orderLtLg', val); };
@Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
Loading

0 comments on commit 1e29dfb

Please sign in to comment.