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

Commit8b5bf0b

Browse files
committed
refactor: allow getComputedStyle() to be undefined for SSR
1 parent904792a commit8b5bf0b

File tree

4 files changed

+19
-21
lines changed

4 files changed

+19
-21
lines changed

‎projects/coreui-angular/src/lib/backdrop/backdrop.service.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export class BackdropService {
2020
get #scrollbarWidth(){
2121
// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
2222
constdocumentWidth=this.#document.documentElement.clientWidth;
23-
constscrollbarWidth=Math.abs((window?.innerWidth??documentWidth)-documentWidth);
23+
// const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
24+
constscrollbarWidth=Math.abs((this.#document.defaultView?.innerWidth??documentWidth)-documentWidth);
2425
return`${scrollbarWidth}px`;
2526
}
2627

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export class NavbarComponent implements AfterContentInit {
6666

6767
getbreakpoint():string|boolean{
6868
if(typeofthis.expand==='string'){
69-
returngetComputedStyle(this.hostElement.nativeElement).getPropertyValue(`--cui-breakpoint-${this.expand}`);
69+
returngetComputedStyle(this.hostElement.nativeElement)?.getPropertyValue(`--cui-breakpoint-${this.expand}`)??false;
7070
}
7171
returnfalse;
7272
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ let nextId = 0;
5151
styleUrls:['./offcanvas.component.scss'],
5252
exportAs:'cOffcanvas',
5353
standalone:true,
54-
imports:[A11yModule]
54+
imports:[A11yModule],
55+
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
56+
host:{ngSkipHydration:'true'}
5557
})
5658
exportclassOffcanvasComponentimplementsOnInit,OnDestroy{
5759

@@ -190,7 +192,7 @@ export class OffcanvasComponent implements OnInit, OnDestroy {
190192
}
191193
constelement:Element=this.document.documentElement;
192194
constresponsiveBreakpoint=this.responsive;
193-
constbreakpointValue=getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`)||false;
195+
constbreakpointValue=getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`)??false;
194196
returnbreakpointValue ?`${parseFloat(breakpointValue.trim())-0.02}px` :false;
195197
}
196198

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
OnInit,
1010
Output,
1111
Renderer2,
12-
SimpleChanges,
12+
SimpleChanges
1313
}from'@angular/core';
1414
import{DOCUMENT}from'@angular/common';
1515
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
@@ -40,13 +40,13 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
4040
#stateToggleSubscription!:Subscription;
4141

4242
state:ISidebarAction={
43-
sidebar:this,
43+
sidebar:this
4444
};
4545

4646
#stateInitial={
4747
narrow:false,
4848
visible:false,
49-
unfoldable:false,
49+
unfoldable:false
5050
};
5151

5252
/**
@@ -155,11 +155,11 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
155155
}
156156
this.state={
157157
...this.state,
158-
...newState,
158+
...newState
159159
};
160160
this.state.mobile&&this.state.visible
161-
?this.backdropService.setBackdrop(this)
162-
:this.backdropService.clearBackdrop();
161+
?this.backdropService.setBackdrop(this)
162+
:this.backdropService.clearBackdrop();
163163
}
164164

165165
getsidebarState():ISidebarAction{
@@ -168,13 +168,8 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
168168

169169
getgetMobileBreakpoint():string{
170170
constelement:Element=this.document.documentElement;
171-
constmobileBreakpoint=
172-
getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint')||
173-
'md';
174-
constbreakpointValue=
175-
getComputedStyle(element).getPropertyValue(
176-
`--cui-breakpoint-${mobileBreakpoint.trim()}`
177-
)||'768px';
171+
constmobileBreakpoint=this.document.defaultView?.getComputedStyle(element)?.getPropertyValue('--cui-mobile-breakpoint')??'md';
172+
constbreakpointValue=this.document.defaultView?.getComputedStyle(element)?.getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`)??'768px';
178173
return`${parseFloat(breakpointValue.trim())-0.02}px`||'767.98px';
179174
}
180175

@@ -199,7 +194,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
199194
'sidebar-overlaid':this.overlaid,
200195
[`sidebar-${this.size}`]:!!this.size,
201196
show:visible&&this.#onMobile,
202-
hide:!visible,
197+
hide:!visible
203198
};
204199
}
205200

@@ -242,11 +237,11 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
242237
this.#stateInitial={
243238
narrow:this.narrow,
244239
visible:this.visible,
245-
unfoldable:this.unfoldable,
240+
unfoldable:this.unfoldable
246241
};
247242
this.sidebarService.toggle({
248243
...this.#stateInitial,
249-
sidebar:this,
244+
sidebar:this
250245
});
251246
}
252247

@@ -279,7 +274,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
279274
mobile:isOnMobile,
280275
unfoldable:isUnfoldable,
281276
visible:isOnMobile ?!isOnMobile :this.#stateInitial.visible,
282-
sidebar:this,
277+
sidebar:this
283278
});
284279
}
285280
}

0 commit comments

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