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

Commitb20fd86

Browse files
authored
Use CSS to determine breakpoint state instead of comparison against window.innerWidth in JS (#1)
This change makes the synchronisation a pure CSS function instead ofintroducing side effects by duplicating CSS Media Query logic inJavaScript.
1 parent3c5dccc commitb20fd86

File tree

3 files changed

+25
-30
lines changed

3 files changed

+25
-30
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name":"@webfactoryde/breakpoints-export",
3-
"version":"1.0.0",
3+
"version":"1.1.0",
44
"description":"A JS utility that syncs (S)CSS breakpoints with runtime JavaScript by exporting breakpoint maps as CSS custom properties and providing a tiny JS helper to read and compare them against the current viewport (e.g. bp.lessThan, bp.greaterThan).",
55
"main":"./src/breakpoints-export.js",
66
"style":"./src/breakpoints-export.scss",

‎src/breakpoints-export.js‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
1-
/**
2-
* Returns the value of a breakpoint managed in a CSS Custom Property of the same name.
3-
*
4-
*@param {string} name - Name of the breakpoint
5-
*@param {boolean} asNumber - Controls whether the return value is a string with unit (px, em) or a number without unit
6-
*@returns {number|string} - Value of the CSS breakpoint
7-
*/
81
constbp={
9-
getBreakpoint(name,asNumber=true){
10-
constthreshold=getComputedStyle(document.documentElement)
2+
/**
3+
* Returns the state of a breakpoint in relation to the current viewport. The breakpoints are managed in
4+
* CSS Custom Properties of the same name that are in turn updated via CSS Media Queries.
5+
*
6+
*@param {string} name - Name of the breakpoint
7+
*@returns {boolean} – State of the breakpoint for the current viewport
8+
*/
9+
isBreakpointActive(name){
10+
conststate=getComputedStyle(document.documentElement)
1111
.getPropertyValue(`--${name}`)
1212
.trim();
1313

14-
returnasNumber ?parseInt(threshold) :threshold;
14+
returnstate==='active';
1515
},
1616

1717
lessThan(breakpoint){
18-
letthreshold=this.getBreakpoint(breakpoint);
19-
20-
if(!threshold){
21-
returnfalse
22-
}else{
23-
returnwindow.innerWidth<threshold;
24-
}
18+
return!this.isBreakpointActive(breakpoint);
2519
},
2620

2721
greaterThan(breakpoint){
28-
letthreshold=this.getBreakpoint(breakpoint);
29-
30-
if(!threshold){
31-
returnfalse
32-
}else{
33-
returnwindow.innerWidth>=threshold;
34-
}
22+
returnthis.isBreakpointActive(breakpoint);
3523
},
3624
}
3725

‎src/breakpoints-export.scss‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,23 @@ via getComputedStyle(document.documentElement) and keeps SCSS breakpoint definit
1212
$breakpoints: (screen-small: 480px, screen-medium: 768px);
1313
@include breakpoints-export($breakpoints);
1414
15-
//Output CSS
15+
//Computed CSS for a viewport of 575px:
1616
:root {
17-
--screen-small:480px;
18-
--screen-medium:768px;
17+
--screen-small:active;
18+
--screen-medium:inactive;
1919
}
2020
*/
2121
@mixinbreakpoints-export($breakpoints) {
2222
:root {
23-
@each$name,$valuein$breakpoints {
24-
--#{$name}:#{$value};
23+
@each$name,$outer-valuein$map {
24+
@media (min-width:$outer-value) {
25+
@each$name,$inner-valuein$map {
26+
$state:'inactive';
27+
@if ($outer-value >=$inner-value) {$state:'active';}
28+
29+
--#{$name}:#{$state};
30+
}
31+
}
2532
}
2633
}
2734
}

0 commit comments

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