Abp collapse & accordion tag helpers

8 years ago · afd4a6328c
14 changed files with 1926 additions and 1 deletions
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpTagHelperService.cs
@ -18,6 +18,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
        protected const string FormGroupContents = "FormGroupContents";
        protected const string DropdownButtonsAsHtml = "DropdownButtonsAsHtmlContent";
        protected const string TabItems = "TabItems";
+        protected const string AccordionItems = "AccordionItems";
        protected const string TabItemsDataTogglePlaceHolder = "{{data_toggle}}";
        protected const string TabItemsVerticalPillPlaceHolder = "{{vertical_pill}}";
        protected const string TabItemNamePlaceHolder = "{{Tag_Name}}";
@ -25,6 +26,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
        protected const string AbpTabItemActivePlaceholder = "{_Tab_Active_Placeholder_}";
        protected const string AbpTabItemShowActivePlaceholder = "{_Tab_Show_Active_Placeholder_}";
        protected const string AbpTabItemSelectedPlaceholder = "{_Tab_Selected_Placeholder_}";
+        protected const string AbpAccordionParentIdPlaceholder = "{_{{Parent_Accordion_Id}}_}";

        public TTagHelper TagHelper { get; internal set; }

--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionItemTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionItemTagHelper.cs
@ -0,0 +1,17 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpAccordionItemTagHelper : AbpTagHelper<AbpAccordionItemTagHelper, AbpAccordionItemTagHelperService>
+    {
+        public string Id { get; set; }
+
+        public string Title { get; set; }
+
+        public bool? Active { get; set; }
+
+        public AbpAccordionItemTagHelper(AbpAccordionItemTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionItemTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionItemTagHelperService.cs
@ -0,0 +1,67 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Nito.AsyncEx;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpAccordionItemTagHelperService : AbpTagHelperService<AbpAccordionItemTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            SetRandomIdIfNotProvided();
+
+            var innerContent = (await output.GetChildContentAsync()).GetContent();
+
+            var html = GetAccordionHeaderItem(context, output) + GetAccordionContentItem(context, output, innerContent);
+
+            var tabHeaderItems = GetValueFromContext<List<string>>(context, AccordionItems);
+
+            tabHeaderItems.Add(html);
+
+            output.SuppressOutput();
+        }
+
+
+
+        protected virtual string GetAccordionHeaderItem(TagHelperContext context, TagHelperOutput output)
+        {
+            return "     <div class=\"card-header\" id=\"" + GetHeadingId() + "\">" + Environment.NewLine +
+                   "      <h5 class=\"mb-0\">" + Environment.NewLine +
+                   "        <button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#" + GetContentId() + "\" aria-expanded=\"true\" aria-controls=\"" + GetContentId() + "\">" + Environment.NewLine +
+                                    TagHelper.Title + Environment.NewLine +
+                   "        </button>" + Environment.NewLine +
+                   "      </h5>" + Environment.NewLine +
+                   "    </div>" + Environment.NewLine;
+        }
+
+        protected virtual string GetAccordionContentItem(TagHelperContext context, TagHelperOutput output, string content)
+        {
+            var show = (TagHelper.Active ?? false) ? " show" : "";
+            return "<div id=\"" + GetContentId() + "\" class=\"collapse"+ show + "\" aria-labelledby=\"" + GetHeadingId() + "\" data-parent=\"#" + AbpAccordionParentIdPlaceholder + "\">" + Environment.NewLine +
+                   "      <div class=\"card-body\">" + Environment.NewLine +
+                            content + Environment.NewLine +
+                   "      </div>" + Environment.NewLine +
+                   "</div>" + Environment.NewLine;
+        }
+
+        protected virtual string GetHeadingId()
+        {
+            return "heading" + TagHelper.Id; ;
+        }
+
+        protected virtual string GetContentId()
+        {
+            return "content" + TagHelper.Id; ;
+        }
+
+        protected virtual void SetRandomIdIfNotProvided()
+        {
+            if (string.IsNullOrWhiteSpace(TagHelper.Id))
+            {
+                TagHelper.Id = Guid.NewGuid().ToString("N");
+            }
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionTagHelper.cs
@ -0,0 +1,13 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpAccordionTagHelper : AbpTagHelper<AbpAccordionTagHelper, AbpAccordionTagHelperService>
+    {
+        public string Id { get; set; }
+
+        public AbpAccordionTagHelper(AbpAccordionTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpAccordionTagHelperService.cs
@ -0,0 +1,62 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+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.Collapse
+{
+    public class AbpAccordionTagHelperService : AbpTagHelperService<AbpAccordionTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            SetRandomIdIfNotProvided();
+
+            output.TagName = "div";
+            output.TagMode = TagMode.StartTagAndEndTag;
+            output.Attributes.AddClass("accordion");
+            output.Attributes.Add("id",TagHelper.Id);
+            
+            var items = InitilizeFormGroupContentsContext(context, output);
+
+            await output.GetChildContentAsync();
+
+            var content = GetContent(items);
+
+            output.Content.SetHtmlContent(content);
+        }
+
+        protected virtual string GetContent(List<string> items)
+        {
+            var html = new StringBuilder("");
+            foreach (var item in items)
+            {
+                var content = item.Replace(AbpAccordionParentIdPlaceholder, TagHelper.Id);
+
+                html.AppendLine(
+                    "<div class=\"card\">" + Environment.NewLine + 
+                        content
+                    + "</div>" + Environment.NewLine
+                );
+            }
+
+            return html.ToString();
+        }
+
+        protected virtual List<string> InitilizeFormGroupContentsContext(TagHelperContext context, TagHelperOutput output)
+        {
+            var items = new List<string>();
+            context.Items[AccordionItems] = items;
+            return items;
+        }
+
+        protected virtual void SetRandomIdIfNotProvided()
+        {
+            if (string.IsNullOrWhiteSpace(TagHelper.Id))
+            {
+                TagHelper.Id = Guid.NewGuid().ToString("N");
+            }
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelper.cs
@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpCollapseBodyTagHelper : AbpTagHelper<AbpCollapseBodyTagHelper, AbpCollapseBodyTagHelperService>
+    {
+        public string Id { get; set; }
+
+        public bool? Show { get; set; }
+
+        public AbpCollapseBodyTagHelper(AbpCollapseBodyTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseBodyTagHelperService.cs
@ -0,0 +1,32 @@
+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.Collapse
+{
+    public class AbpCollapseBodyTagHelperService : AbpTagHelperService<AbpCollapseBodyTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("collapse");
+            output.Attributes.Add("id", TagHelper.Id);
+
+            if (TagHelper.Show ?? false)
+            {
+                output.Attributes.AddClass("show");
+            }
+
+            var innerContent = (await output.GetChildContentAsync()).GetContent();
+
+            var body = GetBody(context, output, innerContent);
+
+            output.Content.SetHtmlContent(body);
+        }
+
+        protected virtual string GetBody(TagHelperContext context, TagHelperOutput output, string innerContent)
+        {
+            return "<div class=\"card card-body\">" + innerContent + "</div>";
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs
@ -0,0 +1,17 @@
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpCollapseButtonTagHelper : AbpTagHelper<AbpCollapseButtonTagHelper, AbpCollapseButtonTagHelperService>
+    {
+        public AbpButtonType ButonType { get; set; } = AbpButtonType.Default;
+
+        public string BodyId { get; set; }
+
+        public AbpCollapseButtonTagHelper(AbpCollapseButtonTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelperService.cs
@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
+{
+    public class AbpCollapseButtonTagHelperService : AbpTagHelperService<AbpCollapseButtonTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "button";
+            output.Attributes.AddClass("btn");
+            output.Attributes.Add("data-toggle","collapse");
+            output.Attributes.Add("aria-expanded","false");
+            output.Attributes.Add("type","button");
+            output.Attributes.Add("data-target", "#" +TagHelper.BodyId);
+            output.Attributes.Add("aria-controls", TagHelper.BodyId);
+
+
+            if (TagHelper.ButonType != AbpButtonType.Default)
+            {
+                output.Attributes.AddClass("btn-" + TagHelper.ButonType.ToString().ToLowerInvariant());
+            }
+        }
+        
+    }
+}
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Logs/logs.txt
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Logs/logs.txt
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml
@ -0,0 +1,76 @@
+@page
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.CollapseModel
+@{
+    ViewData["Title"] = "Collapse";
+}
+
+<h2>Collapse</h2>
+
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/collapse/" target="_blank"> Bootstrap Collapse</a>.</p>
+
+<h4># Accordion Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-accordion>
+            <abp-accordion-item title="header1">
+                1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+            <abp-accordion-item title="header2">
+                2Anim pariatur cliche reprehenderit,, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+            <abp-accordion-item title="header3">
+                3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </abp-accordion-item>
+        </abp-accordion>
+
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-accordion&gt;
+    &lt;abp-accordion-item title=&quot;header1&quot;&gt;
+       1Anim pariatur cliche reprehenderit, enim eiusmod high life acc
+    &lt;/abp-accordion-item&gt;
+    &lt;abp-accordion-item title=&quot;header2&quot;&gt;
+       2Anim pariatur cliche reprehenderit,, enim eiusmod high life
+    &lt;/abp-accordion-item&gt;
+    &lt;abp-accordion-item title=&quot;header3&quot;&gt;
+       3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on i
+    &lt;/abp-accordion-item&gt;
+&lt;/abp-accordion&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Collapse With Button Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        
+        <p>
+            <abp-collapse-button buton-type="Success" body-id="collapseExample">
+                Toggle
+            </abp-collapse-button>
+        </p>
+        
+        <abp-collapse-body id="collapseExample" show="true">
+            3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+        </abp-collapse-body>
+
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;p&gt;
+   &lt;abp-collapse-button buton-type=&quot;Success&quot; body-id=&quot;collapseExample&quot;&gt;
+       Toggle
+   &lt;/abp-collapse-button&gt;
+&lt;/p&gt;
+        
+&lt;abp-collapse-body id=&quot;collapseExample&quot; show=&quot;true&quot;&gt;
+   3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bir
+&lt;/abp-collapse-body&gt;
+</pre>
+    </div>
+</div>
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml.cs
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml.cs
@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class CollapseModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml
@ -7,7 +7,7 @@

 <h2>Modals</h2>

-<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modals/" target="_blank"> Bootstrap Alert</a>.</p>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modals/" target="_blank"> Bootstrap Modal</a>.</p>

 <h4># Modal Example</h4>

--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
@ -16,5 +16,6 @@
    <li><a asp-page="Components/alerts">Alerts</a></li>
    <li><a asp-page="Components/badges">Badges</a></li>
    <li><a asp-page="Components/Modals">Modals</a></li>
+    <li><a asp-page="Components/collapse">Collapse</a></li>
 </ul>