tattoo widgets administration

test draggable list of avalable blocks for sidebar

by AntowaKartowa

HTML

<div class="sidebar">
<p>
   <input type="hidden" value="" id="tattoo_sidebar" name="tattoo_sidebar">
   <input type="checkbox" value="1" id="tattoo_sidebar_on" name="tattoo_sidebar_on"> Задать явно.</p><p>Иначе будут применятся наследуемые от родителя настройки.</p>
    <ul id="off-widgets" class="widgets-list">
        <li id="twidget-4" class="blockText twidgets-list-items"><p>Текстовый блок <span>V</span></p>
            <div>
                <lable>Заголовок <input value="" name="twidget_text_head"></lable>
                <lable>Текст <textarea name="twidget_text_text"></textarea></lable>
            </div>
        </li>
        <li id="twidget-5" class="blockVideo twidgets-list-items"><p>Видео <span>V</span></p>
            <div>
                <lable>Заголовок <input value="" name="twidget_video_head"></lable>
                <lable>Видео <input value="" name="twidget_video_video"></lable>
            </div>
        </li>
        <li id="twidget-6" class="blockScatches twidgets-list-items"><p>Эскизы</p></li>
        <li id="twidget-7" class="blockReviews twidgets-list-items"><p>Отзывы</p></li>
        <li id="twidget-8" class="blockMasters twidgets-list-items"><p>Мастера</p></li>
        <li id="twidget-9" class="blockPromo twidgets-list-items"><p>Акции</p></li>
        <li id="twidget-10" class="blockWorks twidgets-list-items"><p>Наши работы</p></li>
        <li id="twidget-11" class="blockGallerys twidgets-list-items"><p>Галереи</p></li>
    </ul>
    <ul id="act-widgets" class="widgets-list">
        <li id="twidget-1" class="blockSocial twidgets-list-items"><p>Социальные сети</p></li>
        <li id="twidget-2" class="blockFacebook twidgets-list-items"><p>Facebook</p></li>
        <li id="twidget-3" class="blockVkcom twidgets-list-items"><p>Вконтакте</p></li>
    </ul>

</div>

CSS

.sidebar {
    width:265px;
    padding:10px;
    margin:20px auto;                   
    border: solid 1px #DFDFDF;
    border-radius: 3px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    background-color: #F5F5F5;
    background: -moz-linear-gradient(top, #FcFcFc, #F9F9F9);
    background: -webkit-linear-gradient(top, #FcFcFc, #F9F9F9);
}


.widgets-list {
    min-height: 60px;
    padding:5px;
    margin:0 0 5px;
    border-radius:4px;
}
.sidebar ul li {
    position: relative;
    padding: 5px 7px 0;
    border:solid 1px #DFDFDF;
    border-radius: 5px;
    font-family: Arial;
    margin:0 0 3px 0;
    background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
    background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
    font-size: 12px;
    font-weight: bold;
}
#off-widgets li div,
#off-widgets li p span { display:none }
.widgets-list li div {
    overflow:hidden;
    display:none;        
}
.widgets-list li p {margin-bottom:5px}
.widgets-list li p span {
    background-color: #aaa;
    border-radius: 7px;
    box-shadow: 0 1px 0 #888 inset;
    color: #F3F3F3;
    cursor: pointer;
    display: block;
    font-size: 8px;
    font-weight: bold;
    height: 10px;
    padding: 2px 1px 2px 0;
    position: absolute;
    right: 10px;
    text-align: center;
    text-shadow: 1px 1px 0 #888;
    top: 6px;
    width: 13px;
}

.widgets-list li lable {
    padding:0 0 12px;
    display:block;
    font-weight:normal;
    color:#333;
    font-size:11px;
}
.widgets-list li lable:first-child {padding:7px 0;}

.widgets-list li input,
.widgets-list li textarea {
    display:block;
    padding:3px;
    width:231px;
}

#off-widgets {
    color:#777;
}

#act-widgets {
    background-color:#ddd;
}
#act-widgets li { border-color:#ccc; }

JavaScript

$(function() {
        $( '#off-widgets, #act-widgets' ).sortable({
            connectWith: '.widgets-list',
            start: function(e, ui) {
                var curobj = '#' + ui.item.context.id;
                if ($(curobj + ' span').hasClass('open')) {
                    $(curobj + ' div').animate({height: 'hide'}, 0);
                    $(curobj + ' span').removeClass('open').html('V');
                }
            }
        });
    if (!$('#tattoo_sidebar_on').prop('checked')) {
        $( '#off-widgets, #act-widgets' ).sortable('disable');
        $( '#off-widgets, #act-widgets' ).fadeOut(0);
    }
        $('#act-widgets span').live( 'click', function() {
            if ($(this).hasClass('open')) {
                var parent = $(this).parent().next('div');
                parent.animate({height: 'hide'}, 500);
                $(this).removeClass('open').html('V');
            } else {
                var parent = $(this).parent().next('div');
                var blockheight = parent.outerHeight();
                parent.animate({height: 'show'}, 500);
                $(this).addClass('open').html('Λ');
            }
    });
    
    $('#tattoo_sidebar_on').bind('change', function(){
        if ($(this).prop('checked')) {
           $( '#off-widgets, #act-widgets' ).fadeIn(300);
           $( '#off-widgets, #act-widgets' ).sortable('enable');
           recalc();
        } else {
           $( '#off-widgets, #act-widgets' ).sortable('disable');
           $( '#off-widgets, #act-widgets' ).fadeOut(300);
           clear();
        }
    });
    $('#act-widgets').bind('sortupdate', function() { recalc(); });
    function recalc() {
        var asoc_arr = {};
        $('#act-widgets li').each( function() {
            key = $(this).attr('id');
            key = key.replace('twidget-', '');
            val = '1';
            if (key == '4') val = {'head':'1', 'text':'1'};
            if (key == '5') val = {'head':'1', 'video':'1'};
           ...