tattoo widgets administration (cat)

test draggable list of avalable blocks for sidebar. category version

by AntowaKartowa

HTML

<div class="wrapper clearfix">
    
    <div class="baselist sidebar">
        <p>
            <input type="" value="" id="tattoo_sidebar_cat" name="tattoo_sidebar">
        </p>
        <ul id="off-widgets-0" class="off-widgets widgets-list">
            <li id="twidget-4-0" 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-0" 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-0" class="blockScatches twidgets-list-items"><p>Эскизы</p></li>
            <li id="twidget-7-0" class="blockReviews twidgets-list-items"><p>Отзывы</p></li>
            <li id="twidget-8-0" class="blockMasters twidgets-list-items"><p>Мастера</p></li>
            <li id="twidget-9-0" class="blockPromo twidgets-list-items"><p>Акции</p></li>
            <li id="twidget-10-0" class="blockWorks twidgets-list-items"><p>Наши работы</p></li>
            <li id="twidget-11-0" class="blockGallerys twidgets-list-items"><p>Галереи</p></li>
        </ul>
        <ul id="act-widgets-0" class="act-widgets widgets-list">
            <li id="twidget-1-0" class="blockSocial twidgets-list-items"><p>Социальные сети</p></li>
            <li id="twidget-2-0" class="blockFacebook twidgets-list-items"><p>Facebook</p></li>
            <li id="twidget-3-0" class="blockVkcom twidgets-list-items"><p>Вконтакте</p></li>
        </ul>
    </div>
    
    
    <div class="altlist sidebar">
        <p>
            <input type="checkbox" value="1"...

CSS

.wrapper {
    margin:20px auto;
    width:892px;
}
.clearfix:before,
.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}
.sidebar {
    float:left;
    width:265px;
    padding:10px;
    margin:20px 5px;                   
    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;
}

.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;
}

.off-widgets li p span,
.widgets-list li div {
    overflow:hidden;
    display:none;        
}

.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: '.pagelist .widgets-list',
        start: function(e, ui) {dropdownhide(e, ui);}
    });
    $( '#off-widgets-0, #act-widgets-0' ).sortable({
        connectWith: '.baselist .widgets-list',
        start: function(e, ui) {dropdownhide(e, ui);}
    });
    $( '#off-widgets-1, #act-widgets-1' ).sortable({
        connectWith: '.altlist .widgets-list',
        start: function(e, ui) {dropdownhide(e, ui);}
    });
    
    if (!$('#tattoo_sidebar_on').prop('checked')) {
        $( '#off-widgets, #act-widgets' ).sortable('disable');
        $( '#off-widgets, #act-widgets' ).fadeOut(0);
    }
    
    if (!$('#tattoo_sidebar_alt').prop('checked')) {
        $( '#off-widgets-1, #act-widgets-1' ).sortable('disable');
        $( '#off-widgets-1, #act-widgets-1' ).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')) {
           var lists = ['#act-widgets'];
           $( '#off-widgets, #act-widgets' ).sortable('enable').fadeIn(300);
           $( '#tattoo_sidebar' ).val(intostring(recalc(lists)));
        } else {
           $( '#off-widgets, #act-widgets' ).sortable('disable').fadeOut(300);
           clear();
        }
    });
    
    $('#tattoo_sidebar_alt').bind('change', function(){
        if ($(this).prop('checked')) {
           var lists = ['#act-widgets-0', '#act-widgets-1'];
           $( '#off-widgets-1, #act-widgets-1'...