1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using System.Collections.Generic
3 @using System
4 @using System.Text.RegularExpressions
5 @using Smartpage.CookieManager
6
7 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
8 @using Dynamicweb.Frontend
9
10 @helper RenderContent(ItemViewModel item, bool isCarousel = false)
11 {
12 string cardClass = item.GetBoolean("ShowAsCard") ? "paragraph-card" : "grid__cell";
13 cardClass = Pageview.Device.ToString() != "Tablet" ? cardClass : "grid__cell";
14
15 string contentPosition = item.GetList("ContentPositions").SelectedValue;
16
17 switch (contentPosition) {
18 case "title-top":
19 <div class="@cardClass">
20 @RenderHeading(item)
21 @RenderImage(item, isCarousel)
22 @RenderText(item)
23 @RenderModule(item)
24 </div>
25 @RenderButton(item)
26 break;
27 case "image-left":
28 <div class="grid">
29 <div class="grid__col-3">
30 @RenderImage(item, isCarousel)
31 </div>
32 <div class="grid__col-9">
33 @RenderHeading(item)
34 @RenderText(item)
35 @RenderModule(item)
36 @RenderButton(item)
37 </div>
38 </div>
39 break;
40 case "image-right":
41 <div class="grid">
42 <div class="grid__col-9">
43 @RenderHeading(item)
44 @RenderText(item)
45 @RenderModule(item)
46 @RenderButton(item)
47 </div>
48 <div class="grid__col-3">
49 @RenderImage(item, isCarousel)
50 </div>
51 </div>
52 break;
53 case "all-centered":
54 <div class="u-ta-center @cardClass">
55 @RenderImage(item, isCarousel)
56 @RenderHeading(item)
57 @RenderText(item)
58 @RenderModule(item)
59 </div>
60 @RenderButton(item)
61 break;
62 case "middle-center":
63 case "middle-left":
64 <div class="u-middle @(contentPosition == "middle-center" ? "u-ta-center" : "")">
65 <div class="@cardClass">
66 @RenderImage(item, isCarousel)
67 @RenderHeading(item)
68 @RenderText(item)
69 @RenderModule(item)
70 </div>
71 @RenderButton(item)
72 </div>
73 break;
74 //for "image-top" and "image-centered"
75 default:
76 <div class="@cardClass">
77 @RenderImage(item, isCarousel)
78 @RenderHeading(item)
79 @RenderText(item)
80 @RenderModule(item)
81 </div>
82 @RenderButton(item)
83 break;
84 }
85 }
86
87 @helper RenderHeading(ItemViewModel item)
88 {
89 if (item.GetBoolean("ShowTitle") != false && !string.IsNullOrEmpty(item.GetString("Title")))
90 {
91 string headerMargin = item.GetString("Text") != "" && item.GetString("Image") != "" ? "u-margin-bottom" : "";
92 headerMargin = Model.GetModuleOutput() == "" ? headerMargin : "u-margin-bottom";
93 string url = item.GetString("Link");
94
95 if (!String.IsNullOrEmpty(url))
96 {
97 <a href="@url">
98 <h2 class="u-no-margin @headerMargin">@item.GetString("Title")</h2>
99 </a>
100 }
101 else
102 {
103 <h2 class="u-no-margin @headerMargin">@item.GetString("Title")</h2>
104 }
105 }
106 }
107
108 @helper RenderButton(ItemViewModel item)
109 {
110 string url = item.GetString("Link");
111 string linkText = item.GetString("LinkText");
112 string secondaryUrl = item.GetString("SecondaryLink");
113 string secondaryLinkText = item.GetString("SecondaryLinkText");
114 string footerCssClass = "";
115 string cardFooterClass = item.GetBoolean("ShowAsCard") ? "paragraph-card-footer" : "grid__cell-footer";
116 cardFooterClass = Pageview.Device.ToString() != "Tablet" ? cardFooterClass : "";
117
118 if (item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center") {
119 footerCssClass = "grid--justify-center";
120 }
121
122 if ((!string.IsNullOrEmpty(url) && !string.IsNullOrEmpty(linkText)) || (!string.IsNullOrEmpty(secondaryUrl) && !string.IsNullOrEmpty(secondaryLinkText)))
123 {
124 <div class="grid__cell @footerCssClass @cardFooterClass">
125 <div class="u-margin-top u-margin-bottom">
126
127 @if (!string.IsNullOrEmpty(url) && !string.IsNullOrEmpty(linkText))
128 {
129 string buttonStyle = !String.IsNullOrEmpty(item.GetList("ButtonDesign").SelectedValue) ? item.GetList("ButtonDesign").SelectedValue : "primary";
130
131 if (url.Contains("http"))
132 {
133 <a href="@url" class="btn btn--@buttonStyle btn--arrow dw-mod" target="_blank">@linkText</a>
134 }
135 else if (url.StartsWith("/Files") || url.StartsWith("/Images"))
136 {
137 <a href="@url" class="btn btn--@buttonStyle btn--arrow dw-mod" download>@linkText</a>
138 }
139 else
140 {
141 <a href="@url" class="btn btn--@buttonStyle btn--arrow dw-mod">@linkText</a>
142 }
143 }
144
145 @if (!string.IsNullOrEmpty(secondaryUrl) && !string.IsNullOrEmpty(secondaryLinkText))
146 {
147 string secondaryButtonStyle = !String.IsNullOrEmpty(item.GetList("SecondaryButtonDesign").SelectedValue) ? item.GetList("SecondaryButtonDesign").SelectedValue : "primary";
148
149 if (secondaryUrl.Contains("http"))
150 {
151 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle btn--arrow dw-mod" target="_blank">@secondaryLinkText</a>
152 }
153 else if (url.StartsWith("/Files") || url.StartsWith("/Images"))
154 {
155 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle btn--arrow dw-mod" download>@secondaryLinkText</a>
156 }
157 else
158 {
159 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle btn--arrow dw-mod">@secondaryLinkText</a>
160 }
161 }
162 </div>
163 </div>
164 } else {
165 <div class="grid__cell-footer @footerCssClass @cardFooterClass"></div>
166 }
167 }
168
169 @helper RenderText(ItemViewModel item)
170 {
171 if (!string.IsNullOrWhiteSpace(item.GetString("Text")))
172 {
173 @item.GetString("Text")
174 }
175 }
176
177 @helper RenderModule(ItemViewModel item)
178 {
179 @Model.GetModuleOutput();
180 }
181
182 @helper RenderImage(ItemViewModel item, bool isCarousel)
183 {
184 if (!string.IsNullOrEmpty(item.GetString("Image")) && item.GetList("ImageStyle").SelectedValue != "background")
185 {
186 string url = item.GetString("Link");
187
188 <div class="u-margin-bottom">
189 @if (!String.IsNullOrEmpty(url))
190 {
191 <a href="@url" class="u-block" title="">@* NOTE: Change in original Razor file. *@
192 @RenderImageElement(item, isCarousel)
193 </a>
194 }
195 else
196 {
197 @RenderImageElement(item, isCarousel)
198 }
199 </div>
200 }
201 }
202
203 @helper RenderImageElement(ItemViewModel item, bool isCarousel)
204 {
205 string image = item.GetFile("Image") != null ? item.GetFile("Image").PathUrlEncoded : "";
206 string imageFilterColor = item.GetList("ColorForTheFilter").SelectedValue != null ? item.GetList("ColorForTheFilter").SelectedValue : "none";
207 string imageFilterPrimary = item.GetList("ImageFilterPrimary").SelectedValue != null ? item.GetList("ImageFilterPrimary").SelectedValue : "none";
208 string imageFilterSecondary = item.GetList("ImageFilterSecondary").SelectedValue != null ? item.GetList("ImageFilterSecondary").SelectedValue : "none";
209 string imageFilterBall = item.GetList("ImageStyle").SelectedValue == "ball" ? "image-filter--ball" : "";
210 string altText = item.GetString("Title");
211 string imgCssClass = "";
212 string imgCrop = !string.IsNullOrEmpty(item.GetList("ImageCrop").SelectedValue) ? item.GetList("ImageCrop").SelectedValue : "5";
213 bool fillCanvas = item.GetBoolean("FillCanvas") != null ? item.GetBoolean("FillCanvas") : true;
214 string fillCanvasString = fillCanvas == true ? "&FillCanvas=true" : "";
215 string imageBoxWidth = "480";
216 int imageWidth = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 620 : 1240;
217 int imageHeight = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 496 : 950;
218 string placeHolderImage = "/Files/Images/placeholder.gif";
219
220 if (imageFilterPrimary == "colorize") {
221 imageFilterPrimary = imageFilterColor;
222 }
223
224 if (item.GetList("ContentPositions").SelectedValue == "image-centered" || item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center")
225 {
226 imgCssClass = "grid__cell-img--centered";
227 }
228
229 <div class="image image-filter image-filter--@imageFilterPrimary @imageFilterBall dw-mod js-main-image-filter">
230 <div class="image-filter image-filter--@imageFilterSecondary @imageFilterBall dw-mod">
231 @if (item.GetList("ImageStyle").SelectedValue == "ball")
232 {
233 imgCssClass += " grid__cell-img--ball";
234 if (!isCarousel)
235 {
236 <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">
237 }
238 else
239 {
240 <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">
241 }
242 }
243 else
244 {
245 string largeImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth + "&height=" + imageHeight + "&crop=" + imgCrop + "&Compression=75" + fillCanvasString + "&DoNotUpscale=true&image=" + image;
246 string smallImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth + "&height=" + imageHeight + "&crop=" + imgCrop + "&Compression=75" + fillCanvasString+ "&DoNotUpscale=true&image=" + image;
247
248 if (!isCarousel)
249 {
250 <img class="@imgCssClass b-lazy" src="@placeHolderImage" data-src="@largeImage" data-src-small="@smallImage" alt="@altText">
251 }
252 else
253 {
254 <img class="@imgCssClass" src="@largeImage" alt="@altText">
255 }
256 }
257 </div>
258 </div>
259 }
260
261 @{
262 string fontColor = !string.IsNullOrEmpty(Model.Item.GetList("FontColor").SelectedValue) ? "u-" + Model.Item.GetList("FontColor").SelectedValue : "";
263 string backgroundColor = !string.IsNullOrEmpty(Model.Item.GetList("BackgroundColor").SelectedValue) ? "u-" + Model.Item.GetList("BackgroundColor").SelectedValue + "--bg" : "";
264 CookieBot cookieBot = new CookieBot();
265
266 string paragraphContainerClasses = "";
267 string containerClasses = "";
268 string gridClasses = "grid ";
269
270 string spacingSize = Model.Item.GetList("Spacing") != null && Model.Item.GetList("Spacing").SelectedValue != "" ? Model.Item.GetList("Spacing").SelectedValue : "lg";
271 string placeHolderImage = "/Files/Images/placeholder.gif";
272 int columnCount = 0;
273 int paragraphCount = 0;
274 int totalParagraphs = Model.Item.GetItems("Paragraph").Count;
275 int totalSlides = 1;
276
277 switch (Model.Item.GetList("Width").SelectedValue)
278 {
279 case "center":
280 containerClasses += "center-container paragraph-container ";
281 paragraphContainerClasses += " " + fontColor + " " + backgroundColor;
282 break;
283 case "full":
284 containerClasses += fontColor + " " + backgroundColor + " ";
285 paragraphContainerClasses += "paragraph-container--full-width ";
286 break;
287 case "combi":
288 paragraphContainerClasses += "paragraph-container--full-width " + fontColor + " " + backgroundColor + " ";
289 containerClasses += "center-container paragraph-container ";
290 break;
291 default:
292 paragraphContainerClasses += "center-container ";
293 break;
294 }
295
296 if (spacingSize == "none")
297 {
298 containerClasses += "paragraph-container--spacing-none ";
299 }
300
301 //background
302 string containerBackgroundImage = "";
303 string containerBackgroundImageSmall = "";
304 string containerBackgroundImageFilterColor = Model.Item.GetList("ColorForTheFilter").SelectedValue != null ? Model.Item.GetList("ColorForTheFilter").SelectedValue : "none";
305 string containerBackgroundImageFilterPrimary = Model.Item.GetList("ImageFilterPrimary").SelectedValue != null ? Model.Item.GetList("ImageFilterPrimary").SelectedValue : "none";
306 string containerBackgroundImageFilterSecondary = Model.Item.GetList("ImageFilterSecondary").SelectedValue != null ? Model.Item.GetList("ImageFilterSecondary").SelectedValue : "none";
307
308 if (containerBackgroundImageFilterPrimary == "colorize")
309 {
310 containerBackgroundImageFilterPrimary = containerBackgroundImageFilterColor;
311 }
312
313 if (Model.Item.GetFile("BackgroundImage") != null)
314 {
315 containerBackgroundImage = "/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=0&Compression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded;
316 containerBackgroundImageSmall = "/Admin/Public/GetImage.ashx?width=1000&height=850&crop=0&&FillCanvas=TrueCompression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded;
317 }
318 else if (string.IsNullOrEmpty(Model.Item.GetList("BackgroundColor").SelectedValue))
319 {
320 backgroundColor = "u-color-light--bg";
321 }
322
323 //separation line
324 bool haveSeparationLine = Model.Item.GetBoolean("SeperationLineAfter");
325 if (haveSeparationLine && Model.Item.GetList("Width").SelectedValue != "center")
326 {
327 paragraphContainerClasses += "multiple-paragraphs-container--seperation-line-after ";
328 }
329 else if (haveSeparationLine)
330 {
331 containerClasses += "multiple-paragraphs-container--seperation-line-after ";
332 }
333
334 //height
335 if (!string.IsNullOrEmpty(Model.Item.GetList("Height").SelectedValue))
336 {
337 gridClasses += "paragraph-container--height-" + Model.Item.GetList("Height").SelectedValue + " ";
338 }
339
340 //is visible for mobiles?
341 var hideForMobile = true;
342 foreach (var paragraph in Model.Item.GetItems("Paragraph"))
343 {
344 if (paragraph.GetList("WidthMobile").SelectedValue != "hide")
345 {
346 hideForMobile = false;
347 break;
348 }
349 }
350 if (Model.Item.GetItems("Paragraph").Count == 0)
351 {
352 hideForMobile = false;
353 }
354
355 if (hideForMobile)
356 {
357 gridClasses += "u-hidden-xs u-hidden-xxs ";
358 }
359 //
360
361 if (Model.Item.GetString("MakeParagraphsCenterAligned") != null && Model.Item.GetBoolean("MakeParagraphsCenterAligned"))
362 {
363 gridClasses += "grid--justify-center ";
364 }
365
366 string containerId = "Paragraph_" + Model.ID;
367 string carouselContainerClass = "";
368 string carouselSlideClass = "";
369
370 //Set as carousel
371 if (Model.Item.GetBoolean("EnableCarousel"))
372 {
373 containerClasses += "carousel js-carousel-container ";
374 containerClasses.Replace(" paragraph-container ", "");
375
376 carouselContainerClass += "carousel__container dw-mod ";
377
378 carouselSlideClass += "carousel__slide dw-mod ";
379
380 containerId = "Carousel_" + Model.ID;
381 }
382
383 //getting video ID from youtube URL
384 string videoId = "";
385
386 if (cookieBot.Statistics)
387 {
388 string videoCode = Model.Item.GetString("VideoURL");
389 Regex regex = new Regex(@".be\/(.[^?]*)");
390 Match match = regex.Match(videoCode);
391 if (match.Success)
392 {
393 videoId = match.Groups[1].Value;
394 }
395 else
396 {
397 regex = new Regex(@"v=([^&]+)");
398 match = regex.Match(videoCode);
399 if (match.Success)
400 {
401 videoId = match.Groups[1].Value;
402 }
403 }
404 }
405
406 }
407 <div class="grid__col-md-12 grid__col--bleed">
408 <section class="multiple-paragraphs-container @paragraphContainerClasses multiple-paragraphs-container--spacing-@spacingSize dw-mod">
409 <div class="background-image image-filter image-filter--@containerBackgroundImageFilterPrimary dw-mod">
410 <div class="background-image__wrapper image-filter image-filter--@containerBackgroundImageFilterSecondary dw-mod">
411 <img class="background-image__cover dw-mod b-lazy" src="@placeHolderImage" data-src="@containerBackgroundImage" data-src-small="@containerBackgroundImageSmall" alt="">
412 @if (!string.IsNullOrEmpty(videoId) && cookieBot.Statistics)
413 {
414 <div class="video-background">
415 <div class="video-background__container">
416 <div class="js-youtube-video" data-video="@videoId" id="ytPlayer@(Model.ID)"></div>
417 </div>
418 </div>
419 }
420 </div>
421 </div>
422 @(Model.Item.GetBoolean("EnableCarousel") ? "<div class='u-padding--lg'>" : "")
423 <div class="@containerClasses @(Model.Item.GetBoolean("EnableCarousel") ? "u-no-padding" : "") dw-mod" id="@containerId">
424 <div class="@carouselContainerClass">
425 <div class="@carouselSlideClass">
426 <div class="@gridClasses dw-mod">
427 @foreach (var paragraph in Model.Item.GetItems("Paragraph"))
428 {
429 int columnWidth = Pageview.Device.ToString() != "Mobile" ? Int32.Parse(paragraph.GetList("Width").SelectedValue) : 12;
430
431 if (columnCount < 12)
432 {
433 columnCount += columnWidth;
434 }
435 else
436 {
437 columnCount = columnWidth;
438 }
439
440 string columnCssClasses = "grid__col-sm-" + columnWidth + " ";
441 if (paragraph.GetList("WidthMobile").SelectedValue != "hide")
442 {
443 columnCssClasses += "grid__col-xs-" + paragraph.GetList("WidthMobile").SelectedValue + " ";
444 }
445 else
446 {
447 columnCssClasses += "u-hidden-xs u-hidden-xxs ";
448 }
449 string backgroundImage = "";
450 string backgroundImageSmall = "";
451 string imageStyle = paragraph.GetList("ImageStyle").SelectedValue;
452 string backgroundImageFilterColor = paragraph.GetList("ColorForTheFilter").SelectedValue != null ? paragraph.GetList("ColorForTheFilter").SelectedValue : "none";
453 string backgroundImageFilterPrimary = paragraph.GetList("ImageFilterPrimary").SelectedValue != null ? paragraph.GetList("ImageFilterPrimary").SelectedValue : "none";
454 string backgroundImageFilterSecondary = paragraph.GetList("ImageFilterSecondary").SelectedValue != null ? paragraph.GetList("ImageFilterSecondary").SelectedValue : "none";
455
456 if (imageStyle == "background" && paragraph.GetFile("Image") != null)
457 {
458 string cropMode = paragraph.GetList("ImageCrop").SelectedValue != null ? paragraph.GetList("ImageCrop").SelectedValue : "0";
459 backgroundImage = "/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=" + cropMode + "&Compression=85&image=" + paragraph.GetFile("Image").PathUrlEncoded;
460 backgroundImageSmall = "/Admin/Public/GetImage.ashx?width=1000&height=850&crop=" + cropMode + "&Compression=85&image=" + paragraph.GetFile("Image").PathUrlEncoded;
461 }
462
463 if (backgroundImageFilterPrimary == "colorize")
464 {
465 backgroundImageFilterPrimary = backgroundImageFilterColor;
466 }
467
468 string paragraphContainerPadding = paragraph.GetBoolean("HidePadding") ? "paragraph-container--no-padding" : "";
469 string contentPosition = paragraph.GetList("ContentPositions").SelectedValue;
470 string contentPositionClasses = contentPosition == "middle-center" || contentPosition == "middle-left" ? "grid--justify-center " : "";
471
472 <div class="@columnCssClasses paragraph-container @paragraphContainerPadding dw-mod @contentPositionClasses">
473 @if (imageStyle == "background" && paragraph.GetFile("Image") != null)
474 {
475 <div class="background-image image-filter image-filter--@backgroundImageFilterPrimary dw-mod">
476 <div class="background-image__wrapper image-filter image-filter--@backgroundImageFilterSecondary dw-mod">
477 <img class="background-image__cover dw-mod b-lazy" src="@placeHolderImage" data-src="@backgroundImage" data-src-small="@backgroundImageSmall" alt="">
478 </div>
479 </div>
480 }
481
482 @RenderContent(paragraph, Model.Item.GetBoolean("EnableCarousel"))
483 </div>
484
485 paragraphCount++;
486 if (paragraphCount != totalParagraphs)
487 {
488 string breakMarkup = string.Empty;
489 if (columnCount == 12)
490 {
491 breakMarkup = "</div></div><div class=\"" + carouselSlideClass + "\"><div class=\"" + gridClasses + "\">";
492 totalSlides++;
493 }
494 @breakMarkup
495 }
496 }
497 </div>
498 </div>
499 </div>
500
501 @if (Model.Item.GetBoolean("EnableCarousel") && totalSlides > 1)
502 {
503 <div class="js-carousel-data" data-carousel-slide-time="@Model.Item.GetString("SlideTime")" data-slides-in-view="1">
504 <div class="carousel-prev-btn dw-mod" onclick="Carousel.GetPreviousSlide('@containerId', true)"></div>
505 <div class="carousel-next-btn dw-mod" onclick="Carousel.GetNextSlide('@containerId', true)"></div>
506 </div>
507 }
508 </div>
509 @(Model.Item.GetBoolean("EnableCarousel") ? "</div>" : "")
510 </section>
511 </div>
