LMBQ-329: Adding Slick carousel

Lombiq.UIKit.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs

@@ -14,6 +14,7 @@ public static async Task TestUIKitShowcaseBehaviorAsync(this UITestContext conte
         await context.SignInDirectlyAndGoToRelativeUrlAsync("UIKitShowcase");
         await context.TestAccordionAsync();
         await context.TestDropdownButtonAsync();
+        await context.TestSlickCarouselAsync();
     }
 
     public static async Task TestAccordionAsync(this UITestContext context)
@@ -33,4 +34,7 @@ public static async Task TestDropdownButtonAsync(this UITestContext context)
         await context.ClickReliablyOnAsync(By.CssSelector("#buttonContainerId2 button"));
         context.Get(By.CssSelector("#buttonContainerId2 > ul")).Displayed.ShouldBeTrue();
     }
+
+    public static async Task TestSlickCarouselAsync(this UITestContext context) =>
+        context.GetAll(By.ClassName("slick-active")).Count.ShouldBe(4);
 }

Lombiq.UIKit/Constants/ResourceNames.cs

@@ -8,6 +8,8 @@ public static class ResourceNames
     public const string LombiqTextBoxStyle = nameof(LombiqTextBoxStyle);
     public const string LombiqTextBoxScript = nameof(LombiqTextBoxScript);
     public const string LombiqCheckBoxStyle = nameof(LombiqCheckBoxStyle);
+    public const string Slick = nameof(Slick);
+    public const string SlickTheme = nameof(SlickTheme);
 
     public const string LombiqShowcaseStyle = nameof(LombiqShowcaseStyle);
 }

Lombiq.UIKit/Lombiq.UIKit.csproj

@@ -45,11 +45,13 @@
   <ItemGroup Condition="'$(NuGetBuild)' != 'true'">
     <ProjectReference Include="..\..\..\Libraries\Lombiq.HelpfulLibraries\Lombiq.HelpfulLibraries.OrchardCore\Lombiq.HelpfulLibraries.OrchardCore.csproj" />
     <ProjectReference Include="..\..\..\Utilities\Lombiq.NodeJs.Extensions\Lombiq.NodeJs.Extensions\Lombiq.NodeJs.Extensions.csproj" />
+    <ProjectReference Include="..\..\..\..\test\Lombiq.UITestingToolbox\Lombiq.Tests.UI.AppExtensions\Lombiq.Tests.UI.AppExtensions.csproj" />
   </ItemGroup>
 
   <ItemGroup Condition="'$(NuGetBuild)' == 'true'">
     <PackageReference Include="Lombiq.HelpfulLibraries.OrchardCore" Version="9.1.0" />
     <PackageReference Include="Lombiq.NodeJs.Extensions" Version="1.3.3-alpha.0.osoe-751" />
+    <PackageReference Include="Lombiq.Tests.UI.AppExtensions" Version="1.7.0" />
   </ItemGroup>
 
   <Import Condition="'$(NuGetBuild)' != 'true'" Project="..\..\..\Utilities\Lombiq.NodeJs.Extensions\Lombiq.NodeJs.Extensions\Lombiq.NodeJs.Extensions.targets" />

Lombiq.UIKit/ResourceManagementOptionsConfiguration.cs

@@ -9,6 +9,7 @@ public class ResourceManagementOptionsConfiguration : IConfigureOptions<Resource
     private const string Module = "~/Lombiq.UIKit/";
     private const string Css = Module + "css/";
     private const string Js = Module + "js/";
+    private const string Vendors = Module + "vendors/";
 
     private static readonly ResourceManifest _manifest = new();
 
@@ -22,6 +23,11 @@ public ResourceManagementOptionsConfiguration()
             .DefineScript(LombiqTextBoxScript)
             .SetUrl(Js + "textbox-editor.js");
 
+        _manifest
+            .DefineScript(Slick)
+            .SetUrl(Vendors + "slick/slick.min.js")
+            .SetDependencies("jQuery");
+
         _manifest
             .DefineStyle(LombiqCheckBoxStyle)
             .SetUrl(Css + "checkbox.min.css", Css + "checkbox.css");
@@ -37,6 +43,15 @@ public ResourceManagementOptionsConfiguration()
         _manifest
             .DefineStyle(LombiqTextBoxStyle)
             .SetUrl(Css + "textbox.min.css", Css + "textbox.css");
+
+        _manifest
+            .DefineStyle(Slick)
+            .SetUrl(Vendors + "slick/slick.css");
+
+        _manifest
+            .DefineStyle(SlickTheme)
+            .SetUrl(Vendors + "slick/slick-theme.css")
+            .SetDependencies(Slick);
     }
 
     public void Configure(ResourceManagementOptions options) => options.ResourceManifests.Add(_manifest);

Lombiq.UIKit/Views/Showcase/Showcase.cshtml

@@ -258,4 +258,24 @@
                                 dropdown-classes="bootstrapSplitButtonSample__dropdown" />
 
     </div>
+    <div class="showcaseContainer__item">
+        <h1>@T["Slick carousel:"]</h1>
+
+        @{
+            var carouselItems = new[]
+            {
+                await New.Message(Message: "Item 1", Type: "Information"),
+                await New.Message(Message: "Item 2", Type: "Information"),
+                await New.Message(Message: "Item 3", Type: "Information"),
+                await New.Message(Message: "Item 4", Type: "Information"),
+                await New.Message(Message: "Item 5", Type: "Information"),
+                await New.Message(Message: "Item 6", Type: "Information"),
+            };
+        }
+
+        <shape type="SlickCarousel"
+               AdditionalClasses="slickCarouselSample"
+               prop-Shapes="@carouselItems"></shape>
+
+    </div>
 </div>

Lombiq.UIKit/Views/SlickCarousel.cshtml

@@ -0,0 +1,79 @@
+@using OrchardCore.ContentManagement.Display
+@using OrchardCore.DisplayManagement.ModelBinding
+@using OrchardCore.ResourceManagement.TagHelpers
+@using Microsoft.Extensions.Configuration
+@using OrchardCore.ContentManagement
+
+@inject IContentItemDisplayManager ContentItemDisplayManager
+@inject IUpdateModelAccessor UpdateModelAccessor
+@inject IConfiguration Configuration
+
+<style asp-name="@ResourceNames.SlickTheme"></style>
+<script asp-name="@ResourceNames.Slick" at="Foot"></script>
+
+@{
+    var shapes = Model.Shapes as IEnumerable<dynamic>;
+    if (shapes?.Any() != true) { return; }
+
+    var carouselId = $"carousel-{Guid.NewGuid():N}";
+    var additionalClasses = Model.AdditionalClasses?.ToString() ?? string.Empty;
+}
+
+<div id="@carouselId" class="slickCarousel @additionalClasses">
+    <div class="slickCarousel__carousel">
+        @foreach (var shape in shapes)
+        {
+            <div class="slickCarousel__item">
+                @await DisplayAsync(shape)
+            </div>
+        }
+    </div>
+    <div class="slickCarousel__arrows"></div>
+</div>
+
+<script at="Foot">
+    jQuery(function ($) {
+        const $carouselContainer = $("#@carouselId");
+        const $carousel = $carouselContainer.find(".slickCarousel__carousel");
+        const $carouselArrows = $carouselContainer.find(".slickCarousel__arrows");
+
+        $carousel.on("init", () => {
+            // Carousel initializes elements with empty id attributes, which triggers HTML validation errors.
+            $carousel.find("[id]").filter((_, element) => element.id === "").removeAttr("id");
+        });
+
+        $carousel.slick({
+            dots: true,
+            infinite: true,
+            autoplay: @(Configuration.IsUITesting() ? "false" : "true"),
+            autoplaySpeed: 5000,
+            speed: 300,
+            mobileFirst: true,
+            slidesToShow: 2,
+            slidesToScroll: 1,
+            arrows: false,
+            responsive: [
+                {
+                    breakpoint: 768,
+                    settings: {
+                        slidesToShow: 4,
+                        slidesToScroll: 1,
+                        arrows: true,
+                        dots: false,
+                        appendArrows: $carouselArrows,
+                    }
+                },
+                {
+                    breakpoint: 2560,
+                    settings: {
+                        slidesToShow: 8,
+                        slidesToScroll: 1,
+                        arrows: true,
+                        dots: false,
+                        appendArrows: $carouselArrows,
+                    }
+                }
+            ]
+        });
+    });
+</script>

Lombiq.UIKit/package.json

@@ -4,5 +4,18 @@
     "build": "npm explore nodejs-extensions -- pnpm build",
     "clean": "npm explore nodejs-extensions -- pnpm clean",
     "watch": "npm explore nodejs-extensions -- pnpm watch"
+  },
+  "dependencies": {
+    "slick-carousel": "^1.8.1"
+  },
+  "nodejsExtensions": {
+    "assetsToCopy": [
+      {
+        "sources": [
+          "node_modules/slick-carousel/slick"
+        ],
+        "target": "wwwroot/vendors/slick"
+      }
+    ]
   }
 }