Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

backdrop-filter property added #1387

Merged
merged 5 commits into from
Oct 18, 2023
Merged

backdrop-filter property added #1387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba5b519
backdrop-filter property added on containers
harshdoesdev Oct 17, 2023
79eb9d7
changed backdrop-filter to or-type
Heulitig Oct 18, 2023
dee11a5
tests fixed
Heulitig Oct 18, 2023
8dd2527
Merge branch 'main' of https://github.com/fastn-stack/fastn into back…
Heulitig Oct 18, 2023
697c3e9
fixed js tests
Heulitig Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 87 additions & 1 deletion fastn-js/js/dom.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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