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