[Summary view] [Print] [Text view]

   1  (function($){
   2  	function updateUpDown(sortable) {
   3          $('dl:not(.ui-sortable-helper)', sortable)
   4              .removeClass('first').removeClass('last')
   5              .find('.up, .down').removeClass('disabled').end()
   6              .filter(':first').addClass('first').find('.up').addClass('disabled').end().end()
   7              .filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
   8      };
   9  
  10  	function moveUpDown() {
  11          var link = $(this),
  12              dl = link.parents('dl'),
  13              prev = dl.prev('dl'),
  14              next = dl.next('dl');
  15  
  16          if(link.is('.up') && prev.length > 0)
  17              dl.insertBefore(prev);
  18  
  19          if(link.is('.down') && next.length > 0)
  20              dl.insertAfter(next);
  21  
  22          updateUpDown(dl.parent());
  23      };
  24  
  25  	function addControls() {
  26          $(this).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>')
  27              .find('a.up, a.down').bind('click', moveUpDown);
  28          updateUpDown($(this).parents(".ui-sortable:first"));
  29      }
  30  
  31      var counter = 1;
  32  	function addItem() {
  33          var sortable = $(this).parents('.ui-sortable:first');
  34          var options = '<span class="options"><a class="up">up</a><a class="down">down</a></span>';
  35          var tpl = '<dl class="sort"><dt>{name}' + options + '</dt><dd>{desc}</dd></dl>';
  36          var html = tpl.replace(/{name}/g, 'Dynamic name ' + counter).replace(/{desc}/g, 'Description');
  37          counter += 1;
  38          sortable.append(html).sortable('refresh').find('a.up, a.down').bind('click', moveUpDown);
  39          updateUpDown(sortable);
  40      };
  41  
  42  	function emptyTrashCan(item) {
  43          item.remove();
  44      };
  45  
  46  	function sortableChange(event, ui) {
  47          if(ui.sender){
  48              var w = ui.element.width();
  49              ui.placeholder.width(w);
  50              ui.helper.css("width",ui.element.children().width());
  51          }
  52      };
  53  
  54  	function sortableUpdate(event, ui) {
  55          if(ui.element[0].id == 'trashcan'){
  56              emptyTrashCan(ui.item);
  57          } else {
  58              updateUpDown(ui.element[0]);
  59              if(ui.sender)
  60                  updateUpDown(ui.sender[0]);
  61          }
  62      };
  63  
  64      $(document).ready(function(){
  65          var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
  66          var $els = $(els.toString());
  67  
  68          $('h2', $els.slice(0,-1)).append('<span class="options"><a class="add">add</a></span>');
  69          $('dt', $els).each(addControls);
  70          //$('dt', $els).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>');

  71  
  72          $('a.add').bind('click', addItem);
  73          //$('a.up, a.down').bind('click', moveUpDown);

  74  
  75          $els.each(function(){
  76              updateUpDown(this);
  77          });
  78  
  79          $els.sortable({
  80              items: '> dl',
  81              handle: 'dt',
  82              cursor: 'move',
  83              //cursorAt: { top: 2, left: 2 },

  84              //opacity: 0.8,

  85              //helper: 'clone',

  86              appendTo: 'body',
  87              //placeholder: 'clone',

  88              //placeholder: 'placeholder',

  89              connectWith: els,
  90              start: function(event,ui) {
  91                  ui.helper.css("width", ui.item.parent().width());
  92              },
  93              change: sortableChange,
  94              update: sortableUpdate
  95          }).bind("sortreceive", function(event, ui) {
  96              $(ui.item).removeClass('ui-draggable').find('dt').each(addControls);
  97          });
  98          $('#components > dl').draggable({
  99              connectToSortable: $els.not("#trashcan"),
 100              helper: 'clone',
 101              handle: 'dt'
 102          })
 103      });
 104  
 105      $(window).bind('load',function(){
 106          setTimeout(function(){
 107              // fixes the weird scrolling in IE while killing the fade

 108              $(document.body).css("height", "auto")
 109              $('#overlay').fadeOut(function(){
 110                  $(this).remove();
 111              });
 112          }, 500);
 113      });
 114  })(jQuery);