Created
January 12, 2025 07:17
-
-
Save PNergard/865a402c0fb41fdc04bac8f67e79e66f to your computer and use it in GitHub Desktop.
Optimizely drag and drop tab sorter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @using BlazorLabs.Cms.BlazorComponents | |
| @using EPiServer.Framework.Web.Mvc.Html | |
| @using System.Diagnostics.Metrics | |
| <!DOCTYPE html> | |
| <html lang="@(Model.CurrentPage.Language)"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=10" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>@Model.CurrentPage.MetaTitle</title> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> | |
| <link href="~/_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> | |
| <base href="~/" /> | |
| </head> | |
| <body> | |
| @RenderBody() | |
| <script src="~/_framework/blazor.server.js"></script> | |
| <script src="_content/MudBlazor/MudBlazor.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @using MudBlazor.Utilities | |
| @inject ITabDefinitionRepository _tabDefinitionsRepository | |
| <MudPaper Class="ma-4" Elevation="1"> | |
| <MudText>Drag and drop sorting of tab definitions</MudText> | |
| </MudPaper> | |
| <MudDropContainer T="DropItem" Items="_dropzoneItems" @ref="_dropContainer" ItemsSelector="@((item,dropzone) => item.Selector == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1"> | |
| <ChildContent> | |
| <MudPaper Class="ma-4 flex-grow-1"> | |
| <MudList Gutters="true" T="string" Class="d-flex flex-column mud-height-full"> | |
| <MudDropZone T="DropItem" Identifier="Tabs" Class="flex-grow-1" AllowReorder="true" /> | |
| </MudList> | |
| </MudPaper> | |
| </ChildContent> | |
| <ItemRenderer> | |
| <MudListItem Class="out" T="string" Text="@($"{context.Name}")" /> | |
| </ItemRenderer> | |
| </MudDropContainer> | |
| <MudButton Class="ma-4" Variant="Variant.Filled" OnClick="SetTabDefinitions">Save</MudButton> | |
| <MudButton Variant="Variant.Text" Color="Color.Error" OnClick="Reset">Reset</MudButton> | |
| @code { | |
| private MudDropContainer<DropItem>? _dropContainer; | |
| private List<DropItem> _dropzoneItems = new(); | |
| protected override void OnInitialized() | |
| { | |
| _dropzoneItems = GetTabDefinitions(); | |
| } | |
| private void ItemUpdated(MudItemDropInfo<DropItem> dropItem) | |
| { | |
| dropItem.Item.Selector = dropItem.DropzoneIdentifier; | |
| _dropzoneItems.UpdateOrder(dropItem, item => item.Order, 0); | |
| var items = _dropzoneItems; | |
| } | |
| private List<DropItem> GetTabDefinitions() | |
| { | |
| var tabs = _tabDefinitionsRepository.List(); | |
| return tabs.Select((x, index) => new DropItem() { Name = x.Name, ID = x.ID, Selector = "Tabs", Order = index}).ToList(); | |
| } | |
| private void SetTabDefinitions() | |
| { | |
| var indexOffset = 100; | |
| if (_dropContainer != null) | |
| { | |
| var sortedTabs = _dropContainer.Items.OrderBy(x=> x.Order).ToList(); | |
| foreach (var tab in sortedTabs) | |
| { | |
| var writableTabClone = _tabDefinitionsRepository.Load(tab.ID).CreateWritableClone(); | |
| if (writableTabClone != null) | |
| { | |
| writableTabClone.SortIndex = tab.Order + indexOffset; | |
| _tabDefinitionsRepository.Save(writableTabClone); | |
| } | |
| } | |
| } | |
| } | |
| private void Reset() | |
| { | |
| _dropzoneItems = GetTabDefinitions(); | |
| StateHasChanged(); | |
| _dropContainer.Refresh(); | |
| } | |
| public class DropItem | |
| { | |
| public string Name { get; init; } | |
| public int ID { get; set; } | |
| public string Selector { get; set; } | |
| public int Order { get; set; } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Optimizely drag and drop tab sorter
A small Razor component that let you use drag and drop sorting of Optimizely content type tabs.
How to use
You need to setup Blazor SSR rendering in your CMS-solution. I have included a MVC layout in this Gist as a starter if you want to define your own content type for Blazor components implemented with MudBlazor
Two good resources to get you started with optimizely and Blazor
https://www.epinova.se/en/blog/2024/use-blazor-components-in-optimizely-cms-adminedit-interface/
https://optimizely.blog/2022/04/blazor-server-mvc-with-optimizely/
MudBlazor
https://mudblazor.com/