Skip to content

Commit

Permalink
mask-image property added
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshdoesdev
harshdoesdev committed Oct 23, 2023
1 parent 44682ee commit 2e3579b
Show file tree
Hide file tree
Showing 9 changed files with 75 additions and 555 deletions.
112 changes: 39 additions & 73 deletions fastn-js/js/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ fastn_dom.propertyMap = {
"-webkit-box-orient": "wbo",
"-webkit-line-clamp": "wlc",
"backdrop-filter": "bdf",
"mask": "mask",
"mask-image": "mi",
"-webkit-mask-image": "wmi",
};

// dynamic-class-css.md
Expand Down Expand Up @@ -281,7 +282,7 @@ fastn_dom.PropertyKind = {
TextShadow: 117,
Selectable: 118,
BackdropFilter: 119,
Mask: 120,
MaskImage: 120,
};


Expand Down Expand Up @@ -667,69 +668,6 @@ fastn_dom.MaskImage = {
},
}

fastn_dom.MaskClip = {
BorderBox: (value) => {
return [1, value];
},
ContentBox: (value) => {
return [2, value];
},
PaddingBox: (value) => {
return [3, value];
},
FillBox: (value) => {
return [4, value];
},
StrokeBox: (value) => {
return [5, value];
},
ViewBox: (value) => {
return [6, value];
},
NoClip: (value) => {
return [7, value];
},
Multi: (value) => {
return [8, value];
},
}

fastn_dom.MaskComposite = {
Add: (value) => {
return [1, value];
},
Subtract: (value) => {
return [2, value];
},
Intersect: (value) => {
return [3, value];
},
Exclude: (value) => {
return [4, value];
},
Revert: (value) => {
return [5, value];
},
RevertLayer: (value) => {
return [6, value];
},
}

fastn_dom.MaskMode = {
Alpha: (value) => {
return [1, value];
},
Luminance: (value) => {
return [2, value];
},
MatchSource: (value) => {
return [3, value];
},
Multi: (value) => {
return [4, value];
},
}

fastn_dom.Event = {
Click: 0,
MouseEnter: 1,
Expand Down Expand Up @@ -1128,9 +1066,9 @@ class Node2 {
this.attachCss("text-shadow", darkShadowCss, true, `body.dark .${lightClass}`);
}
}
attachLinearGradientCss(value) {
attachLinearGradientCss(value, property = "background-image") {
if (fastn_utils.isNull(value)) {
this.attachCss("background-image", value);
this.attachCss(property, value);
return;
}
var lightGradientString = "";
Expand Down Expand Up @@ -1175,10 +1113,10 @@ class Node2 {
darkGradientString = darkGradientString.trim().slice(0, -1);

if (lightGradientString === darkGradientString) {
this.attachCss("background-image", `linear-gradient(${direction}, ${lightGradientString})`, false);
this.attachCss(property, `linear-gradient(${direction}, ${lightGradientString})`, false);
} else {
let lightClass = this.attachCss("background-image", `linear-gradient(${direction}, ${lightGradientString})`,true);
this.attachCss("background-image", `linear-gradient(${direction}, ${darkGradientString})`, true, `body.dark .${lightClass}`);
let lightClass = this.attachCss(property, `linear-gradient(${direction}, ${lightGradientString})`,true);
this.attachCss(property, `linear-gradient(${direction}, ${darkGradientString})`, true, `body.dark .${lightClass}`);
}
}
attachBackgroundImageCss(value) {
Expand Down Expand Up @@ -1233,6 +1171,23 @@ class Node2 {
this.attachCss("background-image", `url(${darkValue})`, true, `body.dark .${lightClass}`);
}
}
attachMaskImageCss(value, vendorPrefix) {
const propWithPrefix = vendorPrefix ? `${vendorPrefix}-mask-image` : "mask-image";
if (fastn_utils.isNull(value)) {
this.attachCss(propWithPrefix, value);
return;
}

let lightValue = fastn_utils.getStaticValue(value.get("light"));
let darkValue = fastn_utils.getStaticValue(value.get("dark"));

if (lightValue === darkValue) {
this.attachCss(propWithPrefix, `url(${lightValue})`, false);
} else {
let lightClass = this.attachCss(propWithPrefix, `url(${lightValue})`, true);
this.attachCss(propWithPrefix, `url(${darkValue})`, true, `body.dark .${lightClass}`);
}
}
attachExternalCss(css) {
if (hydrating) {
let css_tag = document.createElement('link');
Expand Down Expand Up @@ -1605,13 +1560,24 @@ class Node2 {
this.attachBackdropMultiFilter(staticValue[1]);
break;
}
} else if (kind === fastn_dom.PropertyKind.Mask) {
} else if (kind === fastn_dom.PropertyKind.MaskImage) {
if (fastn_utils.isNull(staticValue)) {
this.attachCss("backdrop-filter", staticValue);
this.attachCss("mask-image", staticValue);
return;
}

// todo
const [backgroundType, value] = staticValue;

switch (backgroundType) {
case fastn_dom.MaskImage.Src()[0]:
this.attachMaskImageCss(value);
this.attachMaskImageCss(value, "-webkit");
break;
case fastn_dom.MaskImage.LinearGradient()[0]:
this.attachMaskLinearGradientCss(value, "mask-image");
this.attachMaskLinearGradientCss(value, "-webkit-mask-image");
break;
}
} else if (kind === fastn_dom.PropertyKind.Classes) {
fastn_utils.removeNonFastnClasses(this);
if (!fastn_utils.isNull(staticValue)) {
Expand Down
4 changes: 2 additions & 2 deletions fastn-js/src/property.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ pub enum PropertyKind {
Favicon,
Selectable,
BackdropFilter,
Mask,
MaskImage,
}

impl PropertyKind {
Expand Down Expand Up @@ -567,7 +567,7 @@ impl PropertyKind {
PropertyKind::Favicon => "fastn_dom.PropertyKind.Favicon",
PropertyKind::Selectable => "fastn_dom.PropertyKind.Selectable",
PropertyKind::BackdropFilter => "fastn_dom.PropertyKind.BackdropFilter",
PropertyKind::Mask => "fastn_dom.PropertyKind.Mask",
PropertyKind::MaskImage => "fastn_dom.PropertyKind.MaskImage",
}
}
}
29 changes: 0 additions & 29 deletions ftd/src/interpreter/constants.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,35 +331,6 @@ 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";

pub const FTD_MASK: &str = "ftd#mask";
pub const FTD_MASK_IMAGE: &str = "ftd#mask-image";
pub const FTD_MASK_IMAGE_SRC: &str = "ftd#mask-image.src";
pub const FTD_MASK_IMAGE_LINEAR_GRADIENT: &str = "ftd#mask-image.linear-gradient";

pub const FTD_MASK_CLIP: &str = "ftd#mask-clip";
pub const FTD_MASK_CLIP_CONTENT_BOX: &str = "ftd#mask-clip.content-box";
pub const FTD_MASK_CLIP_PADDING_BOX: &str = "ftd#mask-clip.padding-box";
pub const FTD_MASK_CLIP_BORDER_BOX: &str = "ftd#mask-clip.border-box";
pub const FTD_MASK_CLIP_FILL_BOX: &str = "ftd#mask-clip.fill-box";
pub const FTD_MASK_CLIP_STROKE_BOX: &str = "ftd#mask-clip.stroke-box";
pub const FTD_MASK_CLIP_VIEW_BOX: &str = "ftd#mask-clip.view-box";
pub const FTD_MASK_CLIP_NO_CLIP: &str = "ftd#mask-clip.no-clip";
pub const FTD_MASK_CLIP_MULTI_VALUES: &str = "ftd#mask-clip.multi";

pub const FTD_MASK_CLIP_MULTI: &str = "ftd#mask-clip-multi";

pub const FTD_MASK_COMPOSITE: &str = "ftd#mask-composite";
pub const FTD_MASK_COMPOSITE_ADD: &str = "ftd#mask-composite.add";
pub const FTD_MASK_COMPOSITE_SUBTRACT: &str = "ftd#mask-composite.subtract";
pub const FTD_MASK_COMPOSITE_INTERSECT: &str = "ftd#mask-composite.intersect";
pub const FTD_MASK_COMPOSITE_EXCLUDE: &str = "ftd#mask-composite.exclude";
pub const FTD_MASK_COMPOSITE_REVERT: &str = "ftd#mask-composite.revert";
pub const FTD_MASK_COMPOSITE_REVERT_LAYER: &str = "ftd#mask-composite.revert-layer";

pub const FTD_MASK_MODE: &str = "ftd#mask-mode";
pub const FTD_MASK_MODE_ALPHA: &str = "ftd#mask-mode.alpha";
pub const FTD_MASK_MODE_LUMINANCE: &str = "ftd#mask-mode.luminance";
pub const FTD_MASK_MODE_MATCH_SOURCE: &str = "ftd#mask-mode.match-source";
pub const FTD_MASK_MODE_MULTI_VALUES: &str = "ftd#mask-mode.multi";

pub const FTD_MASK_MODE_MULTI: &str = "ftd#mask-mode-multi";
Loading

0 comments on commit 2e3579b

Please sign in to comment.