openproject/app/views/my_projects_overviews/page_layout.rhtml

<% field_list = ['top', 'left', 'right', 'hidden'] %>

<script language="JavaScript">
//<![CDATA[
function recreateSortables() {
    <% field_list.each do |f| %>
      Sortable.destroy('list-<%= f %>');
    <% end %>
    <% field_list.each do |f| %>
      Sortable.create("list-<%= f %>", {
        constraint: false,
        containment: <%= field_list.collect {|x| "list-#{x}" }.inspect %>,
        dropOnEmpty: true,
        handle: 'handle',
        onUpdate: function () {
          new Ajax.Request('<%= url_for(:controller => 'my_projects_overviews',
                                        :action => 'order_blocks',
                                        :group => f) %>',
                           { asynchronous: true,
                             evalScripts: true,
                             parameters: Sortable.serialize("list-<%= f %>")
                           });
        },
        only: 'mypage-box',
        tag: 'div' });
    <% end %>
}

function updateSelect() {
    s = $('block-select')
    for (var i = 0; i < s.options.length; i++) {
        if ($('block_' + s.options[i].value)) {
            s.options[i].disabled = true;
        } else {
            s.options[i].disabled = false;
        }
    }
    s.options[0].selected = true;
}

function afterAddBlock(response) {
    recreateSortables();
    updateSelect();
    editTextilizable(extractBlockName(response));
    new Effect.ScrollTo('list-hidden');
}

function extractBlockName(response) {
    return response.responseText.match(/id="block_(.*?)"/)[1];
}

function removeBlock(block) {
    Effect.DropOut(block);
    $(block).remove();
    updateSelect();
}

function saveTextilizable(name) {
    $(name + "-form-submit").click();
    return false;
}

function resetTextilizable(name) {
    $("textile_" + name).setValue(window["page_layout-textile" + name] + "");
    $(name + '-form-div').toggle();
    $(name + '-preview-div').toggle();
    return false;
}

function editTextilizable(name) {
    var textile_name = $("textile_" + name);
    if (textile_name != null) {
      window["page_layout-textile" + name] = textile_name.getValue();
      $(name + '-form-div').toggle();
      $(name + '-preview-div').toggle();
    }
    return false;
}

function addBlock() {
  new Ajax.Updater('list-hidden',
                   $('block-form').action,
                   { insertion: 'top',
                     onComplete: afterAddBlock,
                     parameters: Form.serialize('block-form'),
                     evalScripts:true
                   });

  return false;
}
//]]>
</script>

<div class="contextual">
<% form_tag({:action => "add_block"}, :id => "block-form") do %>
  <%= select_tag 'block',
                 "<option>--#{t(:button_add)}--</option>" + options_for_select(@block_options),
                 :id => "block-select",
                 :onChange => "addBlock();"
%>
<% end %>
<%= link_to l(:button_back), {:action => 'index'}, :class => 'icon icon-cancel' %>
</div>

<h2><%=l(:label_overview)%></h2>

<h4><%=l(:label_visible_elements) %></h4>
<% (field_list - ['hidden']).each do |f| %>
  <div id="list-<%= f %>" class="splitcontent<%= f %> block-receiver">
    <% @blocks[f].each do |b| %>
      <% if MyProjectsOverviewsController::BLOCKS.keys.include? b %>
        <%= render(:partial => 'block', :locals => {:block_name => b}) %>
      <% elsif b.respond_to? :to_ary %>
        <%= render(:partial => 'block_textilizable',
                   :locals => {:block_name => b.first,
                               :block_title => b[1],
                               :textile => b.last}) %>
      <% end %>
    <% end %>
  </div>
<% end %>

<div style="clear: both"></div>
<h4><%=l(:label_hidden_elements) %></h4>
<div id="list-hidden" class="block-receiver">
  <% @blocks['hidden'].each do |b| %>
    <% if MyProjectsOverviewsController::BLOCKS.keys.include? b %>
      <%= render(:partial => 'block', :locals => {:block_name => b}) %>
    <% elsif b.respond_to? :to_ary %>
      <%= render(:partial => 'block_textilizable',
                 :locals => {:block_name => b.first,
                             :block_title => b[1],
                             :textile => b.last}) %>
    <% end %>
  <% end %>
</div>

<h4><%= l(:label_file_plural) %></h4>
<div class="attachments" id="page_layout_attachments">
  <%= render(:partial => "page_layout_attachments") %>
</div>

<% field_list.each do |f| %>
  <%= sortable_element "list-#{f}",
      :tag => 'div',
      :only => 'mypage-box',
      :handle => "handle",
      :dropOnEmpty => true,
      :containment => field_list.collect {|x| "list-#{x}" },
      :constraint => false,
      :url => { :action => "order_blocks", :group => f }
       %>
<% end %>

<%= javascript_tag "updateSelect()" %>

<% content_for :header_tags do %>
  <%= stylesheet_link_tag "my_projects_overview.css", :plugin => "chiliproject_my_project_page", :media => 'all' %>
  <% heads_for_wiki_formatter %>
<% end %>

<% html_title(l(:label_overview)) -%>