1 @using Dynamicweb.Content.Items
2 @using Co3.Espresso.Base.Models
3 @using Co3.Espresso.Base.Extensions
4 @using Co3.Espresso.Website.Models.FrontEnd
5 @using Co3.Espresso.Website.Models.FrontEnd.Elements
6 @using Co3.Espresso.Website.Models.FrontEnd.Paragraphs
7 @inherits Co3.Espresso.Website.TemplateBases.Paragraphs.ImageTextTopBottom
8 @{
9 Espresso.Wrapper.Classes.Clear();
10 ClassList AccordionLeadClassList = new ClassList();
11 ClassList AccordionItemClassList = new ClassList();
12 ClassList AccordionItemBorderStyleClassList = new ClassList();
13 ClassList AccordionItemToggleClassList = new ClassList();
14 ClassList AccordionItemToggleTextClassList = new ClassList();
15 ClassList AccordionItemToggleIconClassList = new ClassList();
16 ClassList AccordionItemContentClassList = new ClassList();
17 AccordionLeadClassList.AddClasses( "p-accordion-lead" );
18 AccordionItemClassList.AddClasses("p-accordion-item");
19 20 Espresso.Container.Classes.RemoveClasses( "p-imagetext p-imagetext-tb p-imagetext-lr" );
21 Espresso.Container.Classes.AddClasses("p-accordion");
22 23 string AccordionBorderStyle = string.Empty;
24 if( Espresso.Item.Border == "top-bottom" ) {
25 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
26 AccordionBorderStyle = "horizontal-spaced";
27 }
28 else{
29 AccordionBorderStyle = "horizontal-condensed";
30 } }
31 else if( Espresso.Item.Border == "top-bottom-left-right" ) {
32 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
33 AccordionBorderStyle = "around-spaced";
34 }
35 else{
36 AccordionBorderStyle = "around-condensed";
37 }
38 }
39 else{
40 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
41 AccordionBorderStyle = "none-spaced";
42 }
43 else{
44 AccordionBorderStyle = "none-condensed";
45 }
46 }
47 if( Espresso.Item.TextColor != "" && Espresso.Item.TextColor != "auto" ) {
48 AccordionItemContentClassList.AddClasses( "e-text-" + Espresso.Item.TextColor );
49 }
50 if( AccordionBorderStyle == "horizontal-spaced" ) {
51 AccordionItemClassList.AddClasses("border border-right-0 border-left-0");
52 }
53 else if( AccordionBorderStyle == "horizontal-condensed" ) {
54 AccordionItemClassList.AddClasses("border border-right-0 border-left-0");
55 }
56 else if( AccordionBorderStyle == "around-spaced" ) {
57 AccordionItemClassList.AddClasses("border rounded");
58 }
59 else if( AccordionBorderStyle == "around-condensed" ) {
60 AccordionItemClassList.AddClasses("border");
61 }
62 if( Espresso.Item.BorderColor != "auto" && Espresso.Item.BorderColor != "" ) {
63 Espresso.Wrapper.Classes.AddClasses( "border-" + Espresso.Item.BorderColor );
64 AccordionItemClassList.AddClasses( "border-" + Espresso.Item.BorderColor );
65 }
66 if( Espresso.Item.BackgroundColor != "" && Espresso.Item.BackgroundColor != "none" && Espresso.Item.BackgroundColor != "auto" ) {
67 AccordionItemClassList.AddClasses( "e-theme-" + Espresso.Item.BackgroundColor );
68 }
69 if( Espresso.Item.IconColor != "" && Espresso.Item.IconColor != "auto" ) {
70 AccordionItemToggleIconClassList.AddClasses( "text-" + Espresso.Item.IconColor );
71 }
72 if( Espresso.Item.ToggleTextColor != "" && Espresso.Item.ToggleTextColor != "auto" ) {
73 AccordionItemToggleTextClassList.AddClasses( "text-" + Espresso.Item.ToggleTextColor );
74 }
75 76 if( Espresso.Item.PaddingHorizontal == "sm" ) {
77 AccordionItemToggleClassList.AddClasses("px-1");
78 AccordionItemContentClassList.AddClasses("px-1");
79 }
80 else if( Espresso.Item.PaddingHorizontal == "md" ) {
81 AccordionItemToggleClassList.AddClasses("px-2");
82 AccordionItemContentClassList.AddClasses("px-2");
83 }
84 else if( Espresso.Item.PaddingHorizontal == "lg" ) {
85 AccordionItemToggleClassList.AddClasses("px-3");
86 AccordionItemContentClassList.AddClasses("px-3");
87 }
88 else {
89 AccordionItemToggleClassList.AddClasses("px-0");
90 AccordionItemContentClassList.AddClasses("px-0");
91 }
92 93 if( Espresso.Item.PaddingVertical == "sm" ) {
94 AccordionItemToggleClassList.AddClasses("py-1");
95 AccordionItemContentClassList.AddClasses("pb-1");
96 }
97 else if( Espresso.Item.PaddingVertical == "md" ) {
98 AccordionItemToggleClassList.AddClasses("py-2");
99 AccordionItemContentClassList.AddClasses("pb-2");
100 }
101 else if( Espresso.Item.PaddingVertical == "lg" ) {
102 AccordionItemToggleClassList.AddClasses("py-3");
103 AccordionItemContentClassList.AddClasses("pb-3");
104 }
105106 if( Espresso.Item.Margin == "sm" ) {
107 AccordionItemClassList.AddClasses("mb-1");
108 }
109 else if( Espresso.Item.Margin == "md" ) {
110 AccordionItemClassList.AddClasses("mb-2");
111 }
112 else if( Espresso.Item.Margin == "lg" ) {
113 AccordionItemClassList.AddClasses("mb-3");
114 }
115 else {
116 AccordionItemClassList.AddClasses("mb-0");
117 }
118119 AccordionItemToggleClassList.AddClasses("d-flex align-items-center m-0 collapsed");
120 AccordionItemToggleTextClassList.AddClasses("line-height-sm");
121 if ( Espresso.Item.ToggleTextStyle != "" && Espresso.Item.ToggleTextStyle != "none" )
122 {
123 AccordionItemToggleTextClassList.AddClasses( Espresso.Item.ToggleTextStyle );
124 AccordionItemToggleTextClassList.AddClasses( "my-0" );
125 }
126 if( Espresso.Item.IconPosition == "right" ) {
127 AccordionItemToggleClassList.AddClasses("justify-content-between");
128 AccordionItemToggleIconClassList.AddClasses("ml-1 order-last");
129 }
130 else {
131 AccordionItemToggleIconClassList.AddClasses("mr-1 order-first");
132 }
133 }
134135 <div class="@Espresso.Container.Classes" id="@Espresso.Id">
136137 @if ( string.IsNullOrEmpty( Espresso.Text.Raw ) == false )
138 {
139 <div class="@AccordionLeadClassList">
140 @Espresso.Text.Raw
141 </div>
142 }
143144 <div class="p-accordion-container @Espresso.Wrapper.Classes">
145146 @{ int AccordionItemLoopCounter = 1; }
147 @foreach( dynamic AccordionItem in Espresso.Item.AccordionItems ) {
148 EspressoImage AccordionItemImage = new EspressoImage( AccordionItem.Item );
149 AccordionItemImage.Width = 1620;
150 AccordionItemBorderStyleClassList.Clear();
151152 if( AccordionBorderStyle == "horizontal-spaced" ) {
153 AccordionItemBorderStyleClassList.AddClasses("");
154 }
155 else if( AccordionBorderStyle == "horizontal-condensed" ) {
156 if( AccordionItemLoopCounter != Espresso.Item.AccordionItems.Count ) {
157 AccordionItemBorderStyleClassList.AddClasses("border-bottom-0");
158 }
159 }
160 else if( AccordionBorderStyle == "around-spaced" ) {
161 AccordionItemClassList.AddClasses("border rounded");
162 }
163 else if( AccordionBorderStyle == "around-condensed" ) {
164 if( AccordionItemLoopCounter != Espresso.Item.AccordionItems.Count ) {
165 AccordionItemBorderStyleClassList.AddClasses("border-bottom-0");
166 }
167 if( AccordionItemLoopCounter == 1 ) {
168 AccordionItemBorderStyleClassList.AddClasses("rounded-top");
169 }
170 else if( AccordionItemLoopCounter == Espresso.Item.AccordionItems.Count ) {
171 AccordionItemBorderStyleClassList.AddClasses("rounded-bottom");
172 }
173 }
174 else if( AccordionBorderStyle == "none-spaced" ) {
175 AccordionItemClassList.AddClasses("rounded");
176 }
177 else if( AccordionBorderStyle == "none-condensed" ) {
178 if( AccordionItemLoopCounter == 1 ) {
179 AccordionItemBorderStyleClassList.AddClasses("rounded-top");
180 }
181 else if( AccordionItemLoopCounter == Espresso.Item.AccordionItems.Count ) {
182 AccordionItemBorderStyleClassList.AddClasses("rounded-bottom");
183 }
184 }
185186 <div class="@AccordionItemClassList @AccordionItemBorderStyleClassList">
187188 <div class="p-accordion-toggle">
189 <p data-toggle="collapse" data-target="#e-accordion-@Espresso.Id-@AccordionItem.Item.Id" class="@AccordionItemToggleClassList">
190 <span class="p-accordion-toggle-text @AccordionItemToggleTextClassList">
191 @AccordionItem.Heading
192 </span>
193 <i class="material-icons p-accordion-toggle-icon @AccordionItemToggleIconClassList">add</i>
194 </p>
195 </div>
196197 <div id="e-accordion-@Espresso.Id-@AccordionItem.Item.Id" class="collapse fade">
198 <div class="@AccordionItemContentClassList p-accordion-content">
199 @if( @AccordionItemImage.URL != "" ) {
200 <div class="row no-gutters justify-content-@AccordionItem.ImageAlignmentHorizontal">
201 <div class="col-@AccordionItem.ImageScale">
202 <p class="p-img-container">
203 <img src="@AccordionItemImage.URL" class="p-img" alt="@AccordionItem.Heading">
204 </p>
205 </div>
206 </div>
207 }
208 <div class="p-txt-container">
209 @AccordionItem.Text
210 </div>
211212 </div>
213 </div>
214215 </div>
216 AccordionItemLoopCounter++;
217 }
218219 </div>
220221 </div>
222223 
