Developing modal dialogs for builder component properties

using System.Collections.Generic;

namespace LearningKit.Models.ModalDialogs
{
    public class ColorModalDialogViewModel
    {
        public IEnumerable<string> Colors { get; set; }
    }
}

@using Kentico.Components.Web.Mvc.Dialogs

@model LearningKit.Models.ModalDialogs.ColorModalDialogViewModel

<!DOCTYPE html>
<html>
<head>
    @Html.Kentico().ModalDialogScript()
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <form action="">
        @foreach (var color in Model.Colors)
        {
            <input type="radio" id="@color" name="color" value="@color" />
            <label for="@color">@color</label><br />
        }
    </form>

    @* Script that preselects the radio button of the current color
       Gets the value from the data passed when the 'kentico.modalDialog.open' function is called *@
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            var defaultValue = kentico.modalDialog.getData().value;
            document.getElementById(defaultValue).checked = true;
        });
    </script>
</body>
</html>

using System.Collections.Generic;
using System.Web.Mvc;

using LearningKit.Models.ModalDialogs;

namespace LearningKit.Controllers.ModalDialogs
{
    public class ColorModalDialogController : Controller
    {
        public ActionResult Index()
        {
            var model = new ColorModalDialogViewModel
            {
                Colors = new List<string>() { "red", "blue", "white", "green", "black", "gray", "yellow" }
            };

            return View("ModalDialogs/ColorModalDialog/_ColorModalDialog", model);
        }
    }
}

@using Kentico.Forms.Web.Mvc

@model LearningKit.FormBuilder.FormComponents.ColorFormComponent

@{
    // Gets a collection of system HTML attributes necessary for the functionality of form component inputs
    IDictionary<string, object> htmlAttributes = ViewData.GetEditorHtmlAttributes();

    // Prepares data that will be passed to the function that opens the modal dialog
    string dialogData = Newtonsoft.Json.JsonConvert.SerializeObject(new
    {
        modalDialogUrl = Url.Action("Index", "ColorModalDialog"),
        colorInputId = Html.IdFor(m => m.Value).ToHtmlString()
    });
}

@* Textbox input element that displays/edits the form component's color value *@
@Html.TextBoxFor(m => m.Value, htmlAttributes)

@* Button that opens the modal dialog when clicked *@
<button type="button" class="ktc-btn ktc-btn-default" onclick="openColorModalDialog(@dialogData)">Open dialog</button>

function openColorModalDialog(dialogData) {
    // Gets the form component's input element
    var inputElement = window.document.querySelector('#' + dialogData.colorInputId);

    // Opens the modal dialog
    kentico.modalDialog.open({
        url: dialogData.modalDialogUrl,
        applyCallback: function(dialogWindow) {
            // Retrieves the selected value from the modal dialog
            var selectedValue = dialogWindow.document.querySelector('input[name="color"]:checked').value;
            // Updates the value of the input element in the property configuration dialog
            inputElement.value = selectedValue;
        },
        applyButtonText: 'Confirm color selection',
        title: 'Select a color',
        // Passes the current color to the modal dialog data
        data: { value: inputElement.value }
    });
}

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

@model LearningKit.Models.InlineEditors.ColorEditor.ColorEditorModel

@using (Html.Kentico().BeginInlineEditor("color-editor",
                                         Model.PropertyName,
                                         new { data_url = Url.Action("Index", "ColorModalDialog") }))
{
    <div style="position: absolute; top: 0px; right: 20px;">
        <button id="modal-btn" type="button">Change color</button>
    </div>
}

init: function (options) {
    var editor = options.editor;

    // Adds a click action for the 'Modal dialog' button
    editor.querySelector("#modal-btn").addEventListener("click", function () {
        // Opens the modal dialog window
        kentico.modalDialog.open({
            // Gets the modal dialog URL from the 'data-url' attribute of the inline editor wrapping element
            url: editor.getAttribute("data-url"),
            applyCallback: function (dialogWindow) {
                // Creates and dispatches an event that notifies the widget about changes of properties
                var event = new CustomEvent("updateProperty", {
                    detail: {
                        // Retrieves the color value from radio buttons within the modal dialog window
                        value: dialogWindow.document.querySelector('input[name="color"]:checked').value,
                        name: options.propertyName
                    }
                });
                editor.dispatchEvent(event);
            },
            applyButtonText: "Confirm color selection",
            title: "Select a color",
            // Passes the current color value to the modal dialog data
            data: { value: options.propertyValue }
        });
    });
}