container.rhtml 2.5 KB
<% edit_mode = @controller.send(:boxes_editor?) && @controller.send(:uses_design_blocks?) %>
<% box_decorator = edit_mode ? self : BoxesHelper::DontMoveBlocks %>


<div class="box" id="box-<%= block.container_box.id %>">
  <%= display_box_content(block.container_box, nil) %>
  <div class="clear"></div>
</div>
<div class="clear"></div>

<style>
  <% box_decorator.select_blocks(block.blocks, { :article => @page, :request_path => request.path, :locale => locale }).each do |child| %>
    #block-<%=block.id%> #block-<%=child.id%> { width: <%= block.child_width(child.id) %>px; }
  <% end %>
</style>

<% if edit_mode %>
  <div class="button-bar">
    <a href="#" onclick="toggleMoveContainerChildren(<%= block.id %>, <%= block.container_box.id %>); return false;" class="button icon-resize" title=<%= _('Resize blocks').to_json %>></a>
    <%= link_to_remote '', :url => { :controller => @controller.boxes_holder.kind_of?(Environment) ? 'container_block_plugin_admin' : 'container_block_plugin_myprofile', :action => 'saveWidths', :id => block.id }, 
                           :with => "containerChildrenWidth(#{block.id}, #{block.container_box.id})", 
    :html => {:class => "button icon-save container_block_save", :id => "container_block_save_#{block.id}", :title => _('Save') },
                           :loading => "open_loading(DEFAULT_LOADING_MESSAGE);",
                           :loaded => "close_loading();",
                           :complete => "display_notice(request.responseText);"%>
  </div>

  <script>
    function toggleMoveContainerChildren(container, box) {
      var div = jQuery('#box-'+box+' > .block-outer > .block');
      var targetDiv = jQuery('#box-'+box+' .block-outer .block-target');
      if(div.is('.ui-resizable')) {
        targetDiv.show();
        div.find("a").die("click");
        div.resizable('destroy');
      } else {
        targetDiv.hide();
        div.find("a").live("click", function(e) {
          e.preventDefault();
        });
        div.resizable({
          handles: 'e, w',
          containment: '#block-'+container+' .block-inner-2',
          resize: function( event, ui ) {
            ui.element.height('auto');
          }
        });
      }
    }

    function containerChildrenWidth(container, box) {
      widths = "";
      jQuery('#box-'+box+' > .block-outer > .block').each(function(i) { 
        childId = jQuery(this).attr('id').match(/block-(\d+)/)[1];
        widths+=childId+","+jQuery(this).width()+"|";
      });
      return "widths="+widths;
    }
  </script>
<% end %>