diff --git a/Lombiq.UIKit.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs b/Lombiq.UIKit.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs index 82d29f2..2a15e6a 100644 --- a/Lombiq.UIKit.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs +++ b/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(); + context.TestSlickCarousel(); } 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 void TestSlickCarousel(this UITestContext context) => + context.GetAll(By.ClassName("slick-active")).Count.ShouldBe(4); } diff --git a/Lombiq.UIKit/Constants/ResourceNames.cs b/Lombiq.UIKit/Constants/ResourceNames.cs index 536df87..6fe5419 100644 --- a/Lombiq.UIKit/Constants/ResourceNames.cs +++ b/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); } diff --git a/Lombiq.UIKit/Lombiq.UIKit.csproj b/Lombiq.UIKit/Lombiq.UIKit.csproj index fe99dd8..20665a1 100644 --- a/Lombiq.UIKit/Lombiq.UIKit.csproj +++ b/Lombiq.UIKit/Lombiq.UIKit.csproj @@ -45,11 +45,13 @@ + + diff --git a/Lombiq.UIKit/ResourceManagementOptionsConfiguration.cs b/Lombiq.UIKit/ResourceManagementOptionsConfiguration.cs index 9b46925..403d53f 100644 --- a/Lombiq.UIKit/ResourceManagementOptionsConfiguration.cs +++ b/Lombiq.UIKit/ResourceManagementOptionsConfiguration.cs @@ -9,6 +9,7 @@ public class ResourceManagementOptionsConfiguration : IConfigureOptions options.ResourceManifests.Add(_manifest); diff --git a/Lombiq.UIKit/Views/Showcase/Showcase.cshtml b/Lombiq.UIKit/Views/Showcase/Showcase.cshtml index bb78284..33ca8c2 100644 --- a/Lombiq.UIKit/Views/Showcase/Showcase.cshtml +++ b/Lombiq.UIKit/Views/Showcase/Showcase.cshtml @@ -258,4 +258,27 @@ dropdown-classes="bootstrapSplitButtonSample__dropdown" /> +
+

@T["Slick carousel:"]

+ + @{ + 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"), + }; + + var carouselSettings = @"{ slidesToShow: 4 }"; + } + + + +
diff --git a/Lombiq.UIKit/Views/SlickCarousel.cshtml b/Lombiq.UIKit/Views/SlickCarousel.cshtml new file mode 100644 index 0000000..1ccb115 --- /dev/null +++ b/Lombiq.UIKit/Views/SlickCarousel.cshtml @@ -0,0 +1,64 @@ +@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 + + + + +@{ + var shapes = Model.Shapes as IEnumerable; + if (shapes?.Any() != true) { return; } + + var carouselId = $"carousel-{Guid.NewGuid():N}"; + var additionalClasses = Model.AdditionalClasses?.ToString() ?? string.Empty; + + var mergeSettings = Model.MergeSettings as string; +} + +
+
+ @foreach (var shape in shapes) + { +
+ @await DisplayAsync(shape) +
+ } +
+
+
+ + diff --git a/Lombiq.UIKit/package.json b/Lombiq.UIKit/package.json index 769024b..21588cb 100644 --- a/Lombiq.UIKit/package.json +++ b/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" + } + ] } } diff --git a/Lombiq.UIKit/pnpm-lock.yaml b/Lombiq.UIKit/pnpm-lock.yaml index 2b9f188..4dfa208 100644 --- a/Lombiq.UIKit/pnpm-lock.yaml +++ b/Lombiq.UIKit/pnpm-lock.yaml @@ -3,3 +3,22 @@ lockfileVersion: '6.0' settings: autoInstallPeers: true excludeLinksFromLockfile: false + +dependencies: + slick-carousel: + specifier: ^1.8.1 + version: 1.8.1(jquery@3.7.1) + +packages: + + /jquery@3.7.1: + resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==} + dev: false + + /slick-carousel@1.8.1(jquery@3.7.1): + resolution: {integrity: sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==} + peerDependencies: + jquery: '>=1.8.0' + dependencies: + jquery: 3.7.1 + dev: false