Dyrdek Panel Maker

by jakie8

HTML

<div class="clone original">
    <div><input type="text" class="title" placeholder="Title"></div>
    <div><input type="text" class="align" placeholder="Align"></div>
    <div><textarea class="content" placeholder="Content"></textarea></div>
    <div><input type="text" class="image" placeholder="Image"></div>
</div>
<input type="button" id="add" value="Add">

<textarea id="res"></textarea>

CSS

body{
    padding:10px;
}

#res{
    position:absolute;
    top:50%;
    left:0;
    bottom:0;
    right:0;
    border:none;
    background:#eee;
    padding:10px;
    font-size:11px;
    outline:none;
}

JavaScript

function _v(selector){
    return $(selector).val() ? $(selector).val() : 'left';
}

$(document).on('click', '#add', function(){
    
    var name = _v('.title'),
        align = _v('.align'),
        text = _v('.content'),
        image = _v('.image');
    
    var d = '[panel name="'+name+'" bg="'+image+'"]'+"\n";
    d += '    [content align="'+align+'"][title]'+name+'[/title][text]'+text+'[/text][/content]'+"\n";        
    d += '[/panel]';
    $('.clone input, .clone textarea').val('');
    
    $('#res').val($('#res').val()+"\n\n\n"+d);
});