Skip to content

Commit

Permalink
bootstrap 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@LazZiya
LazZiya committed Nov 27, 2021
1 parent 7573ad0 commit 9a677a3
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 30 deletions.
95 changes: 75 additions & 20 deletions LazZiya.TagHelpers/AlertTagHelper.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ public class AlertTagHelper : TagHelper

/// <summary>
/// Show alert icons from fontawesome.
/// Requires fontawesome css
/// Requires fontawesome css or bootstrap
/// </summary>
public bool ShowIcons { get; set; } = true;

/// <summary>
/// Choose where to get icons source from. "Bootstrap" or "FontAwesome".
/// </summary>
public IconsSource IconsSource { get; set; } = IconsSource.Bootstrap;
public IconsSource IconsSource { get; set; } = IconsSource.FontAwesome;

/// <summary>
/// Choose render mode: Bootstrap5 if your project is using bootstrap5, otherwise default is Bootstrap for earlier versions.
Expand Down Expand Up @@ -74,15 +74,10 @@ public override async Task ProcessAsync(TagHelperContext context, TagHelperOutpu
var alerts = ViewContext.TempData.ContainsKey(Alert.TempDataKey)
? ViewContext.TempData.Get<List<Alert>>(Alert.TempDataKey)
: new List<Alert>();
if(alerts.Any())
if (SlideAlerts)
{
if (alerts.Count > 1 && SlideAlerts)
output.Content.AppendHtml(AddAlertCarousel(alerts));
}
else
{
alerts.ForEach(a => output.Content.AppendHtml(AddAlert(a)));
}

ViewContext.TempData.Remove(Alert.TempDataKey);
}
Expand Down Expand Up @@ -111,11 +106,39 @@ private TagBuilder AddAlert(Alert alert)
string alertIcon;
switch (alert.AlertStyle)
{
case AlertStyle.Success: alertIcon = IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Success : FontAwesomeIcons.Success; break;
case AlertStyle.Warning: alertIcon = IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Warning : FontAwesomeIcons.Warning; break;
case AlertStyle.Info: alertIcon = IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Info : FontAwesomeIcons.Info; break;
case AlertStyle.Danger: alertIcon = IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Danger : FontAwesomeIcons.Danger; break;
default: alertIcon = IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Default : FontAwesomeIcons.Default; break;
case AlertStyle.Success:
alertIcon =
IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Success :
IconsSource == IconsSource.Bootstrap5 ? Bootstrap5Icons.Success :
FontAwesomeIcons.Success;
break;

case AlertStyle.Warning:
alertIcon =
IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Warning :
IconsSource == IconsSource.Bootstrap5 ? Bootstrap5Icons.Warning :
FontAwesomeIcons.Warning;
break;

case AlertStyle.Info:
alertIcon =
IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Info :
IconsSource == IconsSource.Bootstrap5 ? Bootstrap5Icons.Info :
FontAwesomeIcons.Info;
break;

case AlertStyle.Danger:
alertIcon =
IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Danger :
IconsSource == IconsSource.Bootstrap5 ? Bootstrap5Icons.Danger :
FontAwesomeIcons.Danger;
break;
default:
alertIcon =
IconsSource == IconsSource.Bootstrap ? BootstrapIcons.Default :
IconsSource == IconsSource.Bootstrap5 ? Bootstrap5Icons.Default :
FontAwesomeIcons.Default;
break;
}

var alertStyle = Enum.GetName(typeof(AlertStyle), alert.AlertStyle).ToLowerInvariant();
Expand All @@ -142,8 +165,18 @@ private TagBuilder AddAlert(Alert alert)
if (!string.IsNullOrWhiteSpace(alert.AlertMessage))
{
var msg = Localizer == null ? alert.AlertMessage : Localizer[alert.AlertMessage];
var icon = ShowIcons ? $"<i class='bi {alertIcon}'></i>&nbsp;" : string.Empty;
_alert.InnerHtml.AppendHtml($"<p class='mb-0'>{icon}{msg}</p>");

if (RenderMode == RenderMode.Bootstrap5 && IconsSource == IconsSource.Bootstrap5)
{
_alert.AddCssClass("d-flex align-items-center");
var icon = ShowIcons ? alertIcon : string.Empty;
_alert.InnerHtml.AppendHtml($"<div>{icon}{msg}</div>");
}
else
{
var icon = ShowIcons ? $"<i class='bi {alertIcon}'></i>&nbsp;" : string.Empty;
_alert.InnerHtml.AppendHtml($"<p class='mb-0'>{icon}{msg}</p>");
}
}

return _alert;
Expand All @@ -159,8 +192,17 @@ private TagBuilder AddAlertCarousel(List<Alert> alerts)
for (int i = 0; i < alerts.Count; i++)
{
var indicItem = new TagBuilder("li");
indicItem.Attributes.Add("data-target", $"#{carouselId}");
indicItem.Attributes.Add("data-slide-to", $"{i}");

if (RenderMode == RenderMode.Bootstrap5)
{
indicItem.Attributes.Add("data-bs-target", $"#{carouselId}");
indicItem.Attributes.Add("data-bs-slide-to", $"{i}");
}
else
{
indicItem.Attributes.Add("data-target", $"#{carouselId}");
indicItem.Attributes.Add("data-slide-to", $"{i}");
}
if (i == 0)
indicItem.AddCssClass("active");
indic.InnerHtml.AppendHtml(indicItem);
Expand All @@ -186,18 +228,31 @@ private TagBuilder AddAlertCarousel(List<Alert> alerts)

var carouselDiv = new TagBuilder("div");
carouselDiv.AddCssClass("carousel slide");

carouselDiv.Attributes.Add("id", carouselId);
carouselDiv.Attributes.Add("data-ride", "carousel");
if (RenderMode == RenderMode.Bootstrap5)
carouselDiv.Attributes.Add("data-bs-ride", "carousel");
else
carouselDiv.Attributes.Add("data-ride", "carousel");

carouselDiv.InnerHtml.AppendHtml(indic);
carouselDiv.InnerHtml.AppendHtml(carouselInner);

// This is the main alert that will hold the alerts carousel
var mainAlert = new TagBuilder("div");
mainAlert.AddCssClass("alert alert-dismissible p-0");
mainAlert.Attributes.Add("role", "alert");
mainAlert.InnerHtml.AppendHtml(carouselDiv);
mainAlert.InnerHtml.AppendHtml("<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");

if (RenderMode == RenderMode.Bootstrap5)
{
mainAlert.AddCssClass("alert alert-dismissible fade show p-0");
mainAlert.InnerHtml.AppendHtml("<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close' title='Clear all'></button>");
}
else
{
mainAlert.AddCssClass("alert alert-dismissible p-0");
mainAlert.InnerHtml.AppendHtml("<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");
}
return mainAlert;
}
}
Expand Down
18 changes: 18 additions & 0 deletions LazZiya.TagHelpers/Alerts/AlertModels.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,30 @@ public enum IconsSource
/// </summary>
Bootstrap,

/// <summary>
/// Bootstrap5
/// </summary>
Bootstrap5,

/// <summary>
/// FontAwesome
/// </summary>
FontAwesome
}

internal struct Bootstrap5Icons
{
internal const string Success = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-check-circle-fill flex-shrink-0 me-2\" viewBox=\"0 0 16 16\" role=\"img\" aria-label=\"Success:\"><path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/></svg>";

internal const string Warning = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-exclamation-triangle-fill flex-shrink-0 me-2\" viewBox=\"0 0 16 16\" role=\"img\" aria-label=\"Warning:\"><path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"/></svg>";

internal const string Info = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-info-fill flex-shrink-0 me-2\" viewBox=\"0 0 16 16\" role=\"img\" aria-label=\"Info:\"><path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"/></svg>";

internal const string Danger = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-exclamation-triangle-fill flex-shrink-0 me-2\" viewBox=\"0 0 16 16\" role=\"img\" aria-label=\"Danger:\"><path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"/></svg>";

internal const string Default = Info;
}

internal struct BootstrapIcons
{
internal const string Success = "bi bi-check-circle-fill";
Expand Down
10 changes: 5 additions & 5 deletions LazZiya.TagHelpers/LazZiya.TagHelpers.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
- bootstrap 5 support
- New: Alert icons
- New: Alert slider, slide between multiple alerts
- Fix #16 https://github.com/LazZiya/TagHelpers/issues/16
- New property added for PagingTagHelper: fix-url-path (add docs link)
- Fix #16 https://github.com/LazZiya/TagHelpers/issues/16
- See all release notes in https://github.com/LazZiya/TagHelpers/releases
</PackageReleaseNotes>
<VersionPrefix>5.1.0</VersionPrefix>
<VersionSuffix>beta9.5</VersionSuffix>
<AssemblyVersion>5.0.0.0</AssemblyVersion>
<FileVersion>5.0.0.0</FileVersion>
<VersionPrefix>6.0.0</VersionPrefix>
<VersionSuffix></VersionSuffix>
<AssemblyVersion>6.0.0.0</AssemblyVersion>
<FileVersion>6.0.0.0</FileVersion>
<PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
<PackageLicenseExpression>MIT</PackageLicenseExpression>
<PackageIconUrl>https://raw.githubusercontent.com/LazZiya/TagHelpers/master/LazZiya.TagHelpers/files/icon.png</PackageIconUrl>
Expand Down
15 changes: 10 additions & 5 deletions LazZiya.TagHelpers/LazZiya.TagHelpers.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 9a677a3

Please sign in to comment.