protected static HtmlTag ToggleInputRender(AdaptiveToggleInput toggleInput, AdaptiveRendererContext context)
{
var htmlLabelId = GenerateRandomId();
var uiElement = new DivTag()
.AddClass("ac-input")
.Style("width", "100%");
var uiCheckboxInput = new HtmlTag("input")
.Attr("id", htmlLabelId)
.Attr("type", "checkbox")
.Attr("name", toggleInput.Id)
.Attr("data-ac-valueOn", toggleInput.ValueOn ?? bool.TrueString)
.Attr("data-ac-valueOff", toggleInput.ValueOff ?? bool.FalseString)
.Style("display", "inline-block")
.Style("vertical-align", "middle")
.Style("margin", "0px");
if (toggleInput.Value == toggleInput.ValueOn)
{
uiCheckboxInput.Attr("checked", string.Empty);
}
var uiLabel = CreateLabel(htmlLabelId, toggleInput.Title, context);
return(uiElement.Append(uiCheckboxInput).Append(uiLabel));
}
protected static void AddSeparator(HtmlTag uiContainer, AdaptiveElement adaptiveElement, AdaptiveRendererContext context)
{
if (!adaptiveElement.Separator && adaptiveElement.Spacing == AdaptiveSpacing.None)
{
return;
}
int spacing = context.Config.GetSpacing(adaptiveElement.Spacing);
if (adaptiveElement.Separator)
{
SeparatorConfig sep = context.Config.Separator;
var uiSep = new DivTag()
.AddClass("ac-separator")
.Style("padding-top", $"{spacing / 2}px")
.Style("margin-top", $"{spacing / 2}px")
.Style("border-top-color", $"{context.GetRGBColor(sep.LineColor)}")
.Style("border-top-width", $"{sep.LineThickness}px")
.Style("border-top-style", "solid");
uiContainer.Children.Add(uiSep);
}
else
{
var uiSep = new DivTag()
.AddClass("ac-separator")
.Style("height", $"{spacing}px");
uiContainer.Children.Add(uiSep);
}
}
protected static HtmlTag AdaptiveCardRender(AdaptiveCard card, AdaptiveRendererContext context)
{
var uiCard = new DivTag()
.AddClass($"ac-{card.Type.ToLower()}")
.Style("width", "100%")
.Style("background-color", context.GetRGBColor(context.Config.ContainerStyles.Default.BackgroundColor))
.Style("padding", $"{context.Config.Spacing.Padding}px")
.Style("box-sizing", "border-box");
if (!string.IsNullOrEmpty(context.Config.FontFamily))
{
uiCard.Style("font-family", context.Config.FontFamily);
}
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 AdaptiveCardRender(AdaptiveCard card, AdaptiveRenderContext context)
{
var uiCard = new DivTag()
.AddClass($"ac-{card.Type.ToLower()}")
.Style("width", "100%")
.Style("background-color", context.GetRGBColor(context.Config.ContainerStyles.Default.BackgroundColor))
.Style("padding", $"{context.Config.Spacing.Padding}px")
.Style("box-sizing", "border-box");
if (!string.IsNullOrEmpty(context.Config.FontFamily))
{
uiCard.Style("font-family", context.Config.FontFamily);
}
if (card.BackgroundImage != null)
{
uiCard.Style("background-image", $"url('{context.Config.ResolveFinalAbsoluteUri(card.BackgroundImage)}')")
.Style("background-repeat", "no-repeat")
.Style("background-size", "cover");
}
AddContainerElements(uiCard, card.Body, card.Actions, context);
AddSelectAction(uiCard, card.SelectAction, context);
// Add all accumulated selectAction show cards
foreach (var showCard in context.ShowCardTags)
{
uiCard.Children.Add(showCard);
}
return(uiCard);
}
protected static HtmlTag ColumnRender(AdaptiveColumn column, AdaptiveRenderContext context)
{
var uiColumn = new DivTag()
.AddClass($"ac-{column.Type.Replace(".", "").ToLower()}");
AddContainerElements(uiColumn, column.Items, null, context);
AddSelectAction(uiColumn, column.SelectAction, context);
return(uiColumn);
}
protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRenderContext context)
{
var uiContainer = new DivTag()
.AddClass($"ac-{container.Type.Replace(".", "").ToLower()}");
AddContainerElements(uiContainer, container.Items, null, context);
if (context.Config.SupportsInteractivity && container.SelectAction != null)
{
uiContainer.AddClass("ac-selectable");
AddActionAttributes(container.SelectAction, uiContainer, context);
}
return(uiContainer);
}
protected static HtmlTag ImageSetRender(AdaptiveImageSet imageSet, AdaptiveRendererContext context)
{
var uiImageSet = new DivTag()
.AddClass(imageSet.Type.ToLower());
foreach (var image in imageSet.Images)
{
if (imageSet.ImageSize != AdaptiveImageSize.Auto)
{
image.Size = imageSet.ImageSize;
}
var uiImage = context.Render(image);
uiImage = uiImage.Style("display", "inline-block");
uiImageSet.Children.Add(uiImage);
}
return(uiImageSet);
}
protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRendererContext context)
{
var uiContainer = new DivTag()
.AddClass($"ac-{container.Type.Replace(".", "").ToLower()}");
AddContainerElements(uiContainer, container.Items, null, context);
if (context.Config.SupportsInteractivity && container.SelectAction != null)
{
//var uiButton = (Button)RenderAction(container.SelectAction, new RenderContext(this.actionCallback, this.missingDataCallback));
//if (uiButton != null)
//{
// uiButton.Content = uiContainer;
// uiButton.Style = this.GetStyle("Adaptive.Action.Tap");
// return uiButton;
//}
}
return(uiContainer);
}
private static HtmlTag ChoiceSetRenderInternal(AdaptiveChoiceSetInput adaptiveChoiceSetInput, AdaptiveRendererContext context, string htmlInputType)
{
// the default values are specified by a comma separated string input.value
var defaultValues = adaptiveChoiceSetInput.Value?.Split(',').Select(p => p.Trim()).Where(s => !string.IsNullOrEmpty(s)).ToList() ?? new List <string>();
// render as a series of radio buttons
var uiElement = new DivTag()
.AddClass("ac-input")
.Style("width", "100%");
foreach (var choice in adaptiveChoiceSetInput.Choices)
{
var htmlLabelId = GenerateRandomId();
var uiInput = new HtmlTag("input")
.Attr("id", htmlLabelId)
.Attr("type", htmlInputType)
.Attr("name", adaptiveChoiceSetInput.Id)
.Attr("value", choice.Value)
.Style("margin", "0px")
.Style("display", "inline-block")
.Style("vertical-align", "middle");
if (defaultValues.Contains(choice.Value))
{
uiInput.Attr("checked", string.Empty);
}
var uiLabel = CreateLabel(htmlLabelId, choice.Title, context);
var compoundInputElement = new DivTag()
.Append(uiInput)
.Append(uiLabel);
uiElement.Append(compoundInputElement);
}
return(uiElement);
}
private static HtmlTag ChoiceSetRenderInternal(AdaptiveChoiceSetInput adaptiveChoiceSetInput, AdaptiveRenderContext context, string htmlInputType)
{
var defaultValues = ParseChoiceSetInputDefaultValues(adaptiveChoiceSetInput.Value);
// render as a series of radio buttons
var uiElement = new DivTag()
.AddClass("ac-input")
.Style("width", "100%");
foreach (var choice in adaptiveChoiceSetInput.Choices)
{
var htmlLabelId = GenerateRandomId();
var uiInput = new HtmlTag("input")
.Attr("id", htmlLabelId)
.Attr("type", htmlInputType)
.Attr("name", adaptiveChoiceSetInput.Id)
.Attr("value", choice.Value)
.Style("margin", "0px")
.Style("display", "inline-block")
.Style("vertical-align", "middle");
// Only select an option if isMultiSelect is true (checkboxes)
// or there is only one specified value
if (defaultValues.Contains(choice.Value) && (adaptiveChoiceSetInput.IsMultiSelect || defaultValues.Count == 1))
{
uiInput.Attr("checked", string.Empty);
}
var uiLabel = CreateLabel(htmlLabelId, choice.Title, context);
var compoundInputElement = new DivTag()
.Append(uiInput)
.Append(uiLabel);
uiElement.Append(compoundInputElement);
}
return(uiElement);
}
protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRenderContext context)
{
var uiContainer = new DivTag()
.AddClass($"ac-{container.Type.Replace(".", "").ToLower()}");
if (container.Style != null)
{
// Apply background color
var containerStyle = context.Config.ContainerStyles.Default;
if (container.Style == AdaptiveContainerStyle.Emphasis)
{
containerStyle = context.Config.ContainerStyles.Emphasis;
}
uiContainer.Style("background-color", context.GetRGBColor(containerStyle.BackgroundColor));
}
AddContainerElements(uiContainer, container.Items, null, context);
AddSelectAction(uiContainer, container.SelectAction, context);
return(uiContainer);
}
protected static HtmlTag ImageRender(AdaptiveImage image, AdaptiveRendererContext context)
{
var uiDiv = new DivTag()
.AddClass($"ac-{image.Type.Replace(".", "").ToLower()}")
.Style("display", "block")
.Style("box-sizing", "border-box");
switch (image.Size)
{
case AdaptiveImageSize.Auto:
uiDiv = uiDiv.Style("max-width", $"100%");
break;
case AdaptiveImageSize.Small:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Small}px");
break;
case AdaptiveImageSize.Medium:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Medium}px");
break;
case AdaptiveImageSize.Large:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Large}px");
break;
case AdaptiveImageSize.Stretch:
uiDiv = uiDiv.Style("width", $"100%");
break;
}
var uiImage = new HtmlTag("img")
.Style("width", "100%")
.Attr("alt", image.AltText ?? "card image")
.Attr("src", image.Url.ToString());
switch (image.Style)
{
case AdaptiveImageStyle.Default:
break;
case AdaptiveImageStyle.Person:
uiImage = uiImage.Style("background-position", "50% 50%")
.Style("border-radius", "50%")
.Style("background-repeat", "no-repeat");
break;
}
switch (image.HorizontalAlignment)
{
case AdaptiveHorizontalAlignment.Left:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("display", "block");
break;
case AdaptiveHorizontalAlignment.Center:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("margin-right", "auto")
.Style("margin-left", "auto")
.Style("display", "block");
break;
case AdaptiveHorizontalAlignment.Right:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("margin-left", "auto")
.Style("display", "block");
break;
}
uiDiv.Children.Add(uiImage);
if (context.Config.SupportsInteractivity && image.SelectAction != null)
{
uiDiv.AddClass("ac-tap");
}
return(uiDiv);
}
protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRendererContext context)
{
var uiColumnSet = new DivTag()
.AddClass($"ac-{columnSet.Type.Replace(".", "").ToLower()}")
.Style("overflow", "hidden")
.Style("display", "flex");
if (context.Config.SupportsInteractivity && columnSet.SelectAction != null)
{
uiColumnSet.AddClass("ac-tap");
}
var max = Math.Max(1.0, columnSet.Columns.Select(col =>
{
if (col.Width != null && double.TryParse(col.Width, out double widthVal))
{
return(widthVal);
}
#pragma warning disable CS0618 // Type or member is obsolete
if (double.TryParse(col.Size ?? "0", out double val))
#pragma warning restore CS0618 // Type or member is obsolete
{
return(val);
}
return(0);
}).Sum());
foreach (var column in columnSet.Columns)
{
var uiColumn = context.Render(column);
// Add horizontal Seperator
if (uiColumnSet.Children.Any() && (column.Separator || column.Spacing != AdaptiveSpacing.None))
{
SeparatorConfig sep = context.Config.Separator;
int spacing = context.Config.GetSpacing(column.Spacing) / 2;
int lineThickness = column.Separator ? sep.LineThickness : 0;
if (sep != null)
{
uiColumnSet.Children.Add(new DivTag()
.AddClass($"ac-columnseparator")
.Style("flex", "0 0 auto")
.Style("padding-left", $"{spacing}px")
.Style("margin-left", $"{spacing}px")
.Style("border-left-color", $"{context.GetRGBColor(sep.LineColor)}")
.Style("border-left-width", $"{lineThickness}px")
.Style("border-left-style", $"solid"));
}
}
// do some sizing magic
var width = column.Width?.ToLower();
if (string.IsNullOrEmpty(width))
#pragma warning disable CS0618 // Type or member is obsolete
{
width = column.Size?.ToLower();
}
#pragma warning restore CS0618 // Type or member is obsolete
if (width == null || width == AdaptiveColumnWidth.Stretch.ToLower())
{
uiColumn = uiColumn.Style("flex", "1 1 auto");
}
else if (width == AdaptiveColumnWidth.Auto.ToLower())
{
uiColumn = uiColumn.Style("flex", "0 1 auto");
}
else
{
double val;
if (double.TryParse(width, out val))
{
var percent = Convert.ToInt32(100 * (val / max));
uiColumn = uiColumn.Style("flex", $"1 1 {percent}%");
}
else
{
uiColumn = uiColumn.Style("flex", "0 0 auto");
}
}
uiColumnSet.Children.Add(uiColumn);
}
return(uiColumnSet);
}
protected static void AddContainerElements(HtmlTag uiContainer, IList <AdaptiveElement> elements, IList <AdaptiveAction> actions, AdaptiveRendererContext 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())
{
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 AdaptiveHorizontalAlignment.Center:
uiButtonStrip.Style("justify-content", "center");
break;
case AdaptiveHorizontalAlignment.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 AdaptiveHorizontalAlignment.Center:
uiButtonStrip.Style("align-items", "center");
break;
case AdaptiveHorizontalAlignment.Right:
uiButtonStrip.Style("align-items", "flex-end");
break;
case AdaptiveHorizontalAlignment.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] is AdaptiveShowCardAction showCardAction)
{
// add button-card mapping for clients to implement showcard action
//var cardId = "ac-showCard" + i;
//uiAction.Attr("ac-cardId", cardId);
var cardId = uiAction.Attributes["data-ac-showCardId"];
var uiCard = context.Render(showCardAction.Card);
if (uiCard != null)
{
uiCard.Attr("id", cardId)
.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 DivTag();
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())
{
AdaptiveCardRenderer.AddSeparator(uiContainer, new AdaptiveContainer(), context);
uiContainer.Children.Add(uiButtonStrip);
}
if (uiShowCardStrip.Children.Any())
{
uiContainer.Children.Add(uiShowCardStrip);
}
}
}
protected static HtmlTag ImageRender(AdaptiveImage image, AdaptiveRenderContext context)
{
var uiDiv = new DivTag()
.AddClass($"ac-{image.Type.Replace(".", "").ToLower()}")
.Style("display", "block")
.Style("box-sizing", "border-box");
switch (image.Size)
{
case AdaptiveImageSize.Auto:
uiDiv = uiDiv.Style("max-width", $"100%");
break;
case AdaptiveImageSize.Small:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Small}px");
break;
case AdaptiveImageSize.Medium:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Medium}px");
break;
case AdaptiveImageSize.Large:
uiDiv = uiDiv.Style("max-width", $"{context.Config.ImageSizes.Large}px");
break;
case AdaptiveImageSize.Stretch:
uiDiv = uiDiv.Style("width", $"100%");
break;
}
var uiImage = new HtmlTag("img")
.Style("width", "100%")
.Attr("alt", image.AltText ?? "card image")
.Attr("src", context.Config.ResolveFinalAbsoluteUri(image.Url));
switch (image.Style)
{
case AdaptiveImageStyle.Default:
break;
case AdaptiveImageStyle.Person:
uiImage = uiImage.Style("background-position", "50% 50%")
.Style("border-radius", "50%")
.Style("background-repeat", "no-repeat");
break;
}
switch (image.HorizontalAlignment)
{
case AdaptiveHorizontalAlignment.Left:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("display", "block");
break;
case AdaptiveHorizontalAlignment.Center:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("margin-right", "auto")
.Style("margin-left", "auto")
.Style("display", "block");
break;
case AdaptiveHorizontalAlignment.Right:
uiDiv = uiDiv.Style("overflow", "hidden")
.Style("margin-left", "auto")
.Style("display", "block");
break;
}
if (!string.IsNullOrEmpty(image.BackgroundColor))
{
uiImage.Style("background-color", context.GetRGBColor(image.BackgroundColor));
}
uiDiv.Children.Add(uiImage);
AddSelectAction(uiDiv, image.SelectAction, context);
return(uiDiv);
}
protected static void AddContainerElements(HtmlTag uiContainer, IList <AdaptiveElement> elements, IList <AdaptiveAction> actions, AdaptiveRenderContext 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())
{
AddSeparator(uiContainer, cardElement, context);
}
uiContainer.Children.Add(uiElement);
}
}
}
if (context.Config.SupportsInteractivity && actions != null)
{
var uiButtonStrip = new DivTag()
.AddClass("ac-actionset")
.Style("display", "flex");
var actionsConfig = context.Config.Actions;
// TODO: This top marging is currently being double applied, will have to investigate later
//.Style("margin-top", $"{context.Config.GetSpacing(context.Config.Actions.Spacing)}px");
// contains ShowCardAction.AdaptiveCard
var showCards = new List <HtmlTag>();
if (actionsConfig.ActionsOrientation == ActionsOrientation.Horizontal)
{
uiButtonStrip.Style("flex-direction", "row");
switch (actionsConfig.ActionAlignment)
{
case AdaptiveHorizontalAlignment.Center:
uiButtonStrip.Style("justify-content", "center");
break;
case AdaptiveHorizontalAlignment.Right:
uiButtonStrip.Style("justify-content", "flex-end");
break;
default:
uiButtonStrip.Style("justify-content", "flex-start");
break;
}
}
else
{
uiButtonStrip.Style("flex-direction", "column");
switch (actionsConfig.ActionAlignment)
{
case AdaptiveHorizontalAlignment.Center:
uiButtonStrip.Style("align-items", "center");
break;
case AdaptiveHorizontalAlignment.Right:
uiButtonStrip.Style("align-items", "flex-end");
break;
case AdaptiveHorizontalAlignment.Stretch:
uiButtonStrip.Style("align-items", "stretch");
break;
default:
uiButtonStrip.Style("align-items", "flex-start");
break;
}
}
var maxActions = Math.Min(actionsConfig.MaxActions, actions.Count);
// See if all actions have icons, otherwise force the icon placement to the left
var oldConfigIconPlacement = actionsConfig.IconPlacement;
bool allActionsHaveIcons = true;
for (var i = 0; i < maxActions; i++)
{
if (string.IsNullOrEmpty(actions[i].IconUrl))
{
allActionsHaveIcons = false;
break;
}
}
if (!allActionsHaveIcons)
{
actionsConfig.IconPlacement = IconPlacement.LeftOfTitle;
}
for (var i = 0; i < maxActions; i++)
{
// add actions
var uiAction = context.Render(actions[i]);
if (uiAction != null)
{
if (actions[i] is AdaptiveShowCardAction showCardAction)
{
var cardId = uiAction.Attributes["data-ac-showCardId"];
var uiCard = context.Render(showCardAction.Card);
if (uiCard != null)
{
uiCard.Attr("id", cardId)
.AddClass("ac-showCard")
.Style("padding", "0")
.Style("display", "none")
.Style("margin-top", $"{actionsConfig.ShowCard.InlineTopMargin}px");
showCards.Add(uiCard);
}
}
uiButtonStrip.Children.Add(uiAction);
}
// add spacer between buttons according to config
if (i < maxActions - 1 && actionsConfig.ButtonSpacing > 0)
{
var uiSpacer = new DivTag();
if (actionsConfig.ActionsOrientation == ActionsOrientation.Horizontal)
{
uiSpacer.Style("flex", "0 0 auto");
uiSpacer.Style("width", actionsConfig.ButtonSpacing + "px");
}
else
{
uiSpacer.Style("height", actionsConfig.ButtonSpacing + "px");
}
uiButtonStrip.Children.Add(uiSpacer);
}
}
if (uiButtonStrip.Children.Any())
{
AdaptiveCardRenderer.AddSeparator(uiContainer, new AdaptiveContainer(), context);
uiContainer.Children.Add(uiButtonStrip);
}
foreach (var showCard in showCards)
{
uiContainer.Children.Add(showCard);
}
// Restore the iconPlacement for the context.
actionsConfig.IconPlacement = oldConfigIconPlacement;
}
}
