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

Commitc256b76

Browse files
committed
fix(sidebar): open behavior on mobile layout change, refactor
1 parentf4755b1 commitc256b76

File tree

1 file changed

+88
-57
lines changed

1 file changed

+88
-57
lines changed

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

Lines changed: 88 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,51 @@ import {
1010
Output,
1111
Renderer2,
1212
SimpleChanges
13-
}from'@angular/core';
14-
import{DOCUMENT}from'@angular/common';
15-
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
16-
import{BreakpointObserver,BreakpointState}from'@angular/cdk/layout';
17-
import{Subscription}from'rxjs';
13+
}from"@angular/core";
14+
import{DOCUMENT}from"@angular/common";
15+
import{BooleanInput,coerceBooleanProperty}from"@angular/cdk/coercion";
16+
import{BreakpointObserver,BreakpointState}from"@angular/cdk/layout";
17+
import{Subscription}from"rxjs";
1818

19-
import{ISidebarAction,SidebarService}from'../sidebar.service';
20-
import{SidebarBackdropService}from'../sidebar-backdrop/sidebar-backdrop.service';
19+
import{ISidebarAction,SidebarService}from"../sidebar.service";
20+
import{SidebarBackdropService}from"../sidebar-backdrop/sidebar-backdrop.service";
2121

2222
@Component({
2323
selector:'c-sidebar',
2424
exportAs:'cSidebar',
2525
template:'<ng-content></ng-content>'
2626
})
2727
exportclassSidebarComponentimplementsOnChanges,OnDestroy,OnInit{
28-
2928
staticngAcceptInputType_narrow:BooleanInput;
3029
staticngAcceptInputType_overlaid:BooleanInput;
3130
staticngAcceptInputType_unfoldable:BooleanInput;
3231
staticngAcceptInputType_visible:BooleanInput;
3332

34-
private_narrow=false;
35-
private_overlaid=false;
36-
private_unfoldable=false;
37-
private_visible=false;
38-
privateonMobile=false;
39-
privatelayoutChangeSubscription!:Subscription;
40-
privatestateToggleSubscription!:Subscription;
33+
#narrow=false;
34+
#overlaid=false;
35+
#unfoldable=false;
36+
#visible=false;
37+
#onMobile=false;
38+
#layoutChangeSubscription!:Subscription;
39+
#stateToggleSubscription!:Subscription;
4140

4241
state:ISidebarAction={
4342
sidebar:this
4443
};
4544

45+
#stateInitial={
46+
narrow:false,
47+
visible:false,
48+
unfoldable:false
49+
};
50+
51+
/**
52+
* Sets if the color of text should be colored for a light or dark background. [docs]
53+
*
54+
*@type 'dark' | 'light'
55+
*/
56+
@Input()colorScheme?:'dark'|'light';
57+
4658
/**
4759
* Sets html attribute id. [docs]
4860
*
@@ -56,11 +68,11 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
5668
*/
5769
@Input()
5870
setnarrow(value:boolean){
59-
this._narrow=coerceBooleanProperty(value);
71+
this.#narrow=coerceBooleanProperty(value);
6072
}
6173

6274
getnarrow(){
63-
returnthis._narrow;
75+
returnthis.#narrow;
6476
}
6577

6678
/**
@@ -69,13 +81,19 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
6981
*/
7082
@Input()
7183
setoverlaid(value:boolean){
72-
this._overlaid=coerceBooleanProperty(value);
84+
this.#overlaid=coerceBooleanProperty(value);
7385
}
7486

7587
getoverlaid(){
76-
returnthis._overlaid;
88+
returnthis.#overlaid;
7789
}
7890

91+
/**
92+
* Components placement, there’s no default placement. [docs]
93+
*@type 'start' | 'end'
94+
*/
95+
@Input()placement?:'start'|'end';
96+
7997
/**
8098
* Place sidebar in non-static positions. [docs]
8199
*@default 'fixed'
@@ -92,11 +110,11 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
92110
*/
93111
@Input()
94112
setunfoldable(value:boolean){
95-
this._unfoldable=coerceBooleanProperty(value);
113+
this.#unfoldable=coerceBooleanProperty(value);
96114
}
97115

98116
getunfoldable(){
99-
returnthis._unfoldable;
117+
returnthis.#unfoldable;
100118
}
101119

102120
/**
@@ -105,14 +123,14 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
105123
@Input()
106124
setvisible(value:boolean){
107125
constvisible=coerceBooleanProperty(value);
108-
if(this._visible!==visible){
109-
this._visible=visible;
110-
this.visibleChange.emit(this._visible);
126+
if(this.#visible!==visible){
127+
this.#visible=visible;
128+
this.visibleChange.emit(this.#visible);
111129
}
112130
}
113131

114132
getvisible(){
115-
returnthis._visible;
133+
returnthis.#visible;
116134
}
117135

118136
/**
@@ -126,7 +144,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
126144
if('toggle'innewState){
127145
if(newState.toggle==='visible'){
128146
newState.visible=!this.state.visible;
129-
this.visible=newState.visible&&!this.overlaid;
147+
this.visible=newState.visible;
130148
}elseif(newState.toggle==='unfoldable'){
131149
newState.unfoldable=!this.state.unfoldable;
132150
this.unfoldable=newState.unfoldable;
@@ -136,24 +154,31 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
136154
}
137155
this.state={
138156
...this.state,
139-
...newState
157+
...newState,
140158
};
141-
this.state.mobile&&this.state.visible ?this.backdropService.setBackdrop(this) :this.backdropService.clearBackdrop();
159+
this.state.mobile&&this.state.visible
160+
?this.backdropService.setBackdrop(this)
161+
:this.backdropService.clearBackdrop();
142162
}
143163

144164
getsidebarState():ISidebarAction{
145165
returnthis.state;
146166
}
147167

148168
getgetMobileBreakpoint():string{
149-
constelement=this.document.firstElementChild;
150-
constmobileBreakpoint=getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint')||'md';
151-
constbreakpointValue=getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`)||'768px';
152-
return`${parseFloat(breakpointValue.trim())-.02}px`||'767.98px';
169+
constelement:Element=this.document.documentElement;
170+
constmobileBreakpoint=
171+
getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint')||
172+
'md';
173+
constbreakpointValue=
174+
getComputedStyle(element).getPropertyValue(
175+
`--cui-breakpoint-${mobileBreakpoint.trim()}`
176+
)||'768px';
177+
return`${parseFloat(breakpointValue.trim())-0.02}px`||'767.98px';
153178
}
154179

155180
constructor(
156-
@Inject(DOCUMENT)privatedocument:any,
181+
@Inject(DOCUMENT)privatedocument:Document,
157182
privaterenderer:Renderer2,
158183
privatebreakpointObserver:BreakpointObserver,
159184
privatesidebarService:SidebarService,
@@ -164,16 +189,16 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
164189

165190
@HostBinding('class')
166191
getgetClasses():any{
167-
const{ mobile,unfoldable,visible}=this.sidebarState;
192+
const{ mobile, visible}=this.sidebarState;
168193
return{
169194
sidebar:true,
170195
'sidebar-fixed':this.position==='fixed'&&!mobile,
171196
'sidebar-narrow':this.narrow&&!this.unfoldable,
172197
'sidebar-narrow-unfoldable':this.unfoldable,
173198
'sidebar-overlaid':this.overlaid,
174199
[`sidebar-${this.size}`]:!!this.size,
175-
show:visible&&this.onMobile,
176-
hide:!visible&&!this.onMobile
200+
show:visible&&this.#onMobile,
201+
hide:!visible,
177202
};
178203
}
179204

@@ -213,23 +238,27 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
213238
}
214239

215240
setInitialState():void{
216-
this.sidebarService.toggle({
241+
this.#stateInitial={
217242
narrow:this.narrow,
218243
visible:this.visible,
219244
unfoldable:this.unfoldable,
220-
sidebar:this
245+
};
246+
this.sidebarService.toggle({
247+
...this.#stateInitial,
248+
sidebar:this,
221249
});
222250
}
223251

224252
privatestateToggleSubscribe(subscribe:boolean=true):void{
225253
if(subscribe){
226-
this.stateToggleSubscription=this.sidebarService.sidebarState$.subscribe((state)=>{
227-
if(this===state.sidebar||this.id===state.id){
228-
this.sidebarState=state;
229-
}
230-
});
254+
this.#stateToggleSubscription=
255+
this.sidebarService.sidebarState$.subscribe((state)=>{
256+
if(this===state.sidebar||this.id===state.id){
257+
this.sidebarState=state;
258+
}
259+
});
231260
}else{
232-
this.stateToggleSubscription.unsubscribe();
261+
this.#stateToggleSubscription.unsubscribe();
233262
}
234263
}
235264

@@ -239,21 +268,23 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
239268
if(subscribe){
240269
constlayoutChanges=this.breakpointObserver.observe([onMobile]);
241270

242-
this.layoutChangeSubscription=layoutChanges.subscribe((result:BreakpointState)=>{
243-
constisOnMobile=result.breakpoints[onMobile];
244-
constisUnfoldable=isOnMobile ?false :this.unfoldable;
245-
if(this.onMobile!==isOnMobile){
246-
this.onMobile=isOnMobile;
247-
this.sidebarService.toggle({
248-
mobile:isOnMobile,
249-
unfoldable:isUnfoldable,
250-
visible:(!isOnMobile)||isUnfoldable,
251-
sidebar:this
252-
});
271+
this.#layoutChangeSubscription=layoutChanges.subscribe(
272+
(result:BreakpointState)=>{
273+
constisOnMobile=result.breakpoints[onMobile];
274+
constisUnfoldable=isOnMobile ?false :this.unfoldable;
275+
if(this.#onMobile!==isOnMobile){
276+
this.#onMobile=isOnMobile;
277+
this.sidebarService.toggle({
278+
mobile:isOnMobile,
279+
unfoldable:isUnfoldable,
280+
visible:isOnMobile ?!isOnMobile :this.#stateInitial.visible,
281+
sidebar:this,
282+
});
283+
}
253284
}
254-
});
285+
);
255286
}else{
256-
this.layoutChangeSubscription.unsubscribe();
287+
this.#layoutChangeSubscription.unsubscribe();
257288
}
258289
}
259290
}

0 commit comments

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