Skip to content

Commit

Permalink
backdrop-filter property added (#1387)
Browse files Browse the repository at this point in the history 
* backdrop-filter property added on containers

* changed backdrop-filter to or-type

* tests fixed

* fixed js tests

---------

Co-authored-by: heulitig <[email protected]>
  • Loading branch information
@harshdoesdev @Heulitig
harshdoesdev and Heulitig authored Oct 18, 2023
1 parent 31112d2 commit d3ec7f4
Show file tree
Hide file tree
Showing 9 changed files with 498 additions and 2 deletions.
88 changes: 87 additions & 1 deletion fastn-js/js/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ fastn_dom.propertyMap = {
"z-index": "z",
"-webkit-box-orient": "wbo",
"-webkit-line-clamp": "wlc",
"backdrop-filter": "bdf",
};

// dynamic-class-css.md
Expand Down Expand Up @@ -278,6 +279,7 @@ fastn_dom.PropertyKind = {
LinkColor: 116,
TextShadow: 117,
Selectable: 118,
BackdropFilter: 119,
};


Expand Down Expand Up @@ -475,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 @@ -981,6 +1011,25 @@ class Node2 {
this.attachCss("box-shadow", darkShadowCss, true, `body.dark .${lightClass}`);
}
}
attachBackdropMultiFilter(value) {
const filters = {
blur: fastn_utils.getStaticValue(value.get("blur")),
brightness: fastn_utils.getStaticValue(value.get("brightness")),
contrast: fastn_utils.getStaticValue(value.get("contrast")),
grayscale: fastn_utils.getStaticValue(value.get("grayscale")),
invert: fastn_utils.getStaticValue(value.get("invert")),
opacity: fastn_utils.getStaticValue(value.get("opacity")),
sepia: fastn_utils.getStaticValue(value.get("sepia")),
saturate: fastn_utils.getStaticValue(value.get("saturate")),
};

const filterString = Object.entries(filters)
.filter(([_, value]) => !fastn_utils.isNull(value))
.map(([name, value]) => `${name}(${value})`)
.join(" ");

this.attachCss("backdrop-filter", filterString, false);
}
attachTextShadow(value) {
if (fastn_utils.isNull(value)) {
this.attachCss("text-shadow", value);
Expand Down Expand Up @@ -1447,6 +1496,43 @@ class Node2 {
this.attachShadow(staticValue);
} else if (kind === fastn_dom.PropertyKind.TextShadow) {
this.attachTextShadow(staticValue);
} else if (kind === fastn_dom.PropertyKind.BackdropFilter) {
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
2 changes: 2 additions & 0 deletions fastn-js/src/property.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ pub enum PropertyKind {
MetaThemeColor,
Favicon,
Selectable,
BackdropFilter,
}

impl PropertyKind {
Expand Down Expand Up @@ -564,6 +565,7 @@ impl PropertyKind {
}
PropertyKind::Favicon => "fastn_dom.PropertyKind.Favicon",
PropertyKind::Selectable => "fastn_dom.PropertyKind.Selectable",
PropertyKind::BackdropFilter => "fastn_dom.PropertyKind.BackdropFilter",
}
}
}
12 changes: 12 additions & 0 deletions ftd/src/interpreter/constants.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,3 +318,15 @@ pub const FTD_LINK_REL: &str = "ftd#link-rel";
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";

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";
169 changes: 169 additions & 0 deletions ftd/src/interpreter/things/default.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1218,6 +1218,169 @@ pub fn default_bag() -> indexmap::IndexMap<String, ftd::interpreter::Thing> {
line_number: 0,
}),
),
(
ftd::interpreter::FTD_BACKDROP_FILTER.to_string(),
ftd::interpreter::Thing::OrType(ftd::interpreter::OrType {
name: ftd::interpreter::FTD_BACKDROP_FILTER.to_string(),
variants: vec![
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_BLUR,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_BRIGHTNESS,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_CONTRAST,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_GRAYSCALE,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_INVERT,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_OPACITY,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_SEPIA,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_SATURATE,
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data(),
false,
None,
0,
)),
ftd::interpreter::OrTypeVariant::Regular(ftd::interpreter::Field::new(
ftd::interpreter::FTD_BACKDROP_FILTER_MULTI,
ftd::interpreter::Kind::record(ftd::interpreter::FTD_BACKDROP_MULTI)
.into_kind_data(),
false,
None,
0,
)),
],
line_number: 0,
}),
),
// TODO: Instead of default value, make the integer optional
(
ftd::interpreter::FTD_BACKDROP_MULTI.to_string(),
ftd::interpreter::Thing::Record(ftd::interpreter::Record {
name: ftd::interpreter::FTD_BACKDROP_MULTI.to_string(),
fields: std::iter::IntoIterator::into_iter([
ftd::interpreter::Field {
name: "blur".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "brightness".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "contrast".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "grayscale".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "invert".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "opacity".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "sepia".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
ftd::interpreter::Field {
name: "saturate".to_string(),
kind: ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_LENGTH)
.into_kind_data().into_optional(),
mutable: false,
value: None,
access_modifier: Default::default(),
line_number: 0,
},
]).collect(),
line_number: 0,
}),
),
(
ftd::interpreter::FTD_LENGTH_PAIR.to_string(),
ftd::interpreter::Thing::Record(ftd::interpreter::Record {
Expand Down Expand Up @@ -10300,6 +10463,12 @@ fn container_arguments() -> Vec<ftd::interpreter::Argument> {
.into_optional()
.into_kind_data(),
),
ftd::interpreter::Argument::default(
"backdrop-filter",
ftd::interpreter::Kind::or_type(ftd::interpreter::FTD_BACKDROP_FILTER)
.into_optional()
.into_kind_data(),
),
]
}

Expand Down
16 changes: 16 additions & 0 deletions ftd/src/js/element.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -930,6 +930,7 @@ pub struct ContainerProperties {
pub spacing: Option<ftd::js::Value>,
pub wrap: Option<ftd::js::Value>,
pub align_content: Option<ftd::js::Value>,
pub backdrop_filter: Option<ftd::js::Value>,
}

impl ContainerProperties {
Expand All @@ -945,6 +946,11 @@ impl ContainerProperties {
properties,
arguments,
),
backdrop_filter: ftd::js::value::get_optional_js_value(
"backdrop-filter",
properties,
arguments,
),
}
}

Expand Down Expand Up @@ -976,6 +982,16 @@ impl ContainerProperties {
spacing.to_set_property(fastn_js::PropertyKind::Spacing, doc, element_name, rdata),
));
}
if let Some(ref backdrop_filter) = self.backdrop_filter {
component_statements.push(fastn_js::ComponentStatement::SetProperty(
backdrop_filter.to_set_property(
fastn_js::PropertyKind::BackdropFilter,
doc,
element_name,
rdata,
),
));
}
component_statements
}
}
Expand Down
Loading

0 comments on commit d3ec7f4

Please sign in to comment.