Navigator

by wrxsti85

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<h1>NavBuilder</h1>
<ul id="navBuildContainer">
    <li>
        <div>
            <input class="navInput" type="text" />
            <span class="addInput button ui-icon ui-icon-plusthick"></span>
            <span class="rmInput button ui-icon ui-icon-minusthick"></span>
            <span class="rmIndent button ui-icon ui-icon-circle-arrow-w"></span>
            <span class="addIndent button ui-icon ui-icon-circle-arrow-e"></span> 
        </div>
    </li>
</ul>
<button class="output">Output</button>

CSS

h1 {
    font-family: arial;
    font-weight: 900;
    font-size: 14px;
    background: #e5e5e5;
    padding: 5px 10px;
    border: solid 2px;
    border-width: 2px 2px 0px 2px;
    margin: 0px;
}

#navBuildContainer {
    margin: 0px;
    border: solid 2px;
    border-width: 1px 2px 1px 2px;
}

li {
    border: solid 1px;
    border-width: 1px 0px 1px 0px;
}

ul li div {
    border: solid 1px;
    border-width: 0px 0px 0px 0px;
}

.button {
    cursor: pointer;
    display: inline-block;
}

JavaScript

var navObject = []; 
var childObjects = [];

var findChildren = function(selector){
    return $('.navInput', selector).val();
};

var input = '<li> \
                <div> \
                    <input class="navInput" type="text" /> \
                    <span class="addInput button ui-icon ui-icon-plusthick">+</span> \
                    <span class="rmInput button ui-icon ui-icon-minusthick">-</span> \
                    <span class="rmIndent button ui-icon ui-icon-circle-arrow-w"><</span> \
                    <span class="addIndent button ui-icon ui-icon-circle-arrow-e">></span> \
                </div> \
            </li>';

$(document).on('click', '.addInput', function(){
    $(this).parent().parent().after(input);
});

$(document).on('click', '.rmInput', function(){
    $(this).parent().parent().remove();
});

$(document).on('click', '.addIndent', function(){
    $(this).parent().parent().wrap('<ul>');
});

$(document).on('click', '.rmIndent', function(){
    $(this).parent().parent().unwrap();
});

$('.output').click(function(){
    $('li').each(function(){
        
    });
    console.log(navObject);
});