1. Warren Buckley
  2. RGBA - Umbraco Property Editor

Source

RGBA - Umbraco Property Editor / RGBA.Umbraco.PropertyEditor / Views / RGBAPickerEditor.cshtml

@inherits WebViewPage<RGBA.Umbraco.PropertyEditor.RGBAPickerEditorModel>
@using Umbraco.Cms.Web;
@using ClientDependency.Core;
@using ClientDependency.Core.Mvc;
@using System.Web.Helpers;
@using System.Web.Mvc;
@using System.Web.Mvc.Ajax;
@using System.Web.Mvc.Html;
@using System.Web.Routing;
@using System.Web.WebPages;
@using Microsoft.Web.Mvc;
@using RGBA.Umbraco.PropertyEditor;


@{
    //Create a unique GUID so that this property has a unique ID for the <div>
    var uniqueID = Guid.NewGuid().ToString();
    var pickerID = "rgba-" + uniqueID; 
}

<script type="text/javascript">
    $(document).ready(function () {

        //Call the plugin with our options
        //Pass in the HTML ID's of the hidden input boxes
        //So our JS can update these boxes with the new values to save
        $('#@pickerID').rgbaPicker({
            redID:      '#@Html.IdFor(x => Model.Red)',
            blueID:     '#@Html.IdFor(x => Model.Blue)',
            greenID:    '#@Html.IdFor(x => Model.Green)',
            alphaID:    '#@Html.IdFor(x => Model.Alpha)',
            hexID:      '#@Html.IdFor(x => Model.Hex)'
        });
    });
</script>


@{
    //Here we need to say we want to use the CSS & JS file in our view
    Html
    .RequiresJsResource(typeof(RGBAPickerEditor), "RGBA.Umbraco.PropertyEditor.Resources.RGBAPicker.js")
    .RequiresCssResource(typeof(RGBAPickerEditor), "RGBA.Umbraco.PropertyEditor.Resources.RGBAPicker.css");
}


<!-- We give this div the unique pickerID -->
<div id="@pickerID" class="rgbaPicker">
    <div class="sliders">
        <div class="item">
            <!-- CSS classes used to easily target in JS to update -->
            <label>Red: <span class="redDisplay"></span></label>
            <div class="redSlider"></div>
            <!-- 
            Hidden textbox for the Red value we want to save.
            The value gets updated by the JS
             -->
            @Html.HiddenFor(x => Model.Red)
        </div>

        <div class="item">
            <!-- CSS classes used to easily target in JS to update -->
            <label>Green: <span class="greenDisplay"></span></label>
            <div class="greenSlider"></div>
            <!-- 
            Hidden textbox for the Green value we want to save.
            The value gets updated by the JS
             -->
            @Html.HiddenFor(x => Model.Green)
        </div>

        <div class="item">
            <!-- CSS classes used to easily target in JS to update -->
            <label>Blue: <span class="blueDisplay"></span></label>
            <div class="blueSlider"></div>
            <!-- 
            Hidden textbox for the Blue value we want to save.
            The value gets updated by the JS
             -->
            @Html.HiddenFor(x => Model.Blue)
        </div>

        <div class="item">
            <!-- CSS classes used to easily target in JS to update -->
            <label>Alpha: <span class="alphaDisplay"></span>%</label>
            <div class="alphaSlider"></div>
            <!-- 
            Hidden textbox for the Alpha value we want to save.
            The value gets updated by the JS
             -->
            @Html.HiddenFor(x => Model.Alpha)
        </div>
        
        <div>
            <!-- Disabled input for Hex # colour -->
            @Html.LabelFor(x => Model.Hex)
            @Html.TextBoxFor(x => Model.Hex, new { @class = "hex",  @readonly = "readonly" })
        </div>
    </div>

    <!-- Colour is previewed here -->
    <div class="livePreview"><span></span></div>
</div>