EPiserver ColorPicker property

ColorEditor.js

define([
    "dojo/_base/declare",
 
    "dijit/_CssStateMixin",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
 
    "epi/shell/widget/_ValueRequiredMixin"
],
function (
    declare,
 
    _CssStateMixin,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
 
    _ValueRequiredMixin
) {
 
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {
 
        templateString: `<div class="dijitInline" tabindex="-1" role="presentation">
                            <div data-dojo-attach-point="stateNode, tooltipNode">
                                <input type="color" data-dojo-attach-point="colorPicker" />
                            </div>
                        </div>`,
 
        value: null,
 
        onChange: function (value) { },
 
        postCreate: function () {
            this.inherited(arguments);
            this.connect(this.colorPicker, "onChange", this._onColorChanged);
 
            if (this.params.predefinedColors.length > 0) {
                var list = document.createElement("datalist");
                list.id = this.id + "-list";
                this.params.predefinedColors.forEach(function (color) {
                    var option = document.createElement("option");
                    option.value = color;
                    list.appendChild(option);
                });
 
                this.stateNode.appendChild(list);
                this.colorPicker.setAttribute("list", list.id);
            }
        },
 
        isValid: function () {
            if (!this.required) {
                return true;
            }
            return this.value !== "";
        },
 
        _setValueAttr: function (value) {
            this._set("value", value);
            this.colorPicker.value = value;
        },
 
        _getValueAttr: function () {
            var val = this.colorPicker && this.colorPicker.value;
            return val;
        },
 
        _setReadOnlyAttr: function (value) {
            this._set("readOnly", value);
            if (value) {
                this.colorPicker.disabled = true;
            } else {
                this.colorPicker.removeAttribute("disabled");
            }
        },
 
        _onColorChanged: function (value) {
            this._set("value", value);
            if (this._started && this.validate()) {
                this.onChange(value);
            }
        }
    });
});

ColorEditorDescriptor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using EPiServer.ServiceLocation;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;
 
namespace AlloyTemplates.Business.EditorDescriptors;
 
[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = UIHint)]
public class ColorEditorDescriptor : EditorDescriptor
{
    public const string UIHint = "AlloyColor";
 
    private IPredefinedColors _predefinedColors;
 
    public ColorEditorDescriptor(IPredefinedColors predefinedColors)
    {
        _predefinedColors = predefinedColors;
    }
 
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        ClientEditingClass = "alloy/Editors/ColorEditor";
        this.EditorConfiguration["predefinedColors"] = _predefinedColors.GetPredefinedColors(metadata.PropertyName, metadata.ContainerType.Name);
        base.ModifyMetadata(metadata, attributes);
    }
}
 
public interface IPredefinedColors
{
    IEnumerable<string> GetPredefinedColors(string propertyName, string contentTypeName);
}
 
[ServiceConfiguration(typeof(IPredefinedColors))]
internal class DefaultPredefinedColors : IPredefinedColors
{
    public IEnumerable<string> GetPredefinedColors(string propertyName, string contentTypeName) =>
        Enumerable.Empty<string>();
}

ColorPickerInitializer.cs

[ModuleDependency(typeof(InitializationModule))]
public class ColorPickerInitializer : IConfigurableModule
{
    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.ConfigurationComplete += (o, e) =>
        {
            context.Services.AddTransient<IPredefinedColors, CustomPredefinedColors>();
        };
    }
 
    public void Initialize(InitializationEngine context) {};
 
    public void Uninitialize(InitializationEngine context) {};
 
    public void Preload(string[] parameters){}
}
 
public class CustomPredefinedColors : IPredefinedColors
{
    public IEnumerable<string> GetPredefinedColors(string propertyName, string contentTypeName)
    {
        return new[]
        {
            "#ff0000",
            "#0000ff",
            "#00ff00",
            "#ffff00",
            "#ddffff",
            "#0000ff",
            "#00ff00",
            "#ff00ff",
            "#ffffff",
            "#000000",
        };
    }
}

StandardPage.cs

public class StandardPage : SitePageData
{
    // ... other property definitions
 
    [UIHint(ColorEditorDescriptor.UIHint)]
    public virtual string BackgroundColor { get; set; }
}