Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8c15b75

Browse files
committed
refactor(offcanvas): animation classes, scrollbar behavior, cleanup
1 parent8bdf397 commit8c15b75

File tree

2 files changed

+64
-41
lines changed

2 files changed

+64
-41
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display:none;
3+
}

‎projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts‎

Lines changed: 61 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,19 @@ import {
66
HostListener,
77
Inject,
88
Input,
9-
OnChanges,
109
OnDestroy,
1110
OnInit,
1211
Output,
1312
PLATFORM_ID,
14-
Renderer2,
15-
SimpleChanges
13+
Renderer2
1614
}from'@angular/core';
17-
import{animate,state,style,transition,trigger}from'@angular/animations';
15+
import{DOCUMENT,isPlatformBrowser}from'@angular/common';
16+
import{animate,AnimationEvent,state,style,transition,trigger}from'@angular/animations';
1817
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
1918
import{Subscription}from'rxjs';
2019

21-
import{OffcanvasService}from'../offcanvas.service';
2220
import{BackdropService}from'../../backdrop/backdrop.service';
23-
import{DOCUMENT,isPlatformBrowser}from'@angular/common';
21+
import{OffcanvasService}from'../offcanvas.service';
2422

2523
letnextId=0;
2624

@@ -29,29 +27,30 @@ let nextId = 0;
2927
animations:[
3028
trigger('showHide',[
3129
state(
32-
'true',
30+
'visible',
3331
style({
34-
visibility:'visible'
32+
//visibility: 'visible'
3533
})
3634
),
3735
state(
38-
'false',
36+
'hidden',
3937
style({
40-
visibility:'hidden'
38+
//visibility: 'hidden'
4139
})
4240
),
43-
transition('true=>false',[animate('300ms')])
41+
transition('visible <=>*',[animate('300ms')])
4442
])
4543
],
4644
templateUrl:'./offcanvas.component.html',
4745
styleUrls:['./offcanvas.component.scss'],
4846
exportAs:'cOffcanvas'
4947
})
50-
exportclassOffcanvasComponentimplementsOnChanges,OnInit,OnDestroy{
48+
exportclassOffcanvasComponentimplementsOnInit,OnDestroy{
49+
5150
staticngAcceptInputType_scroll:BooleanInput;
5251

5352
constructor(
54-
@Inject(DOCUMENT)privatedocument:any,
53+
@Inject(DOCUMENT)privatedocument:Document,
5554
@Inject(PLATFORM_ID)privateplatformId:any,
5655
privaterenderer:Renderer2,
5756
privatehostElement:ElementRef,
@@ -96,6 +95,7 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
9695
private_scroll=false;
9796

9897
@Input()id=`offcanvas-${this.placement}-${nextId++}`;
98+
9999
/**
100100
* Default role for offcanvas. [docs]
101101
*@type string
@@ -113,32 +113,32 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
113113
/**
114114
* Toggle the visibility of offcanvas component.
115115
*@type boolean
116+
*@default false
116117
*/
117118
@Input()
118119
setvisible(value:boolean){
119120
this._visible=coerceBooleanProperty(value);
120-
if(value){
121+
if(this._visible){
121122
this.setBackdrop(this.backdrop);
122123
this.setFocus();
123124
}else{
124125
this.setBackdrop(false);
125126
}
126-
this.setScroll();
127127
this.visibleChange.emit(value);
128128
}
129129

130130
getvisible():boolean{
131131
returnthis._visible;
132132
}
133133

134-
private_visible!:boolean;
134+
private_visible:boolean=false;
135135

136136
/**
137137
* Event triggered on visible change.
138138
*/
139139
@Output()visibleChange=newEventEmitter<boolean>();
140140

141-
privateactiveBackdrop!:any;
141+
privateactiveBackdrop!:HTMLDivElement;
142142
privatescrollbarWidth!:string;
143143

144144
privatestateToggleSubscription!:Subscription;
@@ -149,7 +149,7 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
149149
return{
150150
offcanvas:true,
151151
[`offcanvas-${this.placement}`]:!!this.placement,
152-
show:this.visible
152+
show:this.show
153153
};
154154
}
155155

@@ -164,8 +164,47 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
164164
}
165165

166166
@HostBinding('@showHide')
167-
getanimateType():boolean{
168-
returnthis.visible;
167+
getanimateTrigger():string{
168+
returnthis.visible ?'visible' :'hidden';
169+
}
170+
171+
getshow():boolean{
172+
returnthis.visible&&this._show;
173+
}
174+
175+
setshow(value:boolean){
176+
this._show=value;
177+
}
178+
179+
private_show=false;
180+
181+
@HostListener('@showHide.start',['$event'])
182+
animateStart(event:AnimationEvent){
183+
constscrollbarWidth=this.scrollbarWidth;
184+
if(event.toState==='visible'){
185+
if(!this.scroll){
186+
this.renderer.setStyle(this.document.body,'overflow','hidden');
187+
this.renderer.setStyle(this.document.body,'padding-right',scrollbarWidth);
188+
}
189+
this.renderer.addClass(this.hostElement.nativeElement,'showing');
190+
}else{
191+
this.renderer.addClass(this.hostElement.nativeElement,'hiding');
192+
}
193+
}
194+
195+
@HostListener('@showHide.done',['$event'])
196+
animateDone(event:AnimationEvent){
197+
setTimeout(()=>{
198+
if(event.toState==='visible'){
199+
this.renderer.removeClass(this.hostElement.nativeElement,'showing');
200+
}
201+
if(event.toState==='hidden'){
202+
this.renderer.removeClass(this.hostElement.nativeElement,'hiding');
203+
this.renderer.removeStyle(this.document.body,'overflow');
204+
this.renderer.removeStyle(this.document.body,'paddingRight');
205+
}
206+
});
207+
this.show=this.visible;
169208
}
170209

171210
@HostListener('document:keydown',['$event'])
@@ -181,22 +220,17 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
181220
}
182221

183222
ngOnInit():void{
184-
this.setScroll();
185223
this.scrollbarWidth=this.backdropService.scrollbarWidth;
186224
this.stateToggleSubscribe();
225+
// hotfix to avoid end offcanvas flicker on first render
226+
this.renderer.setStyle(this.hostElement.nativeElement,'display','flex');
187227
}
188228

189229
ngOnDestroy():void{
190230
this.offcanvasService.toggle({show:false,id:this.id});
191231
this.stateToggleSubscribe(false);
192232
}
193233

194-
ngOnChanges(changes:SimpleChanges):void{
195-
if(changes['scroll']){
196-
this.setScroll();
197-
}
198-
}
199-
200234
privatestateToggleSubscribe(subscribe:boolean=true):void{
201235
if(subscribe){
202236
this.stateToggleSubscription=
@@ -237,18 +271,4 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
237271
setTimeout(()=>this.hostElement.nativeElement.focus());
238272
}
239273
}
240-
241-
setScroll(){
242-
if(this.visible){
243-
if(!this.scroll){
244-
this.renderer.setStyle(this.document.body,'overflow','hidden');
245-
this.renderer.setStyle(this.document.body,'paddingRight.px','0');
246-
}
247-
return;
248-
}
249-
if(!this.scroll){
250-
this.renderer.removeStyle(this.document.body,'overflow');
251-
this.renderer.removeStyle(this.document.body,'paddingRight');
252-
}
253-
}
254274
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp