combo/combo/manager/static/js/combo.manager.js

function init_pages_list()
{
  if ($('#pages-list').length == 0)
    return;
  var list_offset = $('#pages-list').offset().left;
  $('#pages-list').sortable({
     stop: function(event, ui) {
       var moved_page_id = ui.item.data('page-id');
       /* 25 is the per-level margin-left applied to pages, it needs to be kept
        * in sync with the css file */
       var item_offset = ui.offset.left - list_offset + parseInt($(ui.item).data('level'))*25;
       var new_level = Math.abs(Math.round(item_offset / 25));
       console.log(new_level);
       if (new_level <= 0) {
         new_level = 0;
       } else {
         var previous_page = $('#pages-list div[data-page-id=' + moved_page_id + ']').prev();
         var previous_page_level = parseInt($(previous_page).data('level'));
         if (new_level > previous_page_level+1) {
           new_level = previous_page_level+1;
         }
       }

       var new_parent = null;
       if (new_level != 0) {
          new_parent = $($(ui.item).prevAll('[data-level='+(new_level-1)+']')[0]).data('page-id');
       }
       /* remove classes and add new values */
       $(ui.item).removeClass('level-0').removeClass('level-1').removeClass('level-2');
       $(ui.item).addClass('level-' + new_level);
       $(ui.item).data('level', new_level).attr('data-level', new_level);

       var new_order = $('#pages-list div').map(function() { return $(this).data('page-id'); }).get().join();

       $.ajax({
           url: $('#pages-list').data('page-order-url'),
           data: {'new-order': new_order,
                  'moved-page-id': moved_page_id,
                  'moved-page-new-parent': new_parent
           },
           success: function(data, status) {
             $('#pages-list').replaceWith($(data).find('#pages-list'));
             init_pages_list();
           }
       });
     }
  });
}

$(function() {
  $('div.cell-list h3').on('click', function() {
    $(this).parent().toggleClass('toggled').toggleClass('untoggled');
  });
  $('div.cell-list a.close-button').on('click', function() {
    $(this).parents('.toggled').toggleClass('toggled').toggleClass('untoggled');
    return false;
  });
  init_pages_list();
  $('.cell-list').sortable({
     connectWith: '.cell-list',
     handle: 'h3',
     helper: 'clone',
     placeholder: 'empty-cell',
     update: function(event, ui) {
       var new_order = Object();
       $('.cell').each(function(i, x) {
           var cell_suffix = $(x).data('cell-reference');
           new_order['pos_' + cell_suffix] = i;
           new_placeholder = $(x).closest('.placeholder').data('placeholder-key');
           new_order['ph_' + cell_suffix] = new_placeholder;
       });
       $.ajax({
           url: $('#placeholders').data('cell-order-url'),
           data: new_order
       });
     }
  });
  $('#sidebar button').on('click', function() {
    window.location = $(this).data('add-url');
    return false;
  });
  $('div.cell button.save').on('click', function(event) {
     var $button = $(this);
     var $form = $(this).closest('form');
     var button_label = $button.text();
     for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
     }
     $.ajax({
         url: $form.attr('action'),
         data: $form.serialize(),
         type: 'POST',
         beforeSend: function() { $button.attr('disabled', 'disabled'); },
         success: function() {
            $button.attr('disabled', null);
            $.getJSON($form.data('label-url'),
                function(data) {
                    $form.parents('div.cell').find('.additional-label i').text(data['label']);
                }
            );
         }
     });
     return false;
  });
  $('li.cell-type span').on('click', function() {
    var $checked_input = $(this).parent().find(':checked');
    if ($checked_input.length) {
      $checked_input.prop('checked', null);
      return false;
    }
  });

  /* hack against height:0 → height:auto not animating, this gets the height of
   * the elements and dynamically generate css rules setting the max-height property
   * to an appropriate height.
   */
  $('li.cell-type').each(function(i, x) {
    $(this).attr('id', 'cell-type-'+i);
    var h = $(this).find('ul').height();
    $(this).find('ul').css('display', 'block').css('position', 'relative').css('visibility', 'visible');
    var style = '<style>li#cell-type-'+i+' input ~ ul { max-height: 0px; }\n'+
                       'li#cell-type-'+i+' input:checked ~ ul { max-height: '+h+'px; }</style>';
    $(style).appendTo('head');
  });

  $('div.cell').each(function(i, x) {
    $(this).attr('id', 'div-cell-'+i);
    var h = $(this).find('h3 + div').height() + 10;
    h += $(this).find('.django-ckeditor-widget').length * 200;
    var style = '<style>div#div-cell-'+i+'.toggled h3 + div { max-height: '+h+'px; }</style>';
    $(style).appendTo('head');
    $(this).addClass('untoggled');
  });
  $('a.menu-opener').on('click', function() {
    $('#appbar .menu').toggle();
  });
});