Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

Commit

Permalink
feat(elevation): Add MDC Elevation using [mdc-elevation]="#" directive.
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Removed depreciated mdc-elevation-z# directives. Please update your code
accordingly.
  • Loading branch information
@trimox
trimox committed Jul 3, 2017
1 parent 1965a3a commit 257cb04
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 215 deletions.
3 changes: 3 additions & 0 deletions src/lib/common/number-property.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function toNumber(value: any, fallbackValue = 0) {
return isNaN(parseFloat(value as any)) || isNaN(Number(value)) ? fallbackValue : Number(value);
}
194 changes: 29 additions & 165 deletions src/lib/elevation/elevation.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import {
Directive,
ElementRef,
HostBinding,
Input,
OnChanges,
Renderer2,
SimpleChange,
} from '@angular/core';
import { toNumber } from '../common/number-property';

const MDC_ELEVATION_STYLES = require('@material/elevation/mdc-elevation.scss');

Expand All @@ -12,177 +18,35 @@ export class ElevationTransition {
@HostBinding('class.mdc-elevation-transition') className: string = 'mdc-elevation-transition';
}

@Directive({
selector: '[mdc-elevation-z0]'
})
export class Elevation0Directive {
@HostBinding('class.mdc-elevation--z0') className: string = 'mdc-elevation--z0';
}

@Directive({
selector: '[mdc-elevation-z1]'
})
export class Elevation1Directive {
@HostBinding('class.mdc-elevation--z1') className: string = 'mdc-elevation--z1';
}

@Directive({
selector: '[mdc-elevation-z2]'
})
export class Elevation2Directive {
@HostBinding('class.mdc-elevation--z2') className: string = 'mdc-elevation--z2';
}

@Directive({
selector: '[mdc-elevation-z3]'
})
export class Elevation3Directive {
@HostBinding('class.mdc-elevation--z3') className: string = 'mdc-elevation--z3';
}

@Directive({
selector: '[mdc-elevation-z4]'
})
export class Elevation4Directive {
@HostBinding('class.mdc-elevation--z4') className: string = 'mdc-elevation--z4';
}

@Directive({
selector: '[mdc-elevation-z5]'
})
export class Elevation5Directive {
@HostBinding('class.mdc-elevation--z5') className: string = 'mdc-elevation--z5';
}

@Directive({
selector: '[mdc-elevation-z6]'
})
export class Elevation6Directive {
@HostBinding('class.mdc-elevation--z6') className: string = 'mdc-elevation--z6';
}

@Directive({
selector: '[mdc-elevation-z7]'
})
export class Elevation7Directive {
@HostBinding('class.mdc-elevation--z7') className: string = 'mdc-elevation--z7';
}

@Directive({
selector: '[mdc-elevation-z8]'
})
export class Elevation8Directive {
@HostBinding('class.mdc-elevation--z8') className: string = 'mdc-elevation--z8';
}

@Directive({
selector: '[mdc-elevation-z9]'
})
export class Elevation9Directive {
@HostBinding('class.mdc-elevation--z9') className: string = 'mdc-elevation--z9';
}

@Directive({
selector: '[mdc-elevation-z10]'
})
export class Elevation10Directive {
@HostBinding('class.mdc-elevation--z10') className: string = 'mdc-elevation--z10';
}

@Directive({
selector: '[mdc-elevation-z11]'
})
export class Elevation11Directive {
@HostBinding('class.mdc-elevation--z11') className: string = 'mdc-elevation--z11';
}
const MDC_ELEVATION_VALUES = Array.from(Array(25), (x, i) => i);

@Directive({
selector: '[mdc-elevation-z12]'
selector: '[mdc-elevation]'
})
export class Elevation12Directive {
@HostBinding('class.mdc-elevation--z12') className: string = 'mdc-elevation--z12';
}
export class ElevationDirective implements OnChanges {
private nativeEl: ElementRef;
private _mdcElevation: number = 0;

@Directive({
selector: '[mdc-elevation-z13]'
})
export class Elevation13Directive {
@HostBinding('class.mdc-elevation--z13') className: string = 'mdc-elevation--z13';
}
@Input('mdc-elevation')
get mdcElevation() { return this._mdcElevation; }
set mdcElevation(value: number) {
this._mdcElevation = toNumber(value);
}

@Directive({
selector: '[mdc-elevation-z14]'
})
export class Elevation14Directive {
@HostBinding('class.mdc-elevation--z14') className: string = 'mdc-elevation--z14';
}
constructor(private _renderer: Renderer2, private _root: ElementRef) {
this.nativeEl = this._root.nativeElement;
}

@Directive({
selector: '[mdc-elevation-z15]'
})
export class Elevation15Directive {
@HostBinding('class.mdc-elevation--z15') className: string = 'mdc-elevation--z15';
}
public ngOnChanges(changes: { [key: string]: SimpleChange }) {
let change = changes['mdcElevation'];

@Directive({
selector: '[mdc-elevation-z16]'
})
export class Elevation16Directive {
@HostBinding('class.mdc-elevation--z16') className: string = 'mdc-elevation--z16';
}

@Directive({
selector: '[mdc-elevation-z17]'
})
export class Elevation17Directive {
@HostBinding('class.mdc-elevation--z17') className: string = 'mdc-elevation--z17';
}

@Directive({
selector: '[mdc-elevation-z18]'
})
export class Elevation18Directive {
@HostBinding('class.mdc-elevation--z18') className: string = 'mdc-elevation--z18';
}
if (MDC_ELEVATION_VALUES.indexOf(Number(this.mdcElevation)) === -1) {
throw new Error(`Valid mdc-elevation values are 0 through 24`);
}

@Directive({
selector: '[mdc-elevation-z19]'
})
export class Elevation19Directive {
@HostBinding('class.mdc-elevation--z19') className: string = 'mdc-elevation--z19';
}

@Directive({
selector: '[mdc-elevation-z20]'
})
export class Elevation20Directive {
@HostBinding('class.mdc-elevation--z20') className: string = 'mdc-elevation--z20';
}

@Directive({
selector: '[mdc-elevation-z21]'
})
export class Elevation21Directive {
@HostBinding('class.mdc-elevation--z21') className: string = 'mdc-elevation--z21';
}

@Directive({
selector: '[mdc-elevation-z22]'
})
export class Elevation22Directive {
@HostBinding('class.mdc-elevation--z22') className: string = 'mdc-elevation--z22';
}

@Directive({
selector: '[mdc-elevation-z23]'
})
export class Elevation23Directive {
@HostBinding('class.mdc-elevation--z23') className: string = 'mdc-elevation--z23';
}

@Directive({
selector: '[mdc-elevation-z24]'
})
export class Elevation24Directive {
@HostBinding('class.mdc-elevation--z24') className: string = 'mdc-elevation--z24';
if (!change.isFirstChange()) {
this._renderer.removeClass(this.nativeEl, `mdc-elevation--z${change.previousValue}`);
}
this._renderer.addClass(this.nativeEl, `mdc-elevation--z${change.currentValue}`);
}
}
52 changes: 2 additions & 50 deletions src/lib/elevation/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,12 @@ import { NgModule } from '@angular/core';

import {
ElevationTransition,
Elevation0Directive,
Elevation1Directive,
Elevation2Directive,
Elevation3Directive,
Elevation4Directive,
Elevation5Directive,
Elevation6Directive,
Elevation7Directive,
Elevation8Directive,
Elevation9Directive,
Elevation10Directive,
Elevation11Directive,
Elevation12Directive,
Elevation13Directive,
Elevation14Directive,
Elevation15Directive,
Elevation16Directive,
Elevation17Directive,
Elevation18Directive,
Elevation19Directive,
Elevation20Directive,
Elevation21Directive,
Elevation22Directive,
Elevation23Directive,
Elevation24Directive
ElevationDirective
} from './elevation.directive';

const ELEVATION_DIRECTIVES = [
ElevationTransition,
Elevation0Directive,
Elevation1Directive,
Elevation2Directive,
Elevation3Directive,
Elevation4Directive,
Elevation5Directive,
Elevation6Directive,
Elevation7Directive,
Elevation8Directive,
Elevation9Directive,
Elevation10Directive,
Elevation11Directive,
Elevation12Directive,
Elevation13Directive,
Elevation14Directive,
Elevation15Directive,
Elevation16Directive,
Elevation17Directive,
Elevation18Directive,
Elevation19Directive,
Elevation20Directive,
Elevation21Directive,
Elevation22Directive,
Elevation23Directive,
Elevation24Directive
ElevationDirective
];

@NgModule({
Expand Down

0 comments on commit 257cb04

Please sign in to comment.