Form Framework Experiment

by CommandLineDesign

HTML

<h3>Mapping Type classes</h3>
<div id="typeClassPlaceHolder"></div>
<div id="typeClassPlaceHolderDemo"></div>
<pre id="logTypeClass"></pre>
<h3>Mapping Types</h3>
<div id="mappingTypesPlaceHolder"></div>
<div id="mappingTypesPlaceHolderDemo"></div>
<pre id="logMappingTypes"></pre>
<h3>Mapping Fields</h3>
<div id="mappingFieldsPlaceHolder"></div>
<div id="mappingFieldsPlaceHolderDemo"></div>
<pre id="logMappingFields"></pre>
<h3>Fields To Types</h3>
<div id="fieldsToTypesPlaceHolder"></div>
<pre id="logFieldsToTypes"></pre>
<h3>Fields To Types Browser</h3>
<div id="FieldsToTypesBrowser-controls"></div>
<div id="FieldsToTypesBrowser"></div>

CSS

pre:empty {
    display: none;
}
pre {
    background-color: lightgray;
    border: 1px solid darkgray;
    padding: 10px;
    width: auto;
    display: inline-block;
}

JavaScript

// ::::::::::::::::::::::::::::::: Bootstrap Data :::::::::::::::::::::::::::::::
var typeClassesContent = {};
/*typeClassesContent = {
    1: {
        'name': 'YoYo Templates',
        'typeClassDescription': 'Class For YoYo Templates',
        'isActive': 1
    },
    2: {
        'name': 'Item Types',
        'typeClassDescription': 'Class For Item Types',
        'isActive': 1
    }
};*/
var mappingTypesContent = {};
/*mappingTypesContent = {
    1: {
        'name': 'Product entry',
        'description': 'Product Entry Template',
        'typeClassID': 1,
        'isActive': 1
    },
    2: {
        'name': 'Merchandising',
        'description': 'Merchandising Fieldset',
        'typeClassID': 1,
        'isActive': 1
    }
};*/
var mappingFieldsContent = {};
/*mappingFieldsContent = {
    1: {
        'name': 'field_id',
        'description': 'Can you edit an ID?',
        'isActive': 1
    },
    2: {
        'name': 'name',
        'description': 'Gotta know what the name is.',
        'isActive': 1
    }
};*/
// ::::::::::::::::::::::::::::::: Build Tags :::::::::::::::::::::::::::::::
function createTextTag() {
    var textInput = document.createElement("input");
    textInput.type = 'text';
    return textInput;
}

function createSelectTag(id) {
    var select = document.createElement("select");
    select.id = ((id) ? id : '');
    return select;
}

function createOptionTag(id, content) {
    var option = document.createElement("option");
    option.value = id;
    option.text = content;
    return option;
}

function createCheckbox(isChecked){
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.value = 1;
    if(isChecked){
        checkbox.setAttribute('checked', 'checked');
    }
    return checkbox;
}
//DOM API tags fot table rows
function buildTag(item, tag){
    var currentTag = document.createElement(tag);
    var tagText = document.createTextNode(item);
    currentTag.appendChild(tagText);
   ...