Skip to content

Commit

Permalink
fix(drawer): fix drawer over
Browse files Browse the repository at this point in the history
  • Loading branch information
@alyleui
alyleui committed Sep 30, 2018
1 parent 9bdd7b8 commit 32e984d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 73 deletions.
48 changes: 8 additions & 40 deletions src/app/components/drawer-demo/drawer-demo-01/drawer-demo-01.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,21 @@
<!-- <ly-drawer-container #drawerContainer>
<ly-drawer [opened]="opened" [config]="{width: 150}" [mode]="mode" class="drawer-demo" bg="background:primary" #drawer>
<p>Hi!</p>
<button ly-button (click)="drawer.toggle()">close</button>
</ly-drawer>
<ly-drawer [config]="{width: 150}" mode="over" class="drawer-demo" bg="background:primary" position="right" #drawer2>
<p>Right</p>
<button ly-button (click)="drawer2.toggle()">close</button>
</ly-drawer>
<ly-drawer-content>
<div>
<div>
<button ly-button (click)="drawer.toggle()">toggle left</button>
<button ly-button (click)="drawer2.toggle()">toggle right</button>
<button ly-button (click)="opened = !opened">[opened]="{{drawer.opened}}"</button>
</div>
<div>
mode: {{ mode }}
<ly-radio-group [(ngModel)]="mode">
<ly-radio value="over">over</ly-radio>
<ly-radio value="side" checked>side</ly-radio>
<ly-radio value="push">push</ly-radio>
</ly-radio-group>
</div>
</div>
</ly-drawer-content>
</ly-drawer-container> -->

<ly-drawer-container>
<ly-drawer opened position="start" width="150px 0@XSmall" bg="background:primary" #drawer01="lyDrawer">
<ly-drawer-container [withClass]="classes.drawerContainer">
<ly-drawer [withClass]="classes.drawer" opened position="start" [mode]="mode" width="150px 0@XSmall" bg="background:primary" #drawer01="lyDrawer">
<p>Hi!</p>
<button ly-button (click)="drawer01.toggle()">close</button>
</ly-drawer>
<ly-drawer position="end" width="150px 48px@XSmall" [mode]="mode" bg="background:primary" #drawer02="lyDrawer">
<ly-drawer position="end" width="150px 48px@XSmall" bg="background:primary" #drawer02="lyDrawer">
<p>Hi!</p>
<button ly-button (click)="drawer02.toggle()">close</button>
</ly-drawer>
<ly-drawer-content>
<ly-drawer-content [withClass]="classes.drawerContent">
<div>
<ly-radio-group [(ngModel)]="mode">
<ly-radio value="over">over</ly-radio>
<ly-radio value="side">side</ly-radio>
</ly-radio-group>
<div>
<button ly-button (click)="drawer01.toggle()">toggle start</button>
<button ly-button (click)="drawer02.toggle()">toggle end</button>
<!-- <button ly-button (click)="opened = !opened">[opened]="{{drawer.opened}}"</button> -->
</div>
<div>
mode: {{ mode }}
<ly-radio-group [(ngModel)]="mode">
<ly-radio value="over">over</ly-radio>
<ly-radio value="side">side</ly-radio>
</ly-radio-group>
</div>
</div>
</ly-drawer-content>
Expand Down
31 changes: 23 additions & 8 deletions src/app/components/drawer-demo/drawer-demo-01/drawer-demo-01.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { LyTheme2 } from '@alyle/ui';

const styles = {
drawerContainer: {
height: '225px',
transform: 'translate3d(0,0,0)'
},
drawer: {
height: '100%',
width: '150px'
},
drawerContent: {
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
display: 'flex'
}
};

@Component({
selector: 'drawer-demo-01',
templateUrl: './drawer-demo-01.component.html',
styleUrls: ['./drawer-demo-01.component.css']
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DrawerDemo01Component implements OnInit {
export class DrawerDemo01Component {
classes = this._theme.addStyleSheet(styles, 'drawer-demo-01');
mode = 'side';
opened = true;
constructor() { }

ngOnInit() {
}

constructor(private _theme: LyTheme2) { }
}
43 changes: 18 additions & 25 deletions src/lib/drawer/drawer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
ContentChild,
Expand All @@ -23,6 +22,7 @@ import {
} from '@alyle/ui';

const DEFAULT_MODE = 'side';
const DEFAULT_WIDTH = '230px';
const DEFAULT_VALUE = '';
const STYLE_PRIORITY = -2;
const DEFAULT_POSITION = 'start';
Expand Down Expand Up @@ -62,6 +62,7 @@ type mode = 'side' | 'over';
})
export class LyDrawerContainer {
classes = this._theme.addStyleSheet(styles, 'ly-drawer-container', STYLE_PRIORITY + 1.9);
_openDrawers = 0;
@ContentChild(forwardRef(() => LyDrawerContent)) drawerContent: LyDrawerContent;
constructor(
private _theme: LyTheme2,
Expand Down Expand Up @@ -94,41 +95,31 @@ export class LyDrawerContent {
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'lyDrawer'
})
export class LyDrawer implements OnChanges, AfterViewInit {
export class LyDrawer implements OnChanges {
/**
* Styles
* @ignore
*/
classes = this._drawerContainer.classes;
private _initialMode: mode;
private _forceModeOver: boolean;
private _fromToggle: boolean;
private _opened: boolean;
private _openedClass: string;
private _viewRef: EmbeddedViewRef<any>;

private _mode: mode;
private _modeClass: string;

private _width: number | string;
private _widthClass: string;

private _height: number | string;
private _heightClass: string;

private _position: position = DEFAULT_POSITION;
private _positionClass: string;

private _drawerRootClass: string;
private _drawerClass: string;
private _drawerContentClass: string;

/** @ignore */
@ViewChild(TemplateRef) _backdrop: TemplateRef<any>;

/** @deprecated */
@Input() config: any;

@Input()
set opened(val: boolean) {
if (val !== this.opened) {
this._opened = toBoolean(val);
this._updateBackdrop();
}
}
get opened() {
Expand All @@ -141,6 +132,7 @@ export class LyDrawer implements OnChanges, AfterViewInit {
@Input() spacingRight: string | number;
@Input() width: number | string;
@Input() height: number | string;

@Input()
set position(val: position) {
if (val !== this.position) {
Expand Down Expand Up @@ -173,6 +165,7 @@ export class LyDrawer implements OnChanges, AfterViewInit {
}

ngOnChanges() {
this._updateBackdrop();
if (this._forceModeOver && !this._fromToggle) {
this._resetForceModeOver();
}
Expand All @@ -184,11 +177,13 @@ export class LyDrawer implements OnChanges, AfterViewInit {
const __position = this.position;
const __spacingTop = this.spacingTop;
const __spacingBottom = this.spacingBottom;

if (__width && __height) {
throw new Error(`\`width\` and \`height\` are defined, you can only define one`);
} else if (!__width) {
if (!__height) {
__width = '230px';
/** set default __width if `width` & `height` is `undefined` */
__width = DEFAULT_WIDTH;
}
}

Expand Down Expand Up @@ -317,11 +312,6 @@ export class LyDrawer implements OnChanges, AfterViewInit {
this._fromToggle = false;
}

ngAfterViewInit() {
// this._viewRef = this._vcr.createEmbeddedView(this._backdrop);
// this._viewRef.onDestroy(() => console.log('drawer backdrop destroyed!!'));
}

toggle() {
const width = getComputedStyle(this._el.nativeElement).width;
this._fromToggle = true;
Expand All @@ -344,9 +334,12 @@ export class LyDrawer implements OnChanges, AfterViewInit {
}

private _updateBackdrop() {
if (this.opened && (this._mode === 'over' || this._forceModeOver)) {
if (this.opened && (this.mode === 'over' || this._forceModeOver)) {
this._drawerContainer._openDrawers++;
this._viewRef = this._vcr.createEmbeddedView(this._backdrop);
} else {
(this._viewRef.rootNodes[0] as HTMLDivElement).style.zIndex = `${this._drawerContainer._openDrawers}`;
} else if (this._viewRef) {
this._drawerContainer._openDrawers--;
this._vcr.clear();
this._viewRef = null;
}
Expand Down

0 comments on commit 32e984d

Please sign in to comment.