State editor

Component framework state editor

by zminic

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<table>
    <tr>
        <td>
            <button id="btnLoad">Load</button><br />

            <textarea id="txtLoad" rows="5" cols="40"></textarea>
        </td>
        <td>
            <button id="btnSerialize">Serialize</button><br />

            <textarea id="serialized" rows="5" cols="40"></textarea>
        </td>
    </tr>
</table>

<hr />

<div id="result"></div>

<script type="text/x-kendo-template" id="propertySerializationTemplate">
    <#= tag # #= name ? 'name="' + name + '"' : '' # type="#= type #">#= value #</#= tag #>
</script>

<script type="text/x-kendo-template" id="stringPropertyTemplate">
    <div class="property">
        <div class="title">#= name #</div>
        <input type="text" size="50" value="#= value #" />
    </div>
</script>

<script type="text/x-kendo-template" id="intPropertyTemplate">
    <div class="property">
        <div class="title">#= name #</div>
        <input type="number" style="width: 100px;" value="#= value #" />
    </div>
</script>

<script type="text/x-kendo-template" id="boolPropertyTemplate">
    <div class="property">
        <span class="title">#= name #</span>
        <input type="checkbox" />
    </div>
</script>

<script type="text/x-kendo-template" id="htmlPropertyTemplate">
    <div class="property">
        <div class="title">#= name #</div>
        <textarea style="height:200px; width: 90%">#= value #</textarea>
    </div>
</script>

CSS

.property
{
    margin-top: 15px;
    cursor: pointer;
}

ul {list-style-type: none; -webkit-padding-start: 20px; }

JavaScript

var Element = function($xml, my)
{
    my = my || {};
    var obj = {};
    obj.children = [];
    
    obj.type = 'string';
    
    obj.getValue = function(){};
    
    obj.render = function(container) {};
    
    obj.serialize = function()
    {
        var template = kendo.template($("#propertySerializationTemplate").html());
        
        return template({
            tag: $xml[0].nodeName,
            name: $xml.attr('name'),
            type: obj.type,
            value: obj.getValue()
        }).trim();
    };
    
    return obj;
};

var CollectionElement = function($xmlObj, my)
{
    my = my || {};
    var obj = Element($xmlObj, my);
    
    obj.title = '';
    
    obj.render = function(container)
    {
        if ($xmlObj.children().length > 0)
            return my.renderChildren(container);
    };
    
    obj.serialize = function()
    {
        if ($xmlObj.children().length > 0)
            return my.serializeChildren();
    };
    
    my.renderChildren = function(container)
    {
        var list = $('<ul />').appendTo(container);
        
        $xmlObj.children().each(function(i, e)
        {
            var el = ElementFactory.getElement(e.nodeName, $(e));
            obj.children.push(el);
            
            var item = $('<li />').addClass(e.nodeName).appendTo(list);
            
            if (obj.title && i===0)
                $('<span/>').text(obj.title).appendTo(item);
            
            el.render(item);
        });
    };
    
    my.serializeChildren = function()
    {
        var result = '';
        
        obj.children.forEach(function(c){
            result += c.serialize();
        });
                             
        return result;
    };
    
    return obj;
};

var ObjectElement = function($xml, my)
{
    my = my || {};
    var obj = CollectionElement($xml, my),
        superSerializeChildren = my.serializeChildren;
    
    my.serializeChildren = function()
    {
        return '<object>' +...