protected override HtmlTag CreateTag()
{
var label = new HtmlTag("label").Attr("for", _id);
if (_mandatory && !_control.HandlesMandatoryInline())
{
label.Append(NewMandatory());
}
label.Append(new HtmlTag("span").Text(_labelText));
var controlTag = _control.GenerateTag(_mandatory);
var inputWrapper = new DivTag().AddClasses("input-wrapper").Append(controlTag);
var formGroup = new DivTag()
.Id(_id + "_FormGroup")
.AddClasses("form-group")
.Append(label)
.Append(inputWrapper);
if (!string.IsNullOrWhiteSpace(_hintHtml))
{
var hint = new HtmlTag("p").AddClasses("help-block").AppendHtml(_hintHtml);
label.Append(hint);
}
if (_controlWidth.HasValue && _controlWidth.Value != ControlWidth.Max)
{
inputWrapper.AddClass("control-width-" + _controlWidth.Value.ToString().ToLower());
}
if (_initiallyHidden)
{
formGroup.AddClasses("initially-hidden");
}
if (!_visible)
{
formGroup.Style("display", "none");
}
if (!string.IsNullOrWhiteSpace(_ajaxOnChangeAction))
{
formGroup.Attr("data-ajax-change", UrlHelper.Content(_ajaxOnChangeAction));
}
return(formGroup);
}
protected static HtmlTag AdaptiveCardRender(AdaptiveCard card, RenderContext context)
{
var uiCard = new DivTag()
.AddClass($"ac-{card.Type.ToLower()}")
.Style("width", "100%")
.Style("background-color", context.GetRGBColor(context.Config.ContainerStyles.Default.BackgroundColor))
.Style("box-sizing", "border-box");
if (card.BackgroundImage != null)
{
uiCard = uiCard.Style("background-image", $"url('{card.BackgroundImage}')")
.Style("background-repeat", "no-repeat")
.Style("background-size", "cover");
}
AddContainerElements(uiCard, card.Body, card.Actions, context);
return(uiCard);
}
protected static HtmlTag TextBlockRender(TypedElement element, RenderContext context)
{
TextBlock textBlock = (TextBlock)element;
int fontSize;
switch (textBlock.Size)
{
case TextSize.Small:
fontSize = context.Config.FontSizes.Small;
break;
case TextSize.Medium:
fontSize = context.Config.FontSizes.Medium;
break;
case TextSize.Large:
fontSize = context.Config.FontSizes.Large;
break;
case TextSize.ExtraLarge:
fontSize = context.Config.FontSizes.ExtraLarge;
break;
case TextSize.Normal:
default:
fontSize = context.Config.FontSizes.Normal;
break;
}
int weight = 400;
switch (textBlock.Weight)
{
case TextWeight.Lighter:
weight = 200;
break;
case TextWeight.Bolder:
weight = 600;
break;
}
var lineHeight = fontSize * 1.2;
var uiTextBlock = new DivTag()
.AddClass($"ac-{element.Type.Replace(".", "").ToLower()}")
.Style("text-align", textBlock.HorizontalAlignment.ToString().ToLower())
.Style("box-sizing", "border-box")
.Style("color", context.GetColor(textBlock.Color, textBlock.IsSubtle))
.Style("line-height", $"{lineHeight.ToString("F")}px")
.Style("font-size", $"{fontSize}px")
.Style("font-weight", $"{weight}");
if (!String.IsNullOrEmpty(context.Config.FontFamily))
{
uiTextBlock = uiTextBlock
.Style("font-family", context.Config.FontFamily);
}
if (textBlock.MaxLines > 0)
{
uiTextBlock = uiTextBlock
.Style("max-height", $"{lineHeight * textBlock.MaxLines}px")
.Style("overflow", "hidden");
}
var setWrapStyleOnParagraph = false;
if (textBlock.Wrap == false)
{
uiTextBlock = uiTextBlock
.Style("white-space", "nowrap");
setWrapStyleOnParagraph = true;
}
else
{
uiTextBlock = uiTextBlock
.Style("word-wrap", "break-word");
}
var textTags = MarkdownToHtmlTagConverter.Convert(RendererUtilities.ApplyTextFunctions(textBlock.Text));
uiTextBlock.Children.AddRange(textTags);
Action <HtmlTag> setParagraphStyles = null;
setParagraphStyles = (HtmlTag htmlTag) =>
{
if (htmlTag.Element?.ToLowerInvariant() == "p")
{
htmlTag.Style("margin-top", "0px");
htmlTag.Style("margin-bottom", "0px");
htmlTag.Style("width", "100%");
if (setWrapStyleOnParagraph)
{
htmlTag.Style("text-overflow", "ellipsis");
htmlTag.Style("overflow", "hidden");
}
}
foreach (var child in htmlTag.Children)
{
setParagraphStyles(child);
}
};
setParagraphStyles(uiTextBlock);
return(uiTextBlock);
}
protected static void AddContainerElements(HtmlTag uiContainer, List <CardElement> elements, List <ActionBase> actions, RenderContext context)
{
if (elements != null)
{
foreach (var cardElement in elements)
{
// each element has a row
var uiElement = context.Render(cardElement);
if (uiElement != null)
{
if (uiContainer.Children.Any())
{
HtmlRenderer.AddSeparator(uiContainer, cardElement, context);
}
uiContainer.Children.Add(uiElement);
}
}
}
if (context.Config.SupportsInteractivity && actions != null)
{
var uiButtonStrip = new DivTag()
.AddClass("ac-actionset")
.Style("display", "flex");
// contains ShowCardAction.AdaptiveCard
var uiShowCardStrip = new DivTag()
.Style("margin-top", context.Config.Actions.ShowCard.InlineTopMargin + "px");
if (context.Config.Actions.ActionsOrientation == ActionsOrientation.Horizontal)
{
uiButtonStrip.Style("flex-direction", "row");
switch (context.Config.Actions.ActionAlignment)
{
case HorizontalAlignment.Center:
uiButtonStrip.Style("justify-content", "center");
break;
case HorizontalAlignment.Right:
uiButtonStrip.Style("justify-content", "flex-end");
break;
default:
uiButtonStrip.Style("justify-content", "flex-start");
break;
}
}
else
{
uiButtonStrip.Style("flex-direction", "column");
switch (context.Config.Actions.ActionAlignment)
{
case HorizontalAlignment.Center:
uiButtonStrip.Style("align-items", "center");
break;
case HorizontalAlignment.Right:
uiButtonStrip.Style("align-items", "flex-end");
break;
case HorizontalAlignment.Stretch:
uiButtonStrip.Style("align-items", "stretch");
break;
default:
uiButtonStrip.Style("align-items", "flex-start");
break;
}
}
var maxActions = Math.Min(context.Config.Actions.MaxActions, actions.Count);
for (var i = 0; i < maxActions; i++)
{
// add actions
var uiAction = context.Render(actions[i]);
if (uiAction != null)
{
if (actions[i].Type == ShowCardAction.TYPE)
{
// add button-card mapping for clients to implement showcard action
var cardId = "ac-showCard" + i;
uiAction.Attr("ac-cardId", cardId);
var uiCard = context.Render(((ShowCardAction)actions[i]).Card);
if (uiCard != null)
{
uiCard.Attr(cardId, string.Empty)
.AddClass("ac-showCard")
.Style("display", "none");
uiShowCardStrip.Children.Add(uiCard);
}
}
uiButtonStrip.Children.Add(uiAction);
}
// add spacer between buttons according to config
if (i < maxActions - 1 && context.Config.Actions.ButtonSpacing > 0)
{
var uiSpacer = new HtmlTag("div");
if (context.Config.Actions.ActionsOrientation == ActionsOrientation.Horizontal)
{
uiSpacer.Style("flex", "0 0 auto");
uiSpacer.Style("width", context.Config.Actions.ButtonSpacing + "px");
}
else
{
uiSpacer.Style("height", context.Config.Actions.ButtonSpacing + "px");
}
uiButtonStrip.Children.Add(uiSpacer);
}
}
if (uiButtonStrip.Children.Any())
{
HtmlRenderer.AddSeparator(uiContainer, new ActionSet(), context);
uiContainer.Children.Add(uiButtonStrip);
}
if (uiShowCardStrip.Children.Any())
{
uiContainer.Children.Add(uiShowCardStrip);
}
}
}
protected static HtmlTag TextBlockRender(TypedElement element, RenderContext context)
{
TextBlock textBlock = (TextBlock)element;
int fontSize;
switch (textBlock.Size)
{
case TextSize.Small:
fontSize = context.Config.FontSizes.Small;
break;
case TextSize.Medium:
fontSize = context.Config.FontSizes.Medium;
break;
case TextSize.Large:
fontSize = context.Config.FontSizes.Large;
break;
case TextSize.ExtraLarge:
fontSize = context.Config.FontSizes.ExtraLarge;
break;
case TextSize.Normal:
default:
fontSize = context.Config.FontSizes.Normal;
break;
}
int weight = 400;
switch (textBlock.Weight)
{
case TextWeight.Lighter:
weight = 200;
break;
case TextWeight.Bolder:
weight = 600;
break;
}
var lineHeight = fontSize * 1.2;
var uiTextBlock = new DivTag()
.AddClass($"ac-{element.Type.Replace(".", "").ToLower()}")
.Style("text-align", textBlock.HorizontalAlignment.ToString().ToLower())
.Style("box-sizing", "border-box")
.Style("color", context.GetColor(textBlock.Color, textBlock.IsSubtle))
.Style("line-height", $"{lineHeight.ToString("F")}px")
.Style("font-size", $"{fontSize}px")
.Style("font-weight", $"{weight}");
if (!String.IsNullOrEmpty(context.Config.FontFamily))
{
uiTextBlock = uiTextBlock
.Style("font-family", context.Config.FontFamily);
}
if (textBlock.MaxLines > 0)
{
uiTextBlock = uiTextBlock
.Style("max-height", $"{lineHeight * textBlock.MaxLines}px")
.Style("overflow", "hidden");
}
var wrapStyle = "";
if (textBlock.Wrap == false)
{
uiTextBlock = uiTextBlock
.Style("white-space", "nowrap");
wrapStyle = "text-overflow: ellipsis; overflow: hidden";
}
else
{
uiTextBlock = uiTextBlock
.Style("word-wrap", "break-word");
}
var marked = new Marked();
marked.Options.Mangle = false;
marked.Options.Sanitize = true;
var html = marked.Parse(RendererUtilities.ApplyTextFunctions(textBlock.Text))
.Replace("<p>", $"<p style='margin-top: 0px;margin-bottom: 0px;width: 100%{wrapStyle}'>");
uiTextBlock.Children.Add(new LiteralTag(html));
return(uiTextBlock);
}