private string GetWidth()
{
string width = GetAttribute("width");
CssParsedUnit parsedWidth = CssUnitParser.Parse(width);
return(parsedWidth.Unit == "%" ? width : $"{parsedWidth.Value}px");
}
// https://github.com/mjmlio/mjml/blob/d4c6ea0744e05c928044108c3117c16a9c4110fe/packages/mjml-core/src/createComponent.js#L115
public virtual CssBoxModel GetBoxModel()
{
// LR: Default to the outmost container
CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth);
var paddings =
GetShorthandAttributeValue("padding", "right") +
GetShorthandAttributeValue("padding", "left");
var borders =
GetShorthandBorderValue("right") +
GetShorthandBorderValue("left");
// LR: Try and get the parents calculated Box Model size.
if (HasParentComponent())
{
var parent = GetParentComponent() as BodyComponent;
// LR: Calculate based of the parents inner width (width after removing paddings and borders)
containerWidth.Value = parent.GetContainerInnerWidth() - paddings - borders;
return(new CssBoxModel(
parent.GetContainerInnerWidth(),
borders,
paddings,
containerWidth.Value
));
}
return(new CssBoxModel(
containerWidth.Value,
borders,
paddings,
containerWidth.Value));
}
public string GetContentWidth()
{
CssParsedUnit width = HasAttribute("width") ?
CssUnitParser.Parse(GetAttribute("width")) :
CssUnitParser.Parse($"{999999}px");
return(width.Value < GetContainerInnerWidth() ? width.ToString() : $"{GetContainerInnerWidth()}px");
}
public override CssBoxModel GetBoxModel()
{
// LR: Default to the outmost container
CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth);
// LR: Try and get the parents calculated Box Model size.
if (HasParentComponent())
{
var parent = GetParentComponent() as BodyComponent;
// LR: Get columns in this section
ParentSectionColumnCount = GetSectionColumnCount();
// LR: Parent section width
var sectionWidth = parent.CssBoxModel.BoxWidth;
// LR: Column has width attribute?
if (HasAttribute("width"))
{
ContainerWidth = GetAttribute("width");
}
else
{
ContainerWidth = $"{sectionWidth / ParentSectionColumnCount}px";
}
// LR: Parse the calculated width
CssParsedUnit parsedWidth = CssUnitParser.Parse(ContainerWidth);
// LR: Handle Percentage values
if (parsedWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase))
{
parsedWidth.Value = sectionWidth * parsedWidth.Value / 100;
ContainerWidth = $"{parsedWidth.Value}px";
}
else
{
ContainerWidth = $"{parsedWidth.Value}px";
}
// LR: Calculated column width
var columnWidth = CssUnitParser.Parse(ContainerWidth);
return(new CssBoxModel(
parsedWidth.Value,
0,
0,
columnWidth.Value
));
}
return(new CssBoxModel(
containerWidth.Value,
0,
0,
containerWidth.Value));
}
public CssParsedUnit GetParsedWidth()
{
string width = string.Empty;
if (HasAttribute("width"))
{
width = GetAttribute("width");
}
else
{
width = $"{100 / GetSectionColumnCount()}%";
}
CssParsedUnit parsedWidth = CssUnitParser.Parse(width);
return(parsedWidth);
}
public string CalculateAWidth(string content)
{
if (string.IsNullOrWhiteSpace(content))
{
return(null);
}
CssParsedUnit parsedWidth = CssUnitParser.Parse(content);
if (!parsedWidth.Unit.Equals("px"))
{
return(null);
}
var borders = CssBoxModel.BorderWidth;
var innerPaddings =
GetShorthandAttributeValue("inner-padding", "left") +
GetShorthandAttributeValue("inner-padding", "right");
return($"{parsedWidth.Value - innerPaddings - borders}px");
}
public override CssBoxModel GetBoxModel()
{
// LR: Default to the outmost container
CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth);
// LR: Get Padding
var paddings =
GetShorthandAttributeValue("padding", "right") +
GetShorthandAttributeValue("padding", "left");
// LR: Get Borders
var borders =
GetShorthandBorderValue("right") +
GetShorthandBorderValue("left");
// LR: Get inner-borders
float innerBorders =
GetShorthandAttributeValue("inner-border", "left") +
GetShorthandAttributeValue("inner-border", "right");
// LR: All padding
float allPaddings = paddings + borders + innerBorders;
// LR: Try and get the parents calculated Box Model size.
if (HasParentComponent())
{
var parent = GetParentComponent() as BodyComponent;
// LR: Get columns in this section
ParentSectionColumnCount = GetSectionColumnCount();
// LR: Parent section width
var sectionWidth = parent.CssBoxModel.BoxWidth;
// LR: Column has width attribute?
if (HasAttribute("width"))
{
ContainerWidth = GetAttribute("width");
}
else
{
ContainerWidth = $"{sectionWidth / ParentSectionColumnCount}px";
}
// LR: Parse the calculated width
CssParsedUnit parsedWidth = CssUnitParser.Parse(ContainerWidth);
// LR: Handle Percentage values
if (parsedWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase))
{
parsedWidth.Value = (sectionWidth * parsedWidth.Value / 100);
ContainerWidth = $"{parsedWidth.Value - allPaddings}";
}
else
{
ContainerWidth = $"{parsedWidth.Value - allPaddings}px";
}
// LR: Calculated column width
var columnWidth = CssUnitParser.Parse(ContainerWidth);
return(new CssBoxModel(
parsedWidth.Value,
borders,
paddings,
columnWidth.Value
));
}
return(new CssBoxModel(
containerWidth.Value,
borders,
paddings,
containerWidth.Value));
}
public string RenderWithBackground(string content)
{
CssParsedUnit containerWidth = CssUnitParser.Parse($"{GetContainerOuterWidth()}");
bool isFullWidth = IsFullWidth();
bool isPercentage = containerWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase);
CssCoordinate backgroundPosition = GetBackgroundPosition();
// LR: Convert direction to Percentage X
switch (backgroundPosition.X)
{
case "left":
backgroundPosition.X = "0%";
break;
case "center":
backgroundPosition.X = "50%";
break;
case "right":
backgroundPosition.X = "100%";
break;
default:
if (!backgroundPosition.X.ToString().Contains("%"))
{
backgroundPosition.X = "50%";
}
break;
}
// LR: Convert direction to Percentage Y
switch (backgroundPosition.Y)
{
case "top":
backgroundPosition.Y = "0%";
break;
case "center":
backgroundPosition.Y = "50%";
break;
case "bottom":
backgroundPosition.Y = "100%";
break;
default:
if (!backgroundPosition.Y.ToString().Contains("%"))
{
backgroundPosition.Y = "0%";
}
break;
}
// LR: Calculate position to origin
// X = Axis Origin, Y = Axis Position
// This logic is different when using repeat or no-repeat
var originX = CalculateBackgroundAxisOrigin("x", backgroundPosition);
var originY = CalculateBackgroundAxisOrigin("y", backgroundPosition);
Dictionary <string, string> vSizeAttributes = new Dictionary <string, string>();
// If background size is either cover or contain, we tell VML to keep the aspect
// and fill the entire element.
if (GetAttribute("background-size").Equals("cover", StringComparison.InvariantCultureIgnoreCase) ||
GetAttribute("background-size").Equals("contain", StringComparison.InvariantCultureIgnoreCase))
{
vSizeAttributes = new Dictionary <string, string>
{
{ "size", "1,1" },
{
"aspect",
GetAttribute("background-size").Equals("cover", StringComparison.InvariantCultureIgnoreCase) ? "atleast" : "atmost"
},
};
}
else if (!GetAttribute("background-size").Equals("auto", StringComparison.InvariantCultureIgnoreCase))
{
string backgroundSize = GetAttribute("background-size");
var bgSplit = backgroundSize.Split(' ');
if (bgSplit.Length.Equals(1))
{
vSizeAttributes = new Dictionary <string, string>
{
{ "size", GetAttribute("background-size") },
{ "aspect", "atmost" }, // reproduces height auto
};
}
else
{
vSizeAttributes = new Dictionary <string, string>
{
{ "size", backgroundSize.Replace(' ', ',') },
};
}
}
var vmlType = GetAttribute("background-repeat").Equals("no-repeat", StringComparison.InvariantCultureIgnoreCase) ? "frame" : "tile";
if (GetAttribute("background-size").Equals("auto", StringComparison.InvariantCultureIgnoreCase))
{
vmlType = "tile"; // If no size provided, keep old behavior because outlook can't use original image size with "frame"
// Also ensure that images are still cropped the same way
originX = new CssCoordinate("0.5", "0.5");
originY = new CssCoordinate("0", "0");
}
return($@"
<!--[if mso | IE]>
<v:rect {HtmlAttributes(new Dictionary<string, string> {
{ "style",
isFullWidth ?
InlineCss(new Dictionary<string, string>{ { "mso-width-percent", "1000"} }) :
InlineCss(new Dictionary<string, string>{ { "width", $"{GetContainerOuterWidth()}px" } })
},
{ "xmlns:v", "urn:schemas-microsoft-com:vml"},
{ "fill", "true"},
{ "stroke", "false"},
})}>
<v:fill {HtmlAttributes(new Dictionary<string, string>
{
{ "origin", $"{originX.X}, {originY.X}"},
{ "position", $"{originX.Y}, {originY.Y}" },
{ "src", GetAttribute("background-url") },
{ "color", GetAttribute("background-color") },
{ "type", vmlType }
}.MergeLeft(vSizeAttributes))} />
<v:textbox style=""mso-fit-shape-to-text:true"" inset=""0,0,0,0"">
<![endif]-->
{content}
<!--[if mso | IE]>
</v:textbox>
</v:rect>
<![endif]-->
");
}
