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 bool HideOnDesktop = Espresso.Item.HideOnDesktop == "True";
10 bool HideOnPhone = Espresso.Item.HideOnPhone == "True";
11 if ( HideOnDesktop )
12 {
13 Espresso.Container.ClassList.Add( "d-lg-none" );
14 }
15 if ( HideOnPhone )
16 {
17 Espresso.Container.ClassList.Add( "d-none" );
18 if ( !HideOnDesktop )
19 {
20 Espresso.Container.ClassList.Add( "d-lg-block" );
21 }
22 }
23
24 Espresso.Wrapper.ClassList.Clear();
25 ClassList AccordionItemClassList = new ClassList();
26 ClassList AccordionItemBorderStyleClassList = new ClassList();
27 ClassList AccordionItemToggleClassList = new ClassList();
28 ClassList AccordionItemToggleTextClassList = new ClassList();
29 ClassList AccordionItemToggleIconClassList = new ClassList();
30 ClassList AccordionItemContentWrapperClassList = new ClassList();
31 ClassList AccordionItemContentClassList = new ClassList();
32 AccordionItemClassList.AddClasses("p-accordion-item");
33 if( Espresso.Page.Item.GetValue<bool>("ContentAnimate") == true ) {
34 AccordionItemClassList.AddClasses("js-e-scroll-reveal");
35 }
36 Espresso.Container.ClassList.RemoveClasses("p-imagetext");
37 Espresso.Container.ClassList.AddClasses("p-accordion");
38
39 string AccordionBorderStyle = string.Empty;
40 if( Espresso.Item.Border == "top-bottom" ) {
41 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
42 AccordionBorderStyle = "horizontal-spaced";
43 }
44 else{
45 AccordionBorderStyle = "horizontal-condensed";
46 } }
47 else if( Espresso.Item.Border == "top-bottom-left-right" ) {
48 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
49 AccordionBorderStyle = "around-spaced";
50 }
51 else{
52 AccordionBorderStyle = "around-condensed";
53 }
54 }
55 else{
56 if( Espresso.Item.Margin != "none" && string.IsNullOrEmpty( Espresso.Item.Margin ) == false ) {
57 AccordionBorderStyle = "none-spaced";
58 }
59 else{
60 AccordionBorderStyle = "none-condensed";
61 }
62 }
63 if( Espresso.Item.TextColor != "" && Espresso.Item.TextColor != "auto" ) {
64 Espresso.Wrapper.ClassList.AddClasses( "e-text-" + Espresso.Item.TextColor );
65 }
66 if( AccordionBorderStyle == "horizontal-spaced" ) {
67 AccordionItemClassList.AddClasses("border border-right-0 border-left-0");
68 }
69 else if( AccordionBorderStyle == "horizontal-condensed" ) {
70 AccordionItemClassList.AddClasses("border border-right-0 border-left-0");
71 }
72 else if( AccordionBorderStyle == "around-spaced" ) {
73 AccordionItemClassList.AddClasses("border rounded");
74 }
75 else if( AccordionBorderStyle == "around-condensed" ) {
76 AccordionItemClassList.AddClasses("border");
77 }
78 if( Espresso.Item.BorderColor != "auto" && Espresso.Item.BorderColor != "" ) {
79 Espresso.Wrapper.ClassList.AddClasses( "border-" + Espresso.Item.BorderColor );
80 AccordionItemClassList.AddClasses( "border-" + Espresso.Item.BorderColor );
81 }
82 if( Espresso.Item.BackgroundColor != "" && Espresso.Item.BackgroundColor != "none" ) {
83 AccordionItemClassList.AddClasses( "bg-" + Espresso.Item.BackgroundColor );
84 }
85 if( Espresso.Item.IconColor != "" && Espresso.Item.IconColor != "auto" ) {
86 AccordionItemToggleIconClassList.AddClasses( "text-" + Espresso.Item.IconColor );
87 }
88 if( Espresso.Item.ToggleTextColor != "" && Espresso.Item.ToggleTextColor != "auto" ) {
89 AccordionItemToggleTextClassList.AddClasses( "text-" + Espresso.Item.ToggleTextColor );
90 }
91
92 if( Espresso.Item.PaddingHorizontal == "sm" ) {
93 AccordionItemToggleClassList.AddClasses("px-1");
94 AccordionItemContentClassList.AddClasses("px-1");
95 }
96 else if( Espresso.Item.PaddingHorizontal == "md" ) {
97 AccordionItemToggleClassList.AddClasses("px-2");
98 AccordionItemContentClassList.AddClasses("px-2");
99 }
100 else if( Espresso.Item.PaddingHorizontal == "lg" ) {
101 AccordionItemToggleClassList.AddClasses("px-3");
102 AccordionItemContentClassList.AddClasses("px-3");
103 }
104 else {
105 AccordionItemToggleClassList.AddClasses("px-0");
106 AccordionItemContentClassList.AddClasses("px-0");
107 }
108
109 if( Espresso.Item.PaddingVertical == "sm" ) {
110 AccordionItemToggleClassList.AddClasses("py-1");
111 AccordionItemContentClassList.AddClasses("pb-1");
112 }
113 else if( Espresso.Item.PaddingVertical == "md" ) {
114 AccordionItemToggleClassList.AddClasses("py-2");
115 AccordionItemContentClassList.AddClasses("pb-2");
116 }
117 else if( Espresso.Item.PaddingVertical == "lg" ) {
118 AccordionItemToggleClassList.AddClasses("py-3");
119 AccordionItemContentClassList.AddClasses("pb-3");
120 }
121
122 if( Espresso.Item.Margin == "sm" ) {
123 AccordionItemClassList.AddClasses("mb-1");
124 }
125 else if( Espresso.Item.Margin == "md" ) {
126 AccordionItemClassList.AddClasses("mb-2");
127 }
128 else if( Espresso.Item.Margin == "lg" ) {
129 AccordionItemClassList.AddClasses("mb-3");
130 }
131 else {
132 AccordionItemClassList.AddClasses("mb-0");
133 }
134
135 AccordionItemToggleClassList.AddClasses("d-flex align-items-center m-0");
136 AccordionItemToggleTextClassList.AddClasses("line-height-sm");
137 AccordionItemToggleTextClassList.AddClasses( Espresso.Item.ToggleTextStyle );
138 if( Espresso.Item.IconPosition == "right" ) {
139 AccordionItemToggleClassList.AddClasses("justify-content-between");
140 AccordionItemToggleIconClassList.AddClasses("ml-1 order-last");
141 }
142 else {
143 AccordionItemToggleIconClassList.AddClasses("mr-1 order-first");
144 }
145 }
146
147 <div class="@Espresso.Container.ClassList" id="@Espresso.Id">
148
149 @if ( string.IsNullOrEmpty( Espresso.Text.Raw ) == false )
150 {
151 <div class="p-accordion-lead">
152 @Espresso.Text.Raw
153 </div>
154 }
155
156 <div class="p-accordion-container @Espresso.Wrapper.ClassList">
157
158 @{ int AccordionItemLoopCounter = 1; }
159 @foreach( dynamic AccordionItem in Espresso.Item.AccordionItems ) {
160 EspressoImage AccordionItemImage = new EspressoImage( AccordionItem.Item );
161 AccordionItemImage.Width = 640;
162 AccordionItemBorderStyleClassList.Clear();
163 AccordionItemContentWrapperClassList.Clear();
164 AccordionItemToggleClassList.RemoveClasses( "collapsed" );
165
166
167 AccordionItemToggleClassList.AddClasses("collapsed");
168 AccordionItemContentWrapperClassList.AddClasses( "collapse" );
169
170 if( AccordionBorderStyle == "horizontal-spaced" ) {
171 AccordionItemBorderStyleClassList.AddClasses("");
172 }
173 else if( AccordionBorderStyle == "horizontal-condensed" ) {
174 if( AccordionItemLoopCounter != Espresso.Item.AccordionItems.Count ) {
175 AccordionItemBorderStyleClassList.AddClasses("border-bottom-0");
176 }
177 }
178 else if( AccordionBorderStyle == "around-spaced" ) {
179 AccordionItemClassList.AddClasses("border rounded");
180 }
181 else if( AccordionBorderStyle == "around-condensed" ) {
182 if( AccordionItemLoopCounter != Espresso.Item.AccordionItems.Count ) {
183 AccordionItemBorderStyleClassList.AddClasses("border-bottom-0");
184 }
185 if( AccordionItemLoopCounter == 1 ) {
186 AccordionItemBorderStyleClassList.AddClasses("rounded-top");
187 }
188 else if( AccordionItemLoopCounter == Espresso.Item.AccordionItems.Count ) {
189 AccordionItemBorderStyleClassList.AddClasses("rounded-bottom");
190 }
191 }
192 else if( AccordionBorderStyle == "none-spaced" ) {
193 AccordionItemClassList.AddClasses("rounded");
194 }
195 else if( AccordionBorderStyle == "none-condensed" ) {
196 if( AccordionItemLoopCounter == 1 ) {
197 AccordionItemBorderStyleClassList.AddClasses("rounded-top");
198 }
199 else if( AccordionItemLoopCounter == Espresso.Item.AccordionItems.Count ) {
200 AccordionItemBorderStyleClassList.AddClasses("rounded-bottom");
201 }
202 }
203 if ( AccordionItem.Expanded == "True" )
204 {
205 AccordionItemToggleClassList.RemoveClasses( "collapsed" );
206 AccordionItemContentWrapperClassList.AddClasses( "show" );
207 }
208
209 <div class="@AccordionItemClassList @AccordionItemBorderStyleClassList">
210
211 <div class="p-accordion-toggle">
212 <p data-toggle="collapse" data-target="#e-accordion-@Espresso.Id-@AccordionItem.Item.Id" class="@AccordionItemToggleClassList">
213 <span class="p-accordion-toggle-text mb-0 @AccordionItemToggleTextClassList">
214 @AccordionItem.Heading
215 </span>
216 <i class="material-icons p-accordion-toggle-icon @AccordionItemToggleIconClassList">add</i>
217 </p>
218 </div>
219
220 <div id="e-accordion-@Espresso.Id-@AccordionItem.Item.Id" class="@AccordionItemContentWrapperClassList">
221 <div class="@AccordionItemContentClassList p-accordion-content">
222 @if( @AccordionItemImage.URL != "" ) {
223 <div class="row no-gutters justify-content-@AccordionItem.ImageAlignmentHorizontal">
224 <div class="col-@AccordionItem.ImageScale">
225 <p class="p-img-container">
226 <img src="@AccordionItemImage.URL" class="p-img" alt="@(AccordionItem.ImageAltText == "" ? AccordionItem.Heading : AccordionItem.ImageAltText)" title="@AccordionItem.ImageTitle" longdesc="@AccordionItem.ImageLongDescription">
227 </p>
228 </div>
229 </div>
230 }
231 <div class="p-txt-container dvp-rich-text-content pt-1">
232 @AccordionItem.Text
233 </div>
234
235 </div>
236 </div>
237
238 </div>
239 AccordionItemLoopCounter++;
240 }
241
242 </div>
243
244 </div>
245
