1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2
3 @{
4 string listSource = Model.Item.GetRawValueString("ListSource", Model.PageID.ToString());
5 string listBehaviour = Model.Item.GetRawValueString("ListBehaviour", "articles");
6 string articleListSortOrder = Model.Item.GetRawValueString("ArticleListSortOrder", "Descending");
7 string articleListLayout = Model.Item.GetRawValueString("ArticleListLayout", "grid");
8 string columnTheme = Model.Item.GetRawValueString("ColumnTheme", string.Empty).ToString().Replace(" ", "").Trim().ToLower();
9 string columnThemeClass = columnTheme != string.Empty ? " theme " + columnTheme + " p-3" + (articleListLayout == "carousel" ? " px-lg-4" : string.Empty) : string.Empty;
10
11 int maxItemsInList = !string.IsNullOrEmpty(Model.Item.GetInt32("MaxItemsInList").ToString()) ? Model.Item.GetInt32("MaxItemsInList") : 10;
12
13 <div class="h-100@(columnThemeClass) item_@Model.Item.SystemName.ToLower()">
14 <div id="@Model.ID" class="user-select-none" style="scroll-margin-top:var(--header-height,150px)"></div>
15
16 @switch (articleListLayout)
17 {
18 case "grid":
19
20 {
21 if (listBehaviour == "articles")
22 {@RenderArticleList("Swift_Article", listSource, maxItemsInList, articleListSortOrder) }
23 if (listBehaviour == "lists")
24 { @RenderArticleList("Swift_ArticleListPage", listSource, maxItemsInList, articleListSortOrder) }
25 }
26
27 break;
28
29 case "carousel":
30 var carouselSettings = Model.Item.GetRawValueString("CarouselSettings", "4");
31 string slidesPerPage = $"slider-item-show{carouselSettings}";
32 string navigationStyle = $"{Model.Item.GetRawValueString("NavigationStyle", "slider-nav-round")}";
33 string navigationPlacement = $"{Model.Item.GetRawValueString("NavigationPlacement", "slider-nav-on-slides")}";
34 string indicatorStyle = $"{Model.Item.GetRawValueString("IndicatorStyle", string.Empty)}";
35 string revealSlides = Model.Item.GetRawValueString("RevealSlides", "reveal") == "reveal" ? "slider-item-reveal" : string.Empty;
36 string sliderItemsGap = Model.Item.GetRawValueString("SliderItemsGap", "slider-item-gap") == "slider-item-nogap" ? "slider-item-nogap" : string.Empty;
37 string navigationAlwaysVisible = (Model.Item.GetBoolean("NavigationAlwaysVisible")) ? "slider-nav-visible" : string.Empty;
38 string navigationVisibleOnTouch = (Model.Item.GetBoolean("NavigationVisibleOnTouch")) ? "slider-nav-touch" : string.Empty;
39 string navigationShowScrollbar = (Model.Item.GetBoolean("NavigationShowScrollbar")) ? "slider-nav-scrollbar" : string.Empty;
40 string scrollBarForceMobile = (Model.Item.GetBoolean("NavigationShowScrollbar")) ? "--swiffy-slider-track-height:0.5rem !important;" : string.Empty;
41 string navigationSmall = (Model.Item.GetBoolean("NavigationSmall")) ? "slider-nav-sm" : string.Empty;
42 string navigationInvertColors = (Model.Item.GetBoolean("NavigationInvertColors")) ? "slider-nav-dark" : string.Empty;
43 string navigationSlideEntirePage = (Model.Item.GetBoolean("NavigationSlideEntirePage")) ? "slider-nav-page" : string.Empty;
44 string navigationNoLoop = (Model.Item.GetBoolean("NavigationNoLoop")) ? "slider-nav-noloop" : string.Empty;
45 string indicatorsOutsideSlider = (Model.Item.GetBoolean("IndicatorsOutsideSlider") && indicatorStyle != string.Empty) ? "slider-indicators-outside" : string.Empty;
46 string indicatorsHighlightActive = (Model.Item.GetBoolean("IndicatorsHighlightActive")) ? "slider-indicators-highlight" : string.Empty;
47 string indicatorsInvertColors = (Model.Item.GetBoolean("IndicatorsInvertedColors")) ? "slider-indicators-dark" : string.Empty;
48 string indicatorsVisibleOnSmallDevices = (Model.Item.GetBoolean("IndicatorsVisibleOnSmallDevices")) ? "slider-indicators-sm" : string.Empty;
49 string animation = Model.Item.GetRawValueString("Animation", string.Empty) != string.Empty ? $"slider-nav-animation {Model.Item.GetRawValueString("Animation")}" : string.Empty;
50 string autoplay = (Model.Item.GetBoolean("Autoplay")) ? "slider-nav-autoplay" : string.Empty;
51 string autoplayInterval = Model.Item.GetRawValueString("AutoplayInterval", string.Empty);
52 bool hideSliderNavigation = false;
53
54 if (navigationStyle == "slider-nav-none")
55 {
56 hideSliderNavigation = true;
57 }
58
59 <div id="Slider_@Model.ID" class="swiffy-slider @(slidesPerPage) @(navigationStyle) @(revealSlides) @(navigationPlacement) @(navigationAlwaysVisible) @(navigationVisibleOnTouch) @(sliderItemsGap) @(indicatorStyle) @(navigationShowScrollbar) @(navigationSmall) @(navigationInvertColors) @(indicatorsOutsideSlider) @(navigationNoLoop) @(indicatorsHighlightActive) @(indicatorsInvertColors) @(indicatorsVisibleOnSmallDevices) @(navigationSlideEntirePage) @(animation) @(autoplay) item_@Model.Item.SystemName.ToLower()" style="--swiffy-slider-nav-light:var(--swift-foreground-color);--swiffy-slider-nav-dark:var(--swift-background-color);visibility:hidden;opacity:0;@(scrollBarForceMobile)" data-slider-nav-autoplay-interval="@(autoplayInterval)">
60 <div class="slider-container pb-3 py-lg-3 px-lg-3 mt-lg-n3 mx-lg-n3">
61 @{
62 if (listBehaviour == "articles")
63 { @RenderArticleList("Swift_Article", listSource, maxItemsInList, articleListSortOrder) }
64 if (listBehaviour == "lists")
65 { @RenderArticleList("Swift_ArticleListPage", listSource, maxItemsInList, articleListSortOrder) }
66 }
67 </div>
68
69 @if (!hideSliderNavigation)
70 {
71 <button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:1;">
72 <span class="visually-hidden">@Translate("Previous slide")</span>
73 </button>
74 <button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:1;">
75 <span class="visually-hidden">@Translate("Next slide")</span>
76 </button>
77 }
78 @if (indicatorStyle != "slider-indicators-hidden")
79 {
80 <div class="slider-indicators" style="z-index:1;"></div>
81 }
82
83 <script type="module" src="/Files/Templates/Designs/Swift/Assets/js/swiffy-slider.js"></script>
84 <script type="module">
85 const slider = document.querySelector('#Slider_@Model.ID');
86
87 swift.AssetLoader.Load('/Files/Templates/Designs/Swift/Assets/css/swiffy-slider.min.css', 'css');
88 document.addEventListener('load.swift.assetloader', () => {
89 swiffyslider.initSlider(slider);
90 slider.style.opacity = 1;
91 slider.style.visibility = "visible";
92 });
93
94 </script>
95
96 @if (indicatorStyle != "slider-indicators-hidden")
97 {
98 <script type="module">
99 const slider = document.querySelector('#Slider_@Model.ID');
100 const sliderContainer = slider.querySelector('.slider-container');
101 let slides = sliderContainer.querySelectorAll('article');
102 const sliderIndicators = slider.querySelector('.slider-indicators');
103
104 slides.forEach((slide,index) => {
105 const indicator = document.createElement('template');
106 indicator.innerHTML = `
107 <button type="button" class="${index == 0 ? "active" : ""}" title='@Translate("Go to slide") ${index + 1}'>
108 <span class="visually-hidden">@Translate("Go to slide") ${index + 1}</span>
109 </button>
110 `;
111 sliderIndicators.appendChild(indicator.content);
112 });
113 </script>
114 }
115 </div>
116
117 break;
118 }
119 </div>
120 }
121
122 @helper RenderArticleList(string itemType, string listSource, int maxItemsInList, string articleListSortOrder)
123 {
124 var parent = Dynamicweb.Context.Current.Request.QueryString.Get("list");
125 var query = string.IsNullOrEmpty(parent) ? listSource : parent;
126 var includeAllChildren = Model.Item.GetRawValueString("ListDepth", "all") == "all" ? true : false;
127 var listContext = Model.Item?.GetRawValueString("ListContext", string.Empty).Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
128 var filterString = string.Join(" or ", listContext.Select(item => $"Tags == \"{item}\" or Tags ends with \",{item}\" or Tags starts with \"{item},\" or Tags contains \",{item},\""));
129
130 @RenderItemList(new
131 {
132 ItemType = itemType,
133 ListTemplate = "ItemPublisher/List/List.cshtml",
134 ItemFieldsList = "*",
135 ListSourceType = "Page",
136 ListSourcePage = query,
137 ListPageSize = maxItemsInList,
138 IncludeParagraphItems = true,
139 ListOrderBy = "PublishedDate",
140 ListSecondOrderBy = "Updated",
141 ListOrderByDirection = articleListSortOrder,
142 IncludeAllChildItems = includeAllChildren,
143 Filter = itemType == "Swift_Article" ? filterString : null // Filter only if "articles only"
144 })
145 }
146