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 @using Bluedesk.DynamicWeb.ItemTypes.Pages;
6 @using Bluedesk.Tools.DynamicWeb.ExtensionMethods;
7 @using Bluedesk.Tools.Generic.ExtensionMethods
8 @using System.Linq;
9 @using Dynamicweb.Content;
10
11 <!-- FIX NEEDED: behaviour when all the items are full height images (for instance logo slider)?? -->
12
13 @{
14 Carousel _data = ItemManager.Storage.GetById<Carousel>(Pageview.CurrentParagraph.ItemId ?? "0");
15
16 var paragraphID = Pageview.CurrentParagraph.ID;
17 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user
18 var classFullWidth = !_data.Fullwidth ? "container" : "w-full"; // If slider or multicolumn has to be in container or full width of the page
19 }
20
21 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
22 @using Dynamicweb;
23 @using Dynamicweb.Content.Items;
24 @using Bluedesk.DynamicWeb.ItemTypes;
25
26
27 @{
28
29 var colorService = new ColorSwatchService();
30
31 string fullWidthContainerClass = _data.Fullwidth ? "" : "container";
32
33 string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : "";
34 string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : "";
35 backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : "";
36 }
37
38
39 @functions {
40 string getbackgroundclass(string backgroundClass)
41 {
42 return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : "";
43 }
44 }
45
46 @helper CTAParagraphImage(ParagraphImageResizable Image, bool ImageAsBackground, string ImagePosition, bool ParallaxImage, bool Fullwidth, string imagesHeight, int paragraphHeight, double ColumnWidthSize)
47 {
48 if (!string.IsNullOrWhiteSpace(Image.Image))
49 {
50
51 string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null;
52 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
53
54 string imageParrallax = ParallaxImage ? "rellax" : "";
55 string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : "";
56 double imageWidth = 2000;
57
58 imageWidth = Fullwidth ? imageWidth : 1200;
59 imageWidth = imageWidth * ColumnWidthSize;
60
61 string strImageWidth = imageWidth + "px";
62 string strImageWidthSize = imageWidth + "w";
63
64 string ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80";
65
66 if (!string.IsNullOrWhiteSpace(Image.Image))
67 {
68 <figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight">
69
70 <picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax">
71 <source media="(max-width: 400px)" srcset="@ImageUrl&Width=400" loading="lazy" width="400" height="500">
72 <source media="(max-width: 994px)" srcset="@ImageUrl&Width=994" loading="lazy" width="994" height="500">
73 <img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
74 </picture>
75
76 </figure>
77 }
78 }
79 }
80
81
82 @helper CTAParagraphContent(int paragraphID, ParagraphHeader Header, ParagraphHeader SubHeader, ParagraphContent Content, CTAButton Button, ParagraphImage Image, bool strCenterVertical, string ctaSubheaderTextColor, string ctaHeaderTextColor, string ctaContentTextColor)
83 {
84
85 bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false;
86 string noImageClass = hasImage ? "" : "no-image";
87
88 string centerTextClass = strCenterVertical ? "text-center" : "";
89 string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center";
90
91 string buttonIconClass = Pageview.Area.Item["Global_button_icon"] != null ? Pageview.Area.Item["Global_button_icon"].ToString().Replace("+", " ") : "fal fa-arrow-right";
92
93 string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID;
94
95 if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
96 {
97
98 <style>
99 .multicolumn--@paragraphID .cta-paragraph .cta-paragraph__subheader,
100 .cta-paragraph--@paragraphID .cta-paragraph__subheader{ color: @ctaSubheaderTextColor !important; }
101 .@paragraphInstanceClass .cta-paragraph__header{ color: @ctaHeaderTextColor !important; }
102 .@paragraphInstanceClass .cta-paragraph__text{ color: @ctaContentTextColor !important; }
103
104 </style>
105
106 <section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass">
107
108 <article class="cta-paragraph__content-container @noImageClass">
109
110 @if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
111 {
112 <header class="cta-paragraph__header @centerTextClass">
113 @if (SubHeader != null)
114 {
115 @SubHeader.HeaderFormatted("cta-paragraph__subheader")
116 }
117 @Header.HeaderFormatted("cta-paragraph__header")
118 </header>
119 }
120
121 @if (!string.IsNullOrWhiteSpace(Content.Text))
122 {
123 <div class="cta-paragraph__text @centerTextClass">@Content.Text</div>
124 }
125
126 </article>
127
128 @if (!string.IsNullOrWhiteSpace(Button.ButtonLink) && !string.IsNullOrWhiteSpace(Button.ButtonText))
129 {
130 string newWindow = Button.NewWindow ? "target='_blank'" : "";
131 string ariaLabel = !string.IsNullOrWhiteSpace(Button.ButtonAriaLabel) ? "aria-label='" + Button.ButtonAriaLabel + "'" : "";
132
133 <a href="@Button.ButtonLink" class="btn cta-paragraph__btn @Button.Configuration.ButtonClass" @newWindow @ariaLabel>
134 <span class="btn__text cta-paragraph__btn-label">@Button.ButtonText</span>
135 <i class="btn__icon cta-paragraph__btn-icon @buttonIconClass"></i>
136 </a>
137 }
138
139 </section>
140
141 }
142
143 }
144
145 @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight)
146 {
147 if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink))
148 {
149 string YoutubeID = Video.YoutubeId;
150 string YoutubeLink = Video.YoutubeLink;
151
152 string VimeoID = Video.VimeoId;
153 string VimeoLink = Video.VimeoLink;
154
155 int CleanVideo = Video.Clean ? 1 : 0;
156 int ShowControls = Video.ShowControls ? 1 : 0;
157 int AutoPlay = Video.AutoPlay ? 1 : 0;
158 int LoopVideo = Video.LoopVideo ? 1 : 0;
159 int MuteAudio = Video.MuteAudio ? 1 : 0;
160 string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : "";
161 string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain();
162 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
163
164 if (!string.IsNullOrWhiteSpace(YoutubeLink))
165 {
166 <section class="cta-paragraph__video-container" style="@imagesHeight">
167 <div class="">
168 <div class="video-player-wrapper @hideControlsClass">
169 <iframe class="video-player" data-video="@YoutubeID" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/@YoutubeID?autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&disablekb=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin"></iframe>
170 </div>
171 </div>
172 </section>
173 }
174 if (!string.IsNullOrWhiteSpace(VimeoLink))
175 {
176 <section class="cta-paragraph__video-container" style="@imagesHeight">
177 <div class="">
178 <div class="video-player-wrapper">
179 <iframe class="video-player" data-video="@VimeoID" frameborder="0" allowfullscreen="1" 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>
180 </div>
181 </div>
182 </section>
183 }
184 }
185 }
186
187 @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical)
188 {
189 if (!string.IsNullOrWhiteSpace(Icon.FaIcon))
190 {
191 string centerIconClass = strCenterVertical ? "justify-center" : "justify-start";
192 string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize);
193
194 <div class="cta-paragraph__icon-container">
195 <div class="cta-paragraph__icon-inner-container @centerIconClass">
196 <span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span>
197 </div>
198 </div>
199 }
200 }
201
202
203 @{
204
205 string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat;
206 string backgroundImageSizeClass = "";
207
208 string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX;
209 string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY;
210
211 string BackgroundImagePositionClass = "";
212
213 if (backgroundImageRepeatClass == "no-repeat")
214 {
215 BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
216 backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize;
217 }
218
219 string ctaBackgroundColor = _data.BackgroundConfiguration.BackgroundColor;
220
221 ctaBackgroundColor = colorService.GetHexColor(Pageview.AreaID, ctaBackgroundColor);
222
223 string contentBackgroundColor = _data.BackgroundConfiguration.contentBackgroundColor;
224
225 string contentGutterClass = _data.BackgroundConfiguration.contentGutter;
226 string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding;
227
228 contentBackgroundColor = colorService.GetHexColor(Pageview.AreaID, contentBackgroundColor);
229
230 }
231
232 <style>
233
234 @@media screen and (min-width: 991px) {
235 .multicolumn--@paragraphID {
236 background-color: @ctaBackgroundColor;
237 }
238
239 .multicolumn--@paragraphID .cta-paragraph {
240 background-color: @contentBackgroundColor;
241 }
242 }
243
244 .flickity-viewport{
245 width: 100%;
246 }
247
248 .header__cta{
249 display: flex;
250 align-items: center;
251 }
252
253 </style>
254
255 @if (amountColumns > 0)
256 {
257 <div class="multicolumn overflow-hidden multicolumn--@paragraphID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @contentGutterClass @BackgroundPadding" data-paragraphid="@paragraphID" id="@paragraphID" style="@backgroundStyle">
258 <div class="@classFullWidth">@RenderContentArea(_data, paragraphID)</div>
259 </div>
260 }
261
262 @helper RenderContentArea(Carousel _data, int paragraphID)
263 {
264
265 var colorService = new ColorSwatchService();
266
267 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user
268 var buttonIconClass = Pageview.Area.Item["Global_button_icon"] != null ? Pageview.Area.Item["Global_button_icon"].ToString().Replace("+", " ") : "fal fa-arrow-right";
269
270 string centerTextClass = _data.CenterText ? "items-center text-center" : "items-start text-left";
271
272 /* Specific for Carousel */
273
274 int colDisplay = _data.ColumnsDisplay; // Amount of displayed column within one screen
275
276 bool fullWidth = _data.Fullwidth; // If slider or multicolumn has to be in container or full widthof the page
277 bool infiniteLoop = _data.Infinite;
278 bool autoPlay = _data.AutoPlay;
279 bool controls = _data.AddControls;
280 bool duration = _data.Duration;
281 bool showDots = _data.ShowDots; // If slider or multicolumn has to be in container or full widthof the page
282 int colAmount = 1;
283
284 bool imagesOnlyBool = checkOnlyImages(_data); // Check if this carousel contains only images (logo slider)
285
286 string ctaSubheaderTextColor = _data.BackgroundConfiguration.CTASubheaderTextColor;
287 string ctaHeaderTextColor = _data.BackgroundConfiguration.CTAHeaderTextColor;
288 string ctaContentTextColor = _data.BackgroundConfiguration.CTAContentTextColor;
289
290 ctaSubheaderTextColor = colorService.GetHexColor(Pageview.AreaID, ctaSubheaderTextColor);
291 ctaHeaderTextColor = colorService.GetHexColor(Pageview.AreaID, ctaHeaderTextColor);
292 ctaContentTextColor = colorService.GetHexColor(Pageview.AreaID, ctaContentTextColor);
293
294 bool Shadow = _data.BackgroundConfiguration.contentShadow;
295 string shadowClass = Shadow ? "contentShadow" : "";
296
297 if (!string.IsNullOrWhiteSpace(@_data.Header.HeaderFormatted()))
298 {
299 <header class="multicolumn__header-wrapper">
300 @_data.Header.HeaderFormatted("multicolumn__header")
301 </header>
302 }
303
304 string carouselHeight = "auto";
305
306 if (imagesOnlyBool && _data.ImageHeight != 0)
307 {
308 carouselHeight = _data.ImageHeight.ToString() + "px";
309 }
310
311 if ((colDisplay <= amountColumns) && (colDisplay != 0))
312 {
313 string flexBasis = 100 / @colDisplay + "%";
314
315 <section class="carousel multicolumn"
316 data-columns="@colAmount"
317 data-dots="@showDots"
318 data-loop="@infiniteLoop"
319 data-autoplay="@autoPlay"
320 data-controls="@controls"
321 data-duration="@duration"
322 style="height: @carouselHeight;">
323
324 @foreach (var column in _data.CarouselItems)
325 {
326
327 bool hasContent = !string.IsNullOrWhiteSpace(column.Button.ButtonText) || !string.IsNullOrWhiteSpace(column.Content.Text) || !string.IsNullOrWhiteSpace(column.Header.HeaderFormatted());
328
329 string image = column.Image.Image;
330 string imagesHeight = _data.ImageHeight == 0 ? "auto" : _data.ImageHeight.ToString() + "px";
331 string ImageContainerFixed = hasContent ? "cta-paragraph__image-container--fixed" : "";
332 string ImageAsBackground = (column.BackgroundConfiguration.ConfigurationName == "Image as Background") ? "cta-paragraph__image--is-background" : "";
333
334 string coverImage = "";
335
336 string figureHeight = !hasContent ? "flex-grow:1" : "height:" + imagesHeight;
337 string TempClass = imagesOnlyBool ? "imageOnly" : "hasContent";
338 string ImageOnlyImageHeight = imagesOnlyBool ? "height:" + imagesHeight + ";" : "height:auto;";
339
340 if (!imagesOnlyBool)
341 {
342 imagesHeight = hasContent ? imagesHeight : imagesHeight = "100%";
343 }
344
345 /*This is work around created by Alla to enable cover mode for stand alone pictures*/
346 if (!hasContent && column.Image.BackgroundSize == "bg-cover")
347 {
348 coverImage = "height:100%;";
349 }
350
351 <div class="multicolumn__item carousel-cell-wrap" style="display: flex; min-height:100%; @ImageOnlyImageHeight width: @flexBasis; @coverImage">
352
353 <section class="cta-paragraph carousel-cell" style="min-height: @imagesHeight; @ImageOnlyImageHeight">
354 @{
355 string newWindow = column.Button.NewWindow ? "target='_blank'" : "";
356 string ariaLabel = !string.IsNullOrWhiteSpace(column.Button.ButtonAriaLabel) ? "aria-label='" + column.Button.ButtonAriaLabel + "'" : "";
357 bool clickableBlock = !string.IsNullOrWhiteSpace(column.Button.ButtonLink) && _data.Clickable;
358 string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : "";
359
360 double ColumnAmount = colDisplay;
361 double ColumnWidthSize = 1 / ColumnAmount;
362 }
363
364 @CTAParagraphImage(
365 column.Image,
366 false,
367 null,
368 false,
369 _data.Fullwidth,
370 imagesHeight,
371 0,
372 ColumnWidthSize
373 )
374 @CTAParagraphContent(
375 paragraphID,
376 column.Header,
377 null,
378 column.Content,
379 column.Button,
380 column.Image,
381 false,
382 ctaSubheaderTextColor,
383 ctaHeaderTextColor,
384 ctaContentTextColor
385 )
386
387 @if (clickableBlock)
388 {
389 <a href="@column.Button.ButtonLink" class="cta-paragraph__clickable" @newWindow @ariaLabel></a>
390 }
391 </section>
392
393 </div>
394 }
395 </section>
396 }
397 else if (colDisplay > amountColumns)
398 {
399 <div>Error: you cant display columns more than you filled in the backend</div>
400 }
401 }
402
403 @functions{
404 // Check if this carousel contains only images (logo slider)
405 bool checkOnlyImages(Carousel _data)
406 {
407
408 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user
409 int emptyColumn = 0;
410
411 // Loop through all the columns
412 foreach (var column in _data.CarouselItems)
413 {
414 // If button is empty AND content is empty AND header is empty => this is img only
415 if (string.IsNullOrWhiteSpace(column.Button.ButtonText) && string.IsNullOrWhiteSpace(column.Content.Text) && string.IsNullOrWhiteSpace(column.Header.HeaderFormatted()))
416 {
417 emptyColumn++;
418 }
419 }
420
421 bool emptyColumnResult = emptyColumn == amountColumns ? true : false;
422
423 return emptyColumnResult;
424
425 }
426 }
427
