Skip to content

Commit

Permalink
changed backdrop-filter to or-type
Browse files Browse the repository at this point in the history
  • Loading branch information
Heulitig committed Oct 18, 2023
1 parent ba5b519 commit 79eb9d7
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 156 deletions.
74 changes: 66 additions & 8 deletions fastn-js/js/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,35 @@ fastn_dom.WhiteSpace = {
BreakSpaces: "break-spaces",
}


fastn_dom.BackdropFilter = {
Blur: (value) => {
return [1, value];
},
Brightness: (value) => {
return [2, value];
},
Contrast: (value) => {
return [3, value];
},
Grayscale: (value) => {
return [4, value];
},
Invert: (value) => {
return [5, value];
},
Opacity: (value) => {
return [6, value];
},
Sepia: (value) => {
return [7, value];
},
Saturate: (value) => {
return [8, value];
},
Multi: (value) => {
return [9, value];
},
}

fastn_dom.BackgroundStyle = {
Solid: (value) => {
Expand Down Expand Up @@ -983,12 +1011,7 @@ class Node2 {
this.attachCss("box-shadow", darkShadowCss, true, `body.dark .${lightClass}`);
}
}
attachBackdropFilter(value) {
if (fastn_utils.isNull(value)) {
this.attachCss("backdrop-filter", value);
return;
}

attachBackdropMultiFilter(value) {
const filters = {
blur: fastn_utils.getStaticValue(value.get("blur")),
brightness: fastn_utils.getStaticValue(value.get("brightness")),
Expand Down Expand Up @@ -1474,7 +1497,42 @@ class Node2 {
} else if (kind === fastn_dom.PropertyKind.TextShadow) {
this.attachTextShadow(staticValue);
} else if (kind === fastn_dom.PropertyKind.BackdropFilter) {
this.attachBackdropFilter(staticValue);
if (fastn_utils.isNull(value)) {
this.attachCss("backdrop-filter", value);
return;
}

let backdropType = staticValue[0];
switch (backdropType) {
case 1:
this.attachCss("backdrop-filter", `blur(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 2:
this.attachCss("backdrop-filter", `brightness(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 3:
this.attachCss("backdrop-filter", `contrast(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 4:
this.attachCss("backdrop-filter", `greyscale(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 5:
this.attachCss("backdrop-filter", `invert(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 6:
this.attachCss("backdrop-filter", `opacity(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 7:
this.attachCss("backdrop-filter", `sepia(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 8:
this.attachCss("backdrop-filter", `saturate(${fastn_utils.getStaticValue(staticValue[1])})`);
break;
case 9:
console.log("Here");
this.attachBackdropMultiFilter(staticValue[1]);
break;
}
} else if (kind === fastn_dom.PropertyKind.Classes) {
fastn_utils.removeNonFastnClasses(this);
if (!fastn_utils.isNull(staticValue)) {
Expand Down
20 changes: 20 additions & 0 deletions ftd/src/interpreter/constants.rs
Original file line number Diff line number Diff line change
Expand Up @@ -319,4 +319,24 @@ pub const FTD_LINK_REL_NO_FOLLOW: &str = "ftd#link-rel.no-follow";
pub const FTD_LINK_REL_SPONSORED: &str = "ftd#link-rel.sponsored";
pub const FTD_LINK_REL_UGC: &str = "ftd#link-rel.ugc";

// blur.px: 10
// ;; brightness.percent: 50
// ;; contrast.percent: 40
// ;; grayscale.percent: 40
// ;; invert.percent: 70
// ;; opacity.percent: 20
// ;; sepia.percent: 90
// ;; saturate.percent: 80

pub const FTD_BACKDROP_MULTI: &str = "ftd#backdrop-multi";

pub const FTD_BACKDROP_FILTER: &str = "ftd#backdrop-filter";
pub const FTD_BACKDROP_FILTER_BLUR: &str = "ftd#backdrop-filter.blur";
pub const FTD_BACKDROP_FILTER_BRIGHTNESS: &str = "ftd#backdrop-filter.brightness";
pub const FTD_BACKDROP_FILTER_CONTRAST: &str = "ftd#backdrop-filter.contrast";
pub const FTD_BACKDROP_FILTER_GRAYSCALE: &str = "ftd#backdrop-filter.grayscale";
pub const FTD_BACKDROP_FILTER_INVERT: &str = "ftd#backdrop-filter.invert";
pub const FTD_BACKDROP_FILTER_OPACITY: &str = "ftd#backdrop-filter.opacity";
pub const FTD_BACKDROP_FILTER_SEPIA: &str = "ftd#backdrop-filter.sepia";
pub const FTD_BACKDROP_FILTER_SATURATE: &str = "ftd#backdrop-filter.saturate";
pub const FTD_BACKDROP_FILTER_MULTI: &str = "ftd#backdrop-filter.multi";
Loading

0 comments on commit 79eb9d7

Please sign in to comment.