Skip to content

Instantly share code, notes, and snippets.

@gregwiechec
Created June 6, 2023 20:59
Show Gist options
  • Save gregwiechec/0b465801f8e586ad6a4083a86ecb91e8 to your computer and use it in GitHub Desktop.
Save gregwiechec/0b465801f8e586ad6a4083a86ecb91e8 to your computer and use it in GitHub Desktop.
Extended SelectionFactory
.Sleek .select-with-icons.dijitSelectMenu td.dijitMenuItemIconCell {
display: table-cell;
}
.Sleek .select-with-icons.dijitSelectMenu td .dijitInline.dijitMenuItemIcon {
display: inline-block;
}
/* ******************* */
/* CUSTOM STYLES */
/* ******************* */
.dijitSelectMenu .error-item {
background-color: #FF7276;
}
define([
"dojo/_base/declare",
"epi-cms/contentediting/editors/SelectionEditor",
"xstyle/css!./ExtendedSelectionEditor.css"
], function(
declare,
SelectionEditor
) {
return declare([SelectionEditor], {
openDropDown: function () {
this.dropDown.domNode.classList.toggle("select-with-icons", true);
this.dropDown.domNode.classList.toggle(this.name, true);
this.inherited(arguments);
},
_getMenuItemForOption: function (option) {
var menuItem = this.inherited(arguments);
if (this.params.extendedSelection) {
var customOption = this.params.extendedSelection.find(function (x) { return x.value === option.value });
if (customOption) {
if (customOption.iconClass) {
menuItem.set("iconClass", customOption.iconClass);
}
if (customOption["class"]) {
menuItem.set("class", customOption["class"]);
}
}
}
return menuItem;
}
});
});
public class ExtendedSelectItem: SelectItem
{
public string Class { get; set; }
public string IconClass { get; set; }
}
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class ExtendedSelectOneAttribute : Attribute, IDisplayMetadataProvider
{
public virtual Type SelectionFactoryType { get; set; }
private readonly IServiceProvider _serviceProvider;
public ExtendedSelectOneAttribute()
{
_serviceProvider = ServiceLocator.Current.GetInstance<IServiceProvider>();
}
public void CreateDisplayMetadata(DisplayMetadataProviderContext context)
{
var extendedMetadata = context.DisplayMetadata.AdditionalValues[ExtendedMetadata.ExtendedMetadataDisplayKey] as ExtendedMetadata;
if (extendedMetadata == null)
{
return;
}
var originalFactory = new SelectOneAttribute
{
SelectionFactoryType = this.SelectionFactoryType
};
originalFactory.CreateDisplayMetadata(context);
var selectionFactory = (ISelectionFactory)ActivatorUtilities.CreateInstance(_serviceProvider, this.SelectionFactoryType);
extendedMetadata.EditorConfiguration["extendedSelection"] =
selectionFactory.GetSelections(extendedMetadata).ToList()
.OfType<ExtendedSelectItem>()
.Select(x => new
{
x.Text,
x.Value,
x.Class,
x.IconClass
});
extendedMetadata.ClientEditingClass = "alloy/Editors/ExtendedSelectionEditor";
}
}
public class MySelectionFactory : ISelectionFactory
{
public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
{
return new[]
{
new ExtendedSelectItem
{
Text = "Info",
Value = "1",
IconClass = "dijitReset dijitInline dijitIcon epi-iconInfo epi-icon--medium",
Class = "info-item"
},
new ExtendedSelectItem
{
Text = "Info",
Value = "1",
IconClass = "dijitReset dijitInline dijitIcon epi-iconWarning epi-icon--medium",
Class = "warning-item"
},
new ExtendedSelectItem
{
Text = "Info",
Value = "1",
IconClass = "dijitReset dijitInline dijitIcon epi-iconError epi-icon--medium",
Class = "error-item"
}
};
}
}
public class StandardPage : SitePageData
{
// ... more properties
[Display(Name = "Single select", GroupName = SystemTabNames.Content, Order = 250)]
[ExtendedSelectOne(SelectionFactoryType = typeof(MySelectionFactory))]
public virtual string SingleSelect1 { get; set; }
}
@gregwiechec
Copy link
Author

In the example above dropdown is displayed with icons and custom backgroung for some items.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment