Abp nav tag helper Refactored

pull/301/head
yekalkan 8 years ago
parent b96f86b56f
commit 371c3ff93e

@ -2,12 +2,10 @@
{ {
public class AbpNavItemTagHelper : AbpTagHelper<AbpNavItemTagHelper, AbpNavItemTagHelperService> public class AbpNavItemTagHelper : AbpTagHelper<AbpNavItemTagHelper, AbpNavItemTagHelperService>
{ {
public bool? Active { get; set; } public bool? Active { get; set; }
public bool? Disabled { get; set; } public bool? Dropdown { get; set; }
public string Href { get; set; }
public AbpNavItemTagHelper(AbpNavItemTagHelperService tagHelperService) public AbpNavItemTagHelper(AbpNavItemTagHelperService tagHelperService)
: base(tagHelperService) : base(tagHelperService)
{ {

@ -1,64 +1,34 @@
using System.Collections.Generic; using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
{ {
public class AbpNavItemTagHelperService : AbpTagHelperService<AbpNavItemTagHelper> public class AbpNavItemTagHelperService : AbpTagHelperService<AbpNavItemTagHelper>
{ {
private readonly HtmlEncoder _encoder; public override void Process(TagHelperContext context, TagHelperOutput output)
public AbpNavItemTagHelperService(HtmlEncoder encoder)
{
_encoder = encoder;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "a";
output.TagMode = TagMode.StartTagAndEndTag;
output.Attributes.Add("href",TagHelper.Href);
SetClasses(context, output);
output.Content.SetHtmlContent(await output.GetChildContentAsync());
var list = GetValueFromContext<List<NavItem>>(context, NavItemContents);
list.Add(new NavItem
{
Html = SurroundTagWithNavItem(context, output,RenderTagHelperOutput(output, _encoder)),
Active = TagHelper.Active??false
});
output.SuppressOutput();
}
protected virtual void SetClasses(TagHelperContext context, TagHelperOutput output)
{ {
output.Attributes.AddClass("nav-link"); output.TagName = "li";
output.Attributes.AddClass("nav-item");
SetDisabledClass(context, output); SetDropdownClass(context, output);
SetActiveClass(context, output); SetActiveClass(context, output);
} }
protected virtual void SetDisabledClass(TagHelperContext context, TagHelperOutput output)
protected virtual void SetDropdownClass(TagHelperContext context, TagHelperOutput output)
{ {
if (TagHelper.Disabled ?? false) if (TagHelper.Dropdown ?? false)
{ {
output.Attributes.AddClass("disabled"); output.Attributes.AddClass("dropdown");
} }
} }
protected virtual void SetActiveClass(TagHelperContext context, TagHelperOutput output) protected virtual void SetActiveClass(TagHelperContext context, TagHelperOutput output)
{ {
output.Attributes.AddClass(AbpNavItemActivePlaceholder); if (TagHelper.Active ?? false)
} {
output.Attributes.AddClass("active");
protected virtual string SurroundTagWithNavItem(TagHelperContext context, TagHelperOutput output, string html) }
{
return "<li class=\"nav-item "+ AbpNavItemResponsiveAlignPlaceholder +" " + AbpNavItemResponsiveFlexPlaceholder + "\">" + html + "</li>";
} }
} }
} }

@ -0,0 +1,20 @@
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
{
[HtmlTargetElement(Attributes = "abp-nav-link")]
public class AbpNavLinkTagHelper : AbpTagHelper<AbpNavLinkTagHelper, AbpNavLinkTagHelperService>
{
public bool? Active { get; set; }
public bool? Disabled { get; set; }
public string Href { get; set; }
public AbpNavLinkTagHelper(AbpNavLinkTagHelperService tagHelperService)
: base(tagHelperService)
{
}
}
}

@ -0,0 +1,52 @@
using System.Collections.Generic;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
{
public class AbpNavLinkTagHelperService : AbpTagHelperService<AbpNavLinkTagHelper>
{
private readonly HtmlEncoder _encoder;
public AbpNavLinkTagHelperService(HtmlEncoder encoder)
{
_encoder = encoder;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "a";
output.TagMode = TagMode.StartTagAndEndTag;
output.Attributes.Add("href",TagHelper.Href??"");
SetClasses(context, output);
}
protected virtual void SetClasses(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.AddClass("nav-link");
SetDisabledClass(context, output);
SetActiveClass(context, output);
output.Attributes.RemoveAll("abp-nav-link");
}
protected virtual void SetDisabledClass(TagHelperContext context, TagHelperOutput output)
{
if (TagHelper.Disabled ?? false)
{
output.Attributes.AddClass("disabled");
}
}
protected virtual void SetActiveClass(TagHelperContext context, TagHelperOutput output)
{
if (TagHelper.Active??false)
{
output.Attributes.AddClass("active");
}
}
}
}

@ -6,8 +6,6 @@
public NavStyle NavStyle { get; set; } = NavStyle.Default; public NavStyle NavStyle { get; set; } = NavStyle.Default;
public bool? Responsive { get; set; }
public AbpNavTagHelper(AbpNavTagHelperService tagHelperService) public AbpNavTagHelper(AbpNavTagHelperService tagHelperService)
: base(tagHelperService) : base(tagHelperService)
{ {

@ -9,75 +9,13 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Nav
{ {
public class AbpNavTagHelperService : AbpTagHelperService<AbpNavTagHelper> public class AbpNavTagHelperService : AbpTagHelperService<AbpNavTagHelper>
{ {
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) public override void Process(TagHelperContext context, TagHelperOutput output)
{ {
output.TagName = "ul"; output.TagName = "ul";
output.TagMode = TagMode.StartTagAndEndTag; output.TagMode = TagMode.StartTagAndEndTag;
output.Attributes.AddClass("nav"); output.Attributes.AddClass("nav");
SetAlign(context, output); SetAlign(context, output);
SetNavStyle(context, output); SetNavStyle(context, output);
SetResponsiveness(context, output);
var list = InitilizeFormGroupContentsContext(context, output);
await output.GetChildContentAsync();
SetInnerList(context, output, list);
}
protected virtual void SetInnerList(TagHelperContext context, TagHelperOutput output, List<NavItem> list)
{
SetFirstOneActiveIfThereIsNotAny(context, output, list);
var html = new StringBuilder("");
foreach (var navItem in list)
{
var htmlPart = SetPlaceHolderClassesIfActiveAndGetHtml(navItem);
html.AppendLine(htmlPart);
}
output.Content.SetHtmlContent(html.ToString());
}
protected virtual string SetPlaceHolderClassesIfActiveAndGetHtml(NavItem item)
{
var html = item.Html;
html = item.Active ?
item.Html.Replace(AbpNavItemActivePlaceholder, " active") :
item.Html.Replace(AbpNavItemActivePlaceholder, "");
html = TagHelper.Responsive?? false? html.Replace(AbpNavItemResponsiveFlexPlaceholder, "flex-sm-fill").Replace(AbpNavItemResponsiveAlignPlaceholder, "text-sm-center") :
html.Replace(AbpNavItemResponsiveFlexPlaceholder, "").Replace(AbpNavItemResponsiveAlignPlaceholder, "");
return html;
}
protected virtual void SetFirstOneActiveIfThereIsNotAny(TagHelperContext context, TagHelperOutput output, List<NavItem> list)
{
if (list.Count > 0 && !list.Any(bc => bc.Active))
{
list.FirstOrDefault().Active = true;
}
}
protected virtual void SetResponsiveness(TagHelperContext context, TagHelperOutput output)
{
if (TagHelper.Responsive??false)
{
output.Attributes.AddClass("flex-sm-row");
output.Attributes.AddClass("flex-column");
}
}
protected virtual List<NavItem> InitilizeFormGroupContentsContext(TagHelperContext context, TagHelperOutput output)
{
var items = new List<NavItem>();
context.Items[NavItemContents] = items;
return items;
} }
protected virtual void SetAlign(TagHelperContext context, TagHelperOutput output) protected virtual void SetAlign(TagHelperContext context, TagHelperOutput output)

@ -14,9 +14,5 @@
<ItemGroup> <ItemGroup>
<ProjectReference Include="..\Volo.Abp.AspNetCore.Mvc.UI\Volo.Abp.AspNetCore.Mvc.UI.csproj" /> <ProjectReference Include="..\Volo.Abp.AspNetCore.Mvc.UI\Volo.Abp.AspNetCore.Mvc.UI.csproj" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="TagHelpers\Navbar\" />
</ItemGroup>
</Project> </Project>

@ -13,22 +13,38 @@
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-nav nav-style="Pill" responsive="true" align="Center"> <abp-nav nav-style="Pill" align="Center">
<abp-nav-item href="#">Active</abp-nav-item> <abp-nav-item>
<abp-nav-item href="#">Longer nav link</abp-nav-item> <a abp-nav-link Active="true" href="#">Active</a>
<abp-nav-item href="#">Link</abp-nav-item> </abp-nav-item>
<abp-nav-item href="#" disabled="true">Disabled</abp-nav-item> <abp-nav-item >
<a abp-nav-link href="#">Longer nav link</a>
</abp-nav-item>
<abp-nav-item >
<a abp-nav-link href="#">link</a>
</abp-nav-item>
<abp-nav-item >
<a abp-nav-link disabled="true" href="#">disabled</a>
</abp-nav-item>
</abp-nav> </abp-nav>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;abp-nav nav-style=&quot;Pill&quot; responsive=&quot;true&quot; align=&quot;Center&quot;&gt; &lt;abp-nav nav-style=&quot;Pill&quot; align=&quot;Center&quot;&gt;
&lt;abp-nav-item href=&quot;#&quot;&gt;Active&lt;/abp-nav-item&gt; &lt;abp-nav-item&gt;
&lt;abp-nav-item href=&quot;#&quot;&gt;Longer nav link&lt;/abp-nav-item&gt; &lt;a abp-nav-link Active=&quot;true&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt;
&lt;abp-nav-item href=&quot;#&quot;&gt;Link&lt;/abp-nav-item&gt; &lt;/abp-nav-item&gt;
&lt;abp-nav-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Disabled&lt;/abp-nav-item&gt; &lt;abp-nav-item &gt;
&lt;/abp-nav&gt; &lt;a abp-nav-link href=&quot;#&quot;&gt;Longer nav link&lt;/a&gt;
&lt;/abp-nav-item&gt;
&lt;abp-nav-item &gt;
&lt;a abp-nav-link href=&quot;#&quot;&gt;link&lt;/a&gt;
&lt;/abp-nav-item&gt;
&lt;abp-nav-item &gt;
&lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;disabled&lt;/a&gt;
&lt;/abp-nav-item&gt;
&lt;/abp-nav&gt;
</pre> </pre>
</div> </div>
</div> </div>

Loading…
Cancel
Save