openproject/app/views/my/page_layout.html.erb

<%#-- copyright
OpenProject is a project management system.
Copyright (C) 2012-2015 the OpenProject Foundation (OPF)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License version 3.

OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
Copyright (C) 2006-2013 Jean-Philippe Lang
Copyright (C) 2010-2013 the ChiliProject Team

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

See doc/COPYRIGHT.rdoc for more details.

++#%>
<script language="JavaScript">
  jQuery(document).ready(function($) {
    // Canonical list of containers that will exchange draggable elements.
    var containers = jQuery('.dragula-container').toArray();
    var drake = dragula(containers);

    // On 'el' drop, we fire an Ajax request to persist the order chosen by
    // the user. Actual ordering details are handled on the server.
    drake.on('drop', function(el, target, source, sibling){
      var url = "<%= my_order_blocks_url %>";

      // Array of target ordered children after this drop.
      var target_ordered_children = jQuery(target).find('.block-wrapper').map(function(){
        return jQuery(this).data('name');
      }).get();

      // Array of source ordered children after this drop.
      var source_ordered_children = jQuery(source).find('.block-wrapper').map(function(){
        return jQuery(this).data('name');
      }).get();

      // We send the source, target, and the new order of the children in both
      // containers to the server.
      jQuery.ajax({
        url: url,
        type: 'POST',
        data: {
          target: jQuery(target).attr('id'),
          source: jQuery(source).attr('id'),
          target_ordered_children: target_ordered_children,
          source_ordered_children: source_ordered_children
        }
      });
    });
  });
</script>

<%= toolbar title: l(:label_my_page) do %>
  <%= styled_form_tag({ action: "add_block" }, remote: true) do %>
    <% options = "<option>--#{t(:button_add)}--</option>"
                  .html_safe
                  .concat(options_for_select(@block_options)) %>

    <li class="toolbar-item">
      <%= styled_select_tag 'block', options, id: 'block-options',class: '-small' %>
    </li>

    <li class="toolbar-item">
      <%= submit_tag l(:button_add), class: 'button' %>
    </li>

    <li class="toolbar-item">
      <%= link_to({action: 'page'}, class: 'button') do %>
        <i class="button--icon icon-cancel"></i>
        <span class="button--text"><%= l(:button_save_back) %></span>
      <% end %>
    </li>
  <% end %>
<% end %>

<h4><%=l(:label_visible_elements) %></h4>
<div id='visible-grid' class="my-page--container widget-boxes">
  <div id="top" class="dragula-container grid-content block-receiver">
    <%= render partial: 'block_container', locals: { edit: true, blocks: @blocks['top'] } %>
  </div>
  <div class="grid-block">
    <% %w(left right).each do |position| %>
        <div id="<%= position %>" class="dragula-container grid-content block-receiver">
          <%= render partial: 'block_container', locals: { edit: true, blocks: @blocks[position] } %>
        </div>
    <% end %>
  </div>
</div>

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