1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2
3 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
4 @using Dynamicweb.Frontend
5
6 @helper RenderContent(ItemViewModel item, bool isCarousel = false)
7 {
8 string cardClass = item.GetBoolean("ShowAsCard") ? "paragraph-card" : "grid__cell";
9 cardClass = Pageview.Device.ToString() != "Tablet" ? cardClass : "grid__cell";
10
11 if (item.GetList("ContentPositions").SelectedValue == "image-top" || item.GetList("ContentPositions").SelectedValue == "image-centered" || string.IsNullOrEmpty(item.GetList("ContentPositions").SelectedValue))
12 {
13 <div class="@cardClass">
14 @RenderImage(item, isCarousel)
15 @RenderHeading(item)
16 @RenderText(item)
17 @RenderModule(item)
18 </div>
19 @RenderButton(item)
20 }
21
22 if (item.GetList("ContentPositions").SelectedValue == "title-top")
23 {
24 <div class="@cardClass">
25 @RenderHeading(item)
26 @RenderImage(item, isCarousel)
27 @RenderText(item)
28 @RenderModule(item)
29 </div>
30 @RenderButton(item)
31 }
32
33 if (item.GetList("ContentPositions").SelectedValue == "image-left")
34 {
35 <div class="grid">
36 <div class="grid__col-3">
37 @RenderImage(item, isCarousel)
38 </div>
39 <div class="grid__col-9">
40 @RenderHeading(item)
41 @RenderText(item)
42 @RenderModule(item)
43 @RenderButton(item)
44 </div>
45 </div>
46 }
47
48 if (item.GetList("ContentPositions").SelectedValue == "all-centered")
49 {
50 <div class="u-ta-center @cardClass">
51 @RenderImage(item, isCarousel)
52 @RenderHeading(item)
53 @RenderText(item)
54 @RenderModule(item)
55 </div>
56 @RenderButton(item)
57 }
58
59 if (item.GetList("ContentPositions").SelectedValue == "middle-center")
60 {
61 <div class="u-ta-center u-middle">
62 <div class="@cardClass">
63 @RenderImage(item, isCarousel)
64 @RenderHeading(item)
65 @RenderText(item)
66 @RenderModule(item)
67 </div>
68 @RenderButton(item)
69 </div>
70 }
71
72 if (item.GetList("ContentPositions").SelectedValue == "middle-left")
73 {
74 <div class="grid__cell u-middle">
75 <div class="@cardClass">
76 @RenderImage(item, isCarousel)
77 @RenderHeading(item)
78 @RenderText(item)
79 @RenderModule(item)
80 </div>
81 @RenderButton(item)
82 </div>
83 }
84 }
85
86 @helper RenderHeading(ItemViewModel item)
87 {
88 if (item.GetBoolean("ShowTitle") != false && !string.IsNullOrEmpty(item.GetString("Title")))
89 {
90 string headerMargin = item.GetString("Text") != "" && item.GetString("Image") != "" ? "u-margin-bottom" : "";
91 headerMargin = Model.GetModuleOutput() == "" ? headerMargin : "u-margin-bottom";
92 string url = item.GetString("Link");
93
94 if (!String.IsNullOrEmpty(url))
95 {
96 <a href="@url">
97 <h1 class="@headerMargin">@item.GetString("Title")</h1>
98 </a>
99 }
100 else
101 {
102 <h1 class="@headerMargin">@item.GetString("Title")</h1>
103 }
104 }
105 }
106
107 @helper RenderButton(ItemViewModel item)
108 {
109 string url = item.GetString("Link");
110 string linkText = item.GetString("LinkText");
111 string footerCssClass = "";
112 string cardFooterClass = item.GetBoolean("ShowAsCard") ? "paragraph-card-footer" : "grid__cell-footer d-block";
113 cardFooterClass = Pageview.Device.ToString() != "Tablet" ? cardFooterClass : "";
114
115 if (item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center") {
116 footerCssClass = "grid--justify-center";
117 }
118
119 if (!string.IsNullOrEmpty(url) && !string.IsNullOrEmpty(linkText))
120 {
121 string buttonStyle = !String.IsNullOrEmpty(item.GetList("ButtonDesign").SelectedValue) ? item.GetList("ButtonDesign").SelectedValue : "primary";
122
123 <div class="@footerCssClass @cardFooterClass">
124 <div class="u-margin-top u-margin-bottom">
125 @if (url.Contains("http"))
126 {
127 <a href="@url" class="btn btn--@buttonStyle dw-mod" target="_blank">@linkText</a>
128 }
129 else if (url.Contains("/"))
130 {
131 <a href="@url" class="btn btn--@buttonStyle dw-mod" download>@linkText</a>
132 }
133 else
134 {
135 <a href="@url" class="btn btn--@buttonStyle dw-mod">@linkText</a>
136 }
137 </div>
138 </div>
139 } else {
140 <div class="grid__cell-footer @footerCssClass @cardFooterClass"></div>
141 }
142 }
143
144 @helper RenderText(ItemViewModel item)
145 {
146 if (!string.IsNullOrWhiteSpace(item.GetString("Text")))
147 {
148 @item.GetString("Text")
149 }
150 }
151
152 @helper RenderModule(ItemViewModel item)
153 {
154 @Model.GetModuleOutput();
155 }
156
157 @helper RenderImage(ItemViewModel item, bool isCarousel)
158 {
159 if (!string.IsNullOrEmpty(item.GetString("Image")) && item.GetList("ImageStyle").SelectedValue != "background")
160 {
161 string url = item.GetString("Link");
162
163 <div class="u-margin-bottom">
164 @if (!String.IsNullOrEmpty(url))
165 {
166 <a href="@url">
167 @RenderImageElement(item, isCarousel)
168 </a>
169 }
170 else
171 {
172 @RenderImageElement(item, isCarousel)
173 }
174 </div>
175 }
176 }
177
178 @helper RenderImageElement(ItemViewModel item, bool isCarousel)
179 {
180 string image = item.GetFile("Image") != null ? System.Web.HttpContext.Current.Server.UrlEncode(item.GetFile("Image").Path) : "";
181 string altText = item.GetString("Title");
182 string imgCssClass = "";
183 string imgCrop = !string.IsNullOrEmpty(item.GetList("ImageCrop").SelectedValue) ? item.GetList("ImageCrop").SelectedValue : "5";
184 string imageBoxWidth = "480";
185 int imageWidth = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 496 : 992;
186 int imageHeight = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 380 : 760;
187 string placeHolderImage = "/Files/Images/placeholder.gif";
188
189 if (item.GetList("ContentPositions").SelectedValue == "image-centered" || item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center")
190 {
191 imgCssClass = "grid__cell-img--centered";
192 }
193
194 if (item.GetList("ImageStyle").SelectedValue == "ball")
195 {
196 imgCssClass += " grid__cell-img--ball";
197 if (!isCarousel)
198 {
199 <img class="grid__cell-img @imgCssClass b-lazy" src="@placeHolderImage" data-src="/Admin/Public/GetImage.ashx?width=@imageBoxWidth&height=@imageBoxWidth&crop=@imgCrop&Compression=75&DoNotUpscale=true&FillCanvas=true&image=@image" alt="@altText">
200 }
201 else
202 {
203 <img class="grid__cell-img @imgCssClass" src="/Admin/Public/GetImage.ashx?width=@imageBoxWidth&height=@imageBoxWidth&crop=@imgCrop&Compression=75&DoNotUpscale=true&image=@image" alt="@altText">
204 }
205 }
206 else
207 {
208 string largeImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth + "&height=" + imageHeight + "&crop=" + imgCrop + "&Compression=75&FillCanvas=true&DoNotUpscale=true&image=" + image;
209 string smallImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth/2 + "&height=" + imageHeight/2 + "&crop=" + imgCrop + "&Compression=75&DoNotUpscale=true&FillCanvas=true&image=" + image;
210
211 if (!isCarousel)
212 {
213 <img class="@imgCssClass b-lazy" src="@placeHolderImage" data-src="@largeImage" data-src-small="@smallImage" alt="@altText">
214 }
215 else
216 {
217 <img class="@imgCssClass" src="@largeImage" alt="@altText">
218 }
219 }
220 }
221
222 @{
223 string fontColor = !string.IsNullOrEmpty(Model.Item.GetList("FontColor").SelectedValue) ? "u-" + Model.Item.GetList("FontColor").SelectedValue : "";
224 string backgroundColor = !string.IsNullOrEmpty(Model.Item.GetList("BackgroundColor").SelectedValue) ? "u-" + Model.Item.GetList("BackgroundColor").SelectedValue + "--bg" : "";
225 string paragraphContainerClasses = "";
226 string containerClasses = string.IsNullOrEmpty(Model.Item.GetList("Width").SelectedValue) ? "center-container dw-mod" : "";
227 string gridClasses = "grid";
228 string spacingSize = Model.Item.GetList("Spacing") != null && Model.Item.GetList("Spacing").SelectedValue != "" ? Model.Item.GetList("Spacing").SelectedValue : "lg";
229 bool isCenter = Model.Item.GetBoolean("CenterContent");
230
231 int columnCount = 0;
232 int paragraphCount = 0;
233 int totalParagraphs = Model.Item.GetItems("Paragraph").Count;
234 int totalSlides = 1;
235
236 if (Model.Item.GetList("Width").SelectedValue == "center") {
237 containerClasses = fontColor + " " + backgroundColor + " center-container";
238 }
239
240 if (Model.Item.GetList("Width").SelectedValue == "full")
241 {
242 containerClasses = fontColor + " " + backgroundColor;
243 }
244
245 if (Model.Item.GetList("Width").SelectedValue == "combi")
246 {
247 paragraphContainerClasses = @fontColor + " " + @backgroundColor;
248 containerClasses = "center-container";
249 }
250
251 string fullBackgroundImage = "";
252 if (Pageview.Device.ToString() != "Mobile" && Pageview.Device.ToString() != "Tablet" && Model.Item.GetFile("BackgroundImage") != null)
253 {
254 fullBackgroundImage = "background-image:url(/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=0&Compression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").Path + ");";
255 fullBackgroundImage += " background-position: center center; background-size: cover; ";
256 }
257 else if((Pageview.Device.ToString() == "Mobile" || Pageview.Device.ToString() == "Tablet") && Model.Item.GetFile("Mobile_BackgroundImage") != null)
258 {
259 fullBackgroundImage = "background-image:url(/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=5&Compression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("Mobile_BackgroundImage").Path + ");";
260 fullBackgroundImage += " background-position: center center; background-size: cover; ";
261 }
262 else if (string.IsNullOrEmpty(Model.Item.GetList("BackgroundColor").SelectedValue)) {
263 backgroundColor = "u-color-light--bg";
264 gridClasses += " ";
265 }
266
267 if (Model.Item.GetBoolean("SeperationLineAfter") && Model.Item.GetList("Width").SelectedValue != "center") {
268 paragraphContainerClasses += " multiple-paragraphs-container--seperation-line-after";
269 } else if (Model.Item.GetBoolean("SeperationLineAfter")) {
270 containerClasses += " multiple-paragraphs-container--seperation-line-after";
271 }
272
273 gridClasses += !string.IsNullOrEmpty(Model.Item.GetList("Height").SelectedValue) ? " paragraph-container--height-" + Model.Item.GetList("Height").SelectedValue : "";
274
275 string containerId = "Paragraph_" + Model.ID;
276 string carouselContainerClass = "";
277 string carouselSlideClass = "";
278
279 //Set as carousel
280 if (Model.Item.GetBoolean("EnableCarousel")) {
281 containerClasses += " carousel js-carousel-container";
282 carouselContainerClass += "carousel__container dw-mod";
283 carouselSlideClass += "carousel__container__slide dw-mod";
284 containerId = "Carousel_" + Model.ID;
285 }
286 }
287
288 <section class="multiple-paragraphs-container @paragraphContainerClasses multiple-paragraphs-container--spacing-@spacingSize dw-mod" style="@fullBackgroundImage">
289 <div class="@containerClasses dw-mod @(isCenter ? "text-center" : "")" id="@containerId">
290 <div class="@carouselContainerClass">
291 <div class="@carouselSlideClass">
292 <div class="@gridClasses">
293 @foreach (var paragraph in Model.Item.GetItems("Paragraph"))
294 {
295 int columnWidth = Pageview.Device.ToString() != "Mobile" ? Int32.Parse(paragraph.GetList("Width").SelectedValue) : 12;
296 if (columnCount < 12)
297 {
298 columnCount += columnWidth;
299 }
300 else
301 {
302 columnCount = columnWidth;
303 }
304
305 string columnCssClasses = "grid__col-md-" + columnWidth + " grid__col-xs-" + paragraph.GetList("WidthMobile").SelectedValue;
306 string backgroundImage = "";
307 string imageStyle = paragraph.GetList("ImageStyle").SelectedValue;
308
309 if (paragraph.GetString("WidthMobile") == "hide")
310 {
311 columnCssClasses = "grid__col-md-" + columnWidth + " grid__col-xs--hidden";
312 }
313
314 if (imageStyle == "background" && paragraph.GetFile("Image") != null)
315 {
316 columnCssClasses += " grid__col--bg";
317 string cropMode = paragraph.GetList("ImageCrop").SelectedValue != null ? paragraph.GetList("ImageCrop").SelectedValue : "0";
318 backgroundImage = "background-image:url(/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=" + cropMode + "&Compression=85&DoNotUpscale=true&image=" + paragraph.GetFile("Image").Path + ");";
319 }
320
321 <div class="@columnCssClasses paragraph-container m-auto" style="@backgroundImage">
322 @RenderContent(paragraph, Model.Item.GetBoolean("EnableCarousel"))
323 </div>
324
325 paragraphCount++;
326 if (paragraphCount != totalParagraphs) {
327 string breakMarkup = string.Empty;
328 if (columnCount == 12)
329 {
330 breakMarkup = "</div></div><div class=\"" + carouselSlideClass + "\"><div class=\"" + gridClasses + "\">";
331 totalSlides++;
332 }
333 @breakMarkup
334 }
335 }
336 </div>
337 </div>
338 </div>
339
340 @if (Model.Item.GetBoolean("EnableCarousel") && totalSlides > 1)
341 {
342 <div class="js-carousel-data" data-total-slides="@totalSlides" data-carousel-slide-time="@Model.Item.GetString("SlideTime")">
343 <div class="carousel-prev-btn dw-mod" onclick="Carousel.GetPreviousSlide(this)"></div>
344 <div class="carousel-next-btn dw-mod" onclick="Carousel.GetNextSlide(this)"></div>
345 </div>
346 }
347 </div>
348 </section>
Egenproduktion af genbrugsplast
Bestil før kl. 14.00 - så sender vi i dag
Lagerførende på varer til akutopgaver
Gratis beregning og dimensionering