1 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
2 @using Dynamicweb;
3 @using Dynamicweb.Content.Items;
4 @using Bluedesk.DynamicWeb.ItemTypes;
5
6
7 @{
8 var paragraphID = Pageview.CurrentParagraph.ID;
9 CTAParagraph _data = Dynamicweb.Services.Items.GetItem("CTAParagraph", Pageview.CurrentParagraph.ItemId).ToCodeFirstItem<CTAParagraph>() ?? new CTAParagraph();
10
11 List<string> BackgroundConfigIdList = ((List<string>)Dynamicweb.Context.Current.Items["BackgroundConfigIdList"]) ?? new List<string>();
12 BackgroundConfigIdList.Add(_data.BackgroundConfigurationID);
13 Dynamicweb.Context.Current.Items["BackgroundConfigIdList"] = BackgroundConfigIdList;
14
15 string contentRightClass = _data.ImagePosition.Equals("right") ? "image-right" : "image-left";
16
17 string newWindow = _data.Button.NewWindow ? "target='_blank'" : "";
18 string ariaLabel = !string.IsNullOrWhiteSpace(_data.Button.ButtonAriaLabel) ? "aria-label='" + _data.Button.ButtonAriaLabel + "'" : "";
19 bool clickableBlock = !string.IsNullOrWhiteSpace(_data.Button.GetLink(Pageview)) && _data.Clickable;
20 string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : "";
21 string ctaHasBackgroundImageClass = _data.ImageAsBackground ? "cta-paragraph--hasbackgroundimg" : "";
22
23 bool hasContent = !string.IsNullOrWhiteSpace(_data.Button.ButtonText) || !string.IsNullOrWhiteSpace(_data.Content.Text) || !string.IsNullOrWhiteSpace(_data.Header.HeaderFormatted());
24 double ColumnWidthSize = hasContent ? 0.5 : 1;
25
26 // string backgroundClass = getbackgroundclass(_data.BackgroundConfiguration.BackgroundClass);
27
28 string AnimateDirection = !string.IsNullOrWhiteSpace(_data.AnimateDirection) ? _data.AnimateDirection : "";
29 bool AnimateHalfBlock = false;
30 int AnimationDuration = _data.AnimateDuration;
31 string DataAosValue = "";
32
33 switch (AnimateDirection)
34 {
35 case "left":
36 DataAosValue = "fade-left";
37 break;
38
39 case "right":
40 DataAosValue = "fade-right";
41 break;
42
43 case "up":
44 DataAosValue = "fade-up";
45 break;
46
47 case "down":
48 DataAosValue = "fade-down";
49 break;
50
51 case "center":
52 AnimateHalfBlock = true;
53 break;
54
55 case "":
56 case "none":
57 // No action //
58 break;
59 }
60
61 string ParagraphHeight = _data.Height == 0 ? "auto" : _data.Height + "px";
62
63 }
64
65 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
66 @using Dynamicweb;
67 @using Dynamicweb.Content.Items;
68 @using Bluedesk.DynamicWeb.ItemTypes;
69
70 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
71 @using Dynamicweb;
72 @using Dynamicweb.Content.Items;
73 @using Bluedesk.DynamicWeb.ItemTypes;
74
75 @functions {
76
77 Dictionary<string, string> GetFontConfiguration(string TextColor, FontConfigurationItemTab FontConfiguration)
78 {
79 var colorService = new ColorSwatchService();
80 TextColor = !string.IsNullOrWhiteSpace(TextColor) ? TextColor : "" ;
81 TextColor = !TextColor.Contains("#") ? colorService.GetHexColor(Pageview.AreaID, TextColor) : TextColor;
82 Dictionary<string, string> FontConfig = new Dictionary<string, string>() {
83 { "textColor" , TextColor },
84 { "fontSize" , FontConfiguration.FontSize },
85 { "lineHeight", FontConfiguration.LineHeight},
86 { "fontFamily" , FontConfiguration.FontConfiguration.FontFamily },
87 { "fontWeight" , FontConfiguration.FontWeight },
88 { "fontStyle" , FontConfiguration.FontStyle }
89 };
90 return FontConfig;
91 }
92
93 public string GenerateButtonConfigVariables(ButtonConfiguration BC, MasterConfig mc, int areaId)
94 {
95 string ButtonLabelAlignment = BC.ButtonLabelAlignment;
96 switch (ButtonLabelAlignment)
97 {
98 case "align-left":
99 ButtonLabelAlignment = "flex-start";
100 break;
101 case "align-center":
102 ButtonLabelAlignment = "center";
103 break;
104 case "align-right":
105 ButtonLabelAlignment = "flex-end";
106 break;
107 case "align-full":
108 ButtonLabelAlignment = "space-between";
109 break;
110 default:
111 ButtonLabelAlignment = "flex-start";
112 break;
113 }
114
115 var btnStyleBlock = new System.Text.StringBuilder();
116
117 // General Config
118 btnStyleBlock.Append(GenerateCssVar("btn-min-height", $"{mc.GeneralConfiguration.ButtonHeight}px"));
119 btnStyleBlock.Append(GenerateCssVar("btn-border-radius", $"{mc.GeneralConfiguration.RoundedCornerValue}px"));
120
121 // Button Config
122 btnStyleBlock.Append(GenerateCssVar("btn-border-width", $"{BC.BorderSize.ToString()}px"));
123 btnStyleBlock.Append(GenerateCssVar("btn-label-alignment", ButtonLabelAlignment));
124
125 // Button Config Tab
126 btnStyleBlock.Append(GenerateCssVar("btn-bg-color", BC.ButtonColorConfiguration.BackgroundColor.GetColorCode(areaId)));
127 btnStyleBlock.Append(GenerateCssVar("btn-font-color", BC.ButtonColorConfiguration.FontColor.GetColorCode(areaId)));
128 btnStyleBlock.Append(GenerateCssVar("btn-border-color", BC.ButtonColorConfiguration.BorderColor.GetColorCode(areaId)));
129
130 // Button Config Hover tab
131 btnStyleBlock.Append(GenerateCssVar("btn-bg-color-hover", BC.ButtonHoverColorConfiguration.BackgroundColor.GetColorCode(areaId)));
132 btnStyleBlock.Append(GenerateCssVar("btn-font-color-hover", BC.ButtonHoverColorConfiguration.FontColor.GetColorCode(areaId)));
133 btnStyleBlock.Append(GenerateCssVar("btn-border-color-hover", BC.ButtonHoverColorConfiguration.BorderColor.GetColorCode(areaId)));
134
135 // Button Config Font Config
136 btnStyleBlock.Append(GenerateCssVar("btn-font-size", BC.FontConfiguration.FontSize));
137 btnStyleBlock.Append(GenerateCssVar("btn-font-config-color", BC.FontConfiguration.Color.GetColorCode(areaId)));
138 btnStyleBlock.Append(GenerateCssVar("btn-font-line-height", BC.FontConfiguration.LineHeight));
139 btnStyleBlock.Append(GenerateCssVar("btn-font-family", BC.FontConfiguration.FontConfiguration.FontFamily));
140 btnStyleBlock.Append(GenerateCssVar("btn-font-weight", BC.FontConfiguration.FontWeight));
141 btnStyleBlock.Append(GenerateCssVar("btn-font-transform", BC.FontConfiguration.FontStyle));
142
143 return btnStyleBlock.ToString();
144 }
145
146 public string GenerateCssVar(string name, string value)
147 {
148 if (!string.IsNullOrWhiteSpace(value)) {
149 return $"--{name}: {value};";
150 } else {
151 return "";
152 }
153 }
154 }
155
156
157 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
158 @using Dynamicweb;
159 @using Dynamicweb.Content.Items;
160 @using Bluedesk.DynamicWeb.ItemTypes;
161 @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
162
163
164 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
165 @using Dynamicweb;
166 @using Dynamicweb.Content.Items;
167 @using Bluedesk.DynamicWeb.ItemTypes;
168 @using Bluedesk.DynamicWeb.ItemTypes.Extensions;
169 @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
170 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration;
171 @using Dynamicweb;
172 @using Dynamicweb.Frontend
173 @using Bluedesk.DynamicWeb.ItemTypes.BaseSolution;
174
175 @helper RenderButton(CTAButton button, PageView Pageview)
176 {
177
178 if (!string.IsNullOrWhiteSpace(button.GetLink(Pageview)))
179 {
180 string Template = button.GetButtonTemplate().Replace("{{ ButtonLink }}", button.GetLink(Pageview));
181 @Template;
182 }
183 }
184
185
186 @{
187
188 var colorService = new ColorSwatchService();
189
190 string fullWidthContainerClass = _data.Fullwidth ? "" : "container";
191
192 string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : "";
193 string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : "";
194 backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : "";
195
196 // string backgroundClass = "null";
197 // string backgroundStyle = "";
198 }
199
200
201 @functions {
202 //string getbackgroundclass(string backgroundClass)
203 //{
204 // return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : "";
205 //}
206 }
207
208 @helper CTAParagraphImage(
209 ParagraphImageResizable Image,
210 bool hasContent,
211 bool ImageAsBackground,
212 string ImagePosition,
213 bool ParallaxImage,
214 bool Fullwidth,
215 string imagesHeight,
216 double ColumnWidthSize,
217 int AnimationDuration = 300,
218 bool AnimateHalfBlock = false
219 )
220 {
221 if (!string.IsNullOrWhiteSpace(Image.Image))
222 {
223
224 string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null;
225 imagesHeight = hasContent ? imagesHeight : "100%";
226 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
227
228 string imageParrallax = ParallaxImage ? "rellax" : "";
229 string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : "";
230 double imageWidth = 2000;
231
232 imageWidth = Fullwidth ? imageWidth : 1200;
233 imageWidth = !ImageAsBackground ? imageWidth * ColumnWidthSize : imageWidth;
234
235 string strImageWidth = imageWidth + "px";
236 string strImageWidthSize = imageWidth + "w";
237
238 string ImageUrl;
239 if (image.EndsWith(".gif"))
240 {
241 ImageUrl = image;
242 }
243 else
244 {
245 ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80";
246 ImageUrl = ImageUrl.Replace("?x", "&x");
247 }
248
249 string animationDirection = AnimateHalfBlock ? ImagePosition.Equals("right") ? "fade-left" : "fade-right" : "";
250
251 if (!string.IsNullOrWhiteSpace(Image.Image))
252 {
253
254 <figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
255
256 <picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax">
257 @if (ImageUrl.EndsWith(".gif"))
258 {
259 <source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
260 <source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
261 <img src="@ImageUrl" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
262 }
263 else
264 {
265 <source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
266 <source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
267 <img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
268 }
269 </picture>
270
271 </figure>
272 }
273 }
274 }
275
276 @helper CTAParagraphContent(
277 int paragraphID,
278 ParagraphHeader Header,
279 ParagraphHeader SubHeader,
280 ParagraphContent Content,
281 CTAButton Button,
282 CTAButton ExtraButton,
283 ParagraphImage Image,
284 bool strCenterVertical,
285 string ImagePosition = "",
286 int AnimationDuration = 300,
287 bool AnimateHalfBlock = false
288 )
289 {
290
291 bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false;
292 string noImageClass = hasImage ? "" : "no-image";
293
294 string centerTextClass = strCenterVertical ? "text-center" : "";
295 string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center";
296
297 string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID;
298
299 string animationDirection = (AnimateHalfBlock && hasImage) ? ImagePosition.Equals("right") ? "fade-right" : "fade-left" : "";
300
301 if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
302 {
303
304 <section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
305
306 <article class="cta-paragraph__content-container @noImageClass">
307
308 @if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
309 {
310 <header class="cta-paragraph__header @centerTextClass">
311 @if (SubHeader != null)
312 {
313 @SubHeader.HeaderFormatted("cta-paragraph__subheader")
314 }
315 @Header.HeaderFormatted("cta-paragraph__header")
316 </header>
317 }
318
319 @if (!string.IsNullOrWhiteSpace(Content.Text))
320 {
321 <div class="cta-paragraph__text @centerTextClass">@Content.Text</div>
322 }
323
324 @if (!string.IsNullOrWhiteSpace(Button.GetLink(Pageview)) && !string.IsNullOrWhiteSpace(Button.ButtonText))
325 {
326 <nav class="cta-paragraph__btn-navigation @centerTextClass">
327 @RenderButton(Button, Pageview)
328 @RenderButton(ExtraButton, Pageview)
329 </nav>
330 }
331
332 </article>
333 </section>
334
335 }
336
337 }
338
339 @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight)
340 {
341 if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink))
342 {
343 string YoutubeID = Video.YoutubeId;
344 string YoutubeLink = Video.YoutubeLink;
345
346 string VimeoID = Video.VimeoId;
347 string VimeoLink = Video.VimeoLink;
348
349 int CleanVideo = Video.Clean ? 1 : 0;
350 int ShowControls = Video.ShowControls ? 1 : 0;
351 int AutoPlay = Video.AutoPlay ? 1 : 0;
352 int LoopVideo = Video.LoopVideo ? 1 : 0;
353 int MuteAudio = Video.MuteAudio ? 1 : 0;
354 string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : "";
355 string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain();
356 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
357
358 if (!string.IsNullOrWhiteSpace(YoutubeLink))
359 {
360 if(AutoPlay == 1)
361 {
362 <section class="cta-paragraph__video-container" style="@imagesHeight">
363 <div class="">
364 <div class="video-player-wrapper @hideControlsClass">
365 <iframe class="video-player" loading="lazy" data-video="@YoutubeID" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube-nocookie.com/embed/@YoutubeID?autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=0"></iframe>
366 </div>
367 </div>
368 </section>
369 }
370 else
371 {
372 <lite-youtube videoid="@YoutubeID" params="controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=0"></lite-youtube>
373 }
374 }
375 if (!string.IsNullOrWhiteSpace(VimeoLink))
376 {
377 <section class="cta-paragraph__video-container" style="@imagesHeight">
378 <div class="">
379 <div class="video-player-wrapper">
380 <iframe class="video-player" loading="lazy" data-video="@VimeoID" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="Vimeo video player" src="https://player.vimeo.com/video/@VimeoID?title=0&byline=0&portrait=0&autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&muted=@MuteAudio"></iframe>
381 </div>
382 </div>
383 </section>
384 }
385 }
386 }
387
388 @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical)
389 {
390 if (!string.IsNullOrWhiteSpace(Icon.FaIcon))
391 {
392 string centerIconClass = strCenterVertical ? "justify-center" : "justify-start";
393 string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize);
394
395 <div class="cta-paragraph__icon-container">
396 <div class="cta-paragraph__icon-inner-container @centerIconClass">
397 <span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span>
398 </div>
399 </div>
400 }
401 }
402
403 @helper RenderContentAlignment(BackgroundConfiguration data)
404 {
405
406 switch (data.ContentElementAlign)
407 {
408 case "align-left":
409 <text>
410 align-items: flex-start;
411 text-align: left;
412 </text>
413 break;
414 case "align-center":
415 <text>
416 align-items: center;
417 text-align: center;
418 </text>
419 break;
420 case "align-right":
421 <text>
422 align-items: flex-end;
423 text-align: right;
424 </text>
425 break;
426 case "align-full":
427 <text>
428 align-items: flex-start;
429 text-align: justify;
430 </text>
431 break;
432 }
433
434 }
435
436
437 <style>
438
439 @@media screen and (min-width: 991px) {
440 .cta-paragraph__container--@paragraphID {
441 height: @ParagraphHeight !important;
442 }
443 }
444
445 </style>
446
447 @if (_data != null)
448 {
449
450 string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding;
451
452 bool Containerfit = _data.BackgroundConfiguration.ContainerFit == "Fit" ? true : false;
453 if (!string.IsNullOrWhiteSpace(contentRightClass))
454 {
455 contentRightClass = Containerfit ? "" : contentRightClass;
456 }
457
458 string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat;
459 string backgroundImageSizeClass = "";
460
461 string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX;
462 string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY;
463
464
465 string BackgroundImagePositionClass = "";
466
467 if (backgroundImageRepeatClass == "no-repeat")
468 {
469 BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
470 backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize;
471 }
472
473 string shadowClass = _data.BackgroundConfiguration.contentShadow ? "contentShadow" : "";
474
475 <section class="cta-paragraph cta-paragraph--@paragraphID config--@_data.BackgroundConfigurationID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @BackgroundPadding @ctaHasBackgroundImageClass" style="@backgroundStyle" data-paragraphid="@paragraphID" id="@paragraphID" data-aos="@DataAosValue" data-aos-duration="@AnimationDuration">
476
477 <div class="cta-paragraph__container cta-paragraph__container--@paragraphID @fullWidthContainerClass @clickableClass @contentRightClass @shadowClass">
478
479 <style>
480
481 .cta-paragraph--@paragraphID .cta-paragraph__content {
482 @if (Containerfit)
483 {
484 <text>
485 flex-grow: 0;
486 </text>
487 }
488 }
489
490 .cta-paragraph--@paragraphID .cta-paragraph__image-container {
491 @if (Containerfit)
492 {
493 <text>
494 position: absolute;
495 top: 0;
496 left: 0;
497 right: 0;
498 bottom: 0;
499 </text>
500 }
501 }
502
503 </style>
504
505 @CTAParagraphImage(
506 _data.Image,
507 true,
508 _data.ImageAsBackground,
509 _data.ImagePosition,
510 _data.ParallaxImage,
511 _data.Fullwidth,
512 "",
513 ColumnWidthSize,
514 AnimationDuration,
515 AnimateHalfBlock
516 )
517 @CTAParagraphContent(
518 paragraphID,
519 _data.Header,
520 _data.SubHeader,
521 _data.Content,
522 _data.Button,
523 _data.ExtraButton,
524 _data.Image,
525 _data.CenterVertical,
526 _data.ImagePosition,
527 AnimationDuration,
528 AnimateHalfBlock
529 )
530
531 @if (clickableBlock)
532 {
533 <a href="@_data.Button.GetLink(Pageview)" class="cta-paragraph__clickable" @newWindow @ariaLabel></a>
534 }
535
536 </div>
537
538 </section>
539 }
540
