Render the container block box at container view

Render container block box and do not override children boxes makes drag and drop functional. Also fix article block to not use direct box attribute and use owner method instead.

Render the container block box at container view
Render container block box and do not override children boxes makes drag and drop functional. Also fix article block to not use direct box attribute and use owner method instead.
Victor Costa
1 parent 6fba4e5c
Showing 7 changed files with 69 additions and 44 deletions Show diff stats
app/helpers/boxes_helper.rb
app/models/article_block.rb
app/views/box_organizer/_article_block.rhtml
plugins/container_block/lib/ext/block.rb
plugins/container_block/public/style.css
plugins/container_block/test/unit/block_test.rb
plugins/container_block/views/blocks/container.rhtml
@@ -104,14 +104,16 @@ module BoxesHelper
       result = filter_html(result, block)
     end
  
-    box_decorator.block_target(block.box, block) +
-      content_tag('div',
-       content_tag('div',
+    content_tag('div',
+      box_decorator.block_target(block.box, block) +
+        content_tag('div',
          content_tag('div',
-           result + footer_content + box_decorator.block_edit_buttons(block),
-           :class => 'block-inner-2'),
-         :class => 'block-inner-1'),
-       options) +
+           content_tag('div',
+             result + footer_content + box_decorator.block_edit_buttons(block),
+             :class => 'block-inner-2'),
+           :class => 'block-inner-1'),
+       options),
+    :class => 'block-outer') +
     box_decorator.block_handle(block)
   end
  
@@ -49,8 +49,8 @@ class ArticleBlock &lt; Block
   end
  
   def available_articles
-    return [] if self.box.nil? or self.box.owner.nil?
-    self.box.owner.kind_of?(Environment) ? self.box.owner.portal_community.articles : self.box.owner.articles
+    return [] if self.owner.nil?
+    self.owner.kind_of?(Environment) ? self.owner.portal_community.articles : self.owner.articles
   end
  
   def posts_per_page
 <div class="article-block-edition">
-<% if @block.box.owner.kind_of?(Environment) and @block.box.owner.portal_community.nil? %>
+<% if @block.owner.kind_of?(Environment) and @block.owner.portal_community.nil? %>
   <p id="no_portal_community">
   <%= _("You don't have an community defined as the portal community. Define it before use this block properly.") %>
   </p>
@@ -2,14 +2,11 @@ require_dependency &#39;block&#39;
  
 class Block
  
-  def box_with_container_block_plugin
-    box = box_without_container_block_plugin
-    if box && box.owner.kind_of?(ContainerBlock) 
-      box = box.owner.box
-    end
-    box
+  def owner_with_container_block_plugin
+    owner = owner_without_container_block_plugin
+    owner.kind_of?(ContainerBlock) ? owner.owner : owner
   end
  
-  alias_method_chain :box, :container_block_plugin
+  alias_method_chain :owner, :container_block_plugin
  
 end
-#content .boxes .container-block .container_block_child {
+#content .boxes .container-block .container_block_child, .container-block .block-outer {
   float: left;
 }
  
+.container-block .block-target {
+  clear: both;
+}
+
+.container-block .block-target[id^='end-of-box-'] {
+  display: none;
+}
+
 #content .boxes .container-block .block .icon-down, #content .boxes .container-block .block .icon-down-disabled {
   background-image: url(/designs/icons/default/Tango/16x16/actions/go-next.png);
 }
@@ -3,22 +3,29 @@ require File.dirname(__FILE__) + &#39;/../test_helper&#39;
 class BlockTest < ActiveSupport::TestCase
  
   def setup
-    @environment = Environment.new
+    @environment = fast_create(Environment)
+    @box = Box.create!(:owner => @environment)
+    @container = ContainerBlock.create!(:box => @box)
+  end
  
-    @box = Box.new(:owner => @environment)
-    @block = Block.new(:box => @box)
+  should 'return environment box if block owner is not a ContainerBlock' do
+    block = Block.create!(:box => @box)
+    assert_equal @box, block.box
+  end
  
-    @container_box = Box.new(:owner => @environment)
-    @container = ContainerBlock.new(:box => @container_box)
+  should 'return container box if block owner is a ContainerBlock' do
+    block = Block.create!(:box => @container.container_box)
+    assert_equal @container.container_box, block.box
   end
  
-  should 'return block box if block owner is not a ContainerBlock' do
-    assert_equal @box, @block.box
+  should 'return block owner if block onwer is not a ContainerBlock' do
+    block = Block.create!(:box => @box)
+    assert_equal @environment, block.owner
   end
  
-  should 'return container box if block onwer is a ContainerBlock' do
-    @box.owner = @container
-    assert_equal @container_box, @block.box
+  should 'return environment as owner if block onwer is a ContainerBlock' do
+    block = Block.create!(:box => @container.container_box)
+    assert_equal @environment, block.owner
   end
  
 end
 <% edit_mode = @controller.send(:boxes_editor?) && @controller.send(:uses_design_blocks?) %>
 <% box_decorator = edit_mode ? self : BoxesHelper::DontMoveBlocks %>
  
-<% box_decorator.select_blocks(block.blocks, { :article => @page, :request_path => request.path, :locale => locale }).each do |child| %>
-  <div class="container_block_child" id="container_block_child_<%= block.id %>">
-    <%= display_block(child, '') %>
-  </div>
-  <style>#block-<%=child.id%> { width: <%= block.child_width(child.id) %>px; }</style>
-<% end %>
+
+<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 %>); return false;" class="button icon-resize"></a>
+    <a href="#" onclick="toggleMoveContainerChildren(<%= block.id %>, <%= block.container_box.id %>); return false;" class="button icon-resize"></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})", 
+                           :with => "containerChildrenWidth(#{block.id}, #{block.container_box.id})", 
                            :html => {:class => "button icon-save container_block_save", :id => "container_block_save_#{block.id}" },
                            :loading => "open_loading(DEFAULT_LOADING_MESSAGE);",
                            :loaded => "close_loading();",
@@ -21,12 +26,19 @@
   </div>
  
   <script>
-    function toggleMoveContainerChildren(container) {
-      var containerDiv = jQuery('#block-'+container+' #container_block_child_'+container+' > .block');
-      if(containerDiv.is('.ui-resizable')) {
-        containerDiv.resizable('destroy');
+    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 {
-        containerDiv.resizable({
+        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 ) {
@@ -36,10 +48,9 @@
       }
     }
  
-    function containerChildrenWidth(container) {
+    function containerChildrenWidth(container, box) {
       widths = "";
-      jQuery('#block-'+container+' .container_block_child .block').each(function(i) { 
-        //childId = jQuery(this).attr('id').substring(6);
+      jQuery('#box-'+box+' > .block-outer > .block').each(function(i) { 
         childId = jQuery(this).attr('id').match(/block-(\d+)/)[1];
         widths+=childId+","+jQuery(this).width()+"|";
       });
...	...	@@ -104,14 +104,16 @@ module BoxesHelper
104	104	result = filter_html(result, block)
105	105	end
106	106
107		- box_decorator.block_target(block.box, block) +
108		- content_tag('div',
109		- content_tag('div',
	107	+ content_tag('div',
	108	+ box_decorator.block_target(block.box, block) +
	109	+ content_tag('div',
110	110	content_tag('div',
111		- result + footer_content + box_decorator.block_edit_buttons(block),
112		- :class => 'block-inner-2'),
113		- :class => 'block-inner-1'),
114		- options) +
	111	+ content_tag('div',
	112	+ result + footer_content + box_decorator.block_edit_buttons(block),
	113	+ :class => 'block-inner-2'),
	114	+ :class => 'block-inner-1'),
	115	+ options),
	116	+ :class => 'block-outer') +
115	117	box_decorator.block_handle(block)
116	118	end
117	119
...	...
...	...	@@ -49,8 +49,8 @@ class ArticleBlock < Block
49	49	end
50	50
51	51	def available_articles
52		- return [] if self.box.nil? or self.box.owner.nil?
53		- self.box.owner.kind_of?(Environment) ? self.box.owner.portal_community.articles : self.box.owner.articles
	52	+ return [] if self.owner.nil?
	53	+ self.owner.kind_of?(Environment) ? self.owner.portal_community.articles : self.owner.articles
54	54	end
55	55
56	56	def posts_per_page
...	...
1	1	<div class="article-block-edition">
2		-<% if @block.box.owner.kind_of?(Environment) and @block.box.owner.portal_community.nil? %>
	2	+<% if @block.owner.kind_of?(Environment) and @block.owner.portal_community.nil? %>
3	3	<p id="no_portal_community">
4	4	<%= _("You don't have an community defined as the portal community. Define it before use this block properly.") %>
5	5	</p>
...	...
...	...	@@ -2,14 +2,11 @@ require_dependency 'block'
2	2
3	3	class Block
4	4
5		- def box_with_container_block_plugin
6		- box = box_without_container_block_plugin
7		- if box && box.owner.kind_of?(ContainerBlock)
8		- box = box.owner.box
9		- end
10		- box
	5	+ def owner_with_container_block_plugin
	6	+ owner = owner_without_container_block_plugin
	7	+ owner.kind_of?(ContainerBlock) ? owner.owner : owner
11	8	end
12	9
13		- alias_method_chain :box, :container_block_plugin
	10	+ alias_method_chain :owner, :container_block_plugin
14	11
15	12	end
...	...
1		-#content .boxes .container-block .container_block_child {
	1	+#content .boxes .container-block .container_block_child, .container-block .block-outer {
2	2	float: left;
3	3	}
4	4
	5	+.container-block .block-target {
	6	+ clear: both;
	7	+}
	8	+
	9	+.container-block .block-target[id^='end-of-box-'] {
	10	+ display: none;
	11	+}
	12	+
5	13	#content .boxes .container-block .block .icon-down, #content .boxes .container-block .block .icon-down-disabled {
6	14	background-image: url(/designs/icons/default/Tango/16x16/actions/go-next.png);
7	15	}
...	...
...	...	@@ -3,22 +3,29 @@ require File.dirname(__FILE__) + '/../test_helper'
3	3	class BlockTest < ActiveSupport::TestCase
4	4
5	5	def setup
6		- @environment = Environment.new
	6	+ @environment = fast_create(Environment)
	7	+ @box = Box.create!(:owner => @environment)
	8	+ @container = ContainerBlock.create!(:box => @box)
	9	+ end
7	10
8		- @box = Box.new(:owner => @environment)
9		- @block = Block.new(:box => @box)
	11	+ should 'return environment box if block owner is not a ContainerBlock' do
	12	+ block = Block.create!(:box => @box)
	13	+ assert_equal @box, block.box
	14	+ end
10	15
11		- @container_box = Box.new(:owner => @environment)
12		- @container = ContainerBlock.new(:box => @container_box)
	16	+ should 'return container box if block owner is a ContainerBlock' do
	17	+ block = Block.create!(:box => @container.container_box)
	18	+ assert_equal @container.container_box, block.box
13	19	end
14	20
15		- should 'return block box if block owner is not a ContainerBlock' do
16		- assert_equal @box, @block.box
	21	+ should 'return block owner if block onwer is not a ContainerBlock' do
	22	+ block = Block.create!(:box => @box)
	23	+ assert_equal @environment, block.owner
17	24	end
18	25
19		- should 'return container box if block onwer is a ContainerBlock' do
20		- @box.owner = @container
21		- assert_equal @container_box, @block.box
	26	+ should 'return environment as owner if block onwer is a ContainerBlock' do
	27	+ block = Block.create!(:box => @container.container_box)
	28	+ assert_equal @environment, block.owner
22	29	end
23	30
24	31	end
...	...
1	1	<% edit_mode = @controller.send(:boxes_editor?) && @controller.send(:uses_design_blocks?) %>
2	2	<% box_decorator = edit_mode ? self : BoxesHelper::DontMoveBlocks %>
3	3
4		-<% box_decorator.select_blocks(block.blocks, { :article => @page, :request_path => request.path, :locale => locale }).each do \|child\| %>
5		- <div class="container_block_child" id="container_block_child_<%= block.id %>">
6		- <%= display_block(child, '') %>
7		- </div>
8		- <style>#block-<%=child.id%> { width: <%= block.child_width(child.id) %>px; }</style>
9		-<% end %>
	4	+
	5	+<div class="box" id="box-<%= block.container_box.id %>">
	6	+ <%= display_box_content(block.container_box, nil) %>
	7	+ <div class="clear"></div>
	8	+</div>
10	9	<div class="clear"></div>
11	10
	11	+<style>
	12	+ <% box_decorator.select_blocks(block.blocks, { :article => @page, :request_path => request.path, :locale => locale }).each do \|child\| %>
	13	+ #block-<%=block.id%> #block-<%=child.id%> { width: <%= block.child_width(child.id) %>px; }
	14	+ <% end %>
	15	+</style>
	16	+
12	17	<% if edit_mode %>
13	18	<div class="button-bar">
14		- <a href="#" onclick="toggleMoveContainerChildren(<%= block.id %>); return false;" class="button icon-resize"></a>
	19	+ <a href="#" onclick="toggleMoveContainerChildren(<%= block.id %>, <%= block.container_box.id %>); return false;" class="button icon-resize"></a>
15	20	<%= link_to_remote '', :url => { :controller => @controller.boxes_holder.kind_of?(Environment) ? 'container_block_plugin_admin' : 'container_block_plugin_myprofile', :action => 'saveWidths', :id => block.id },
16		- :with => "containerChildrenWidth(#{block.id})",
	21	+ :with => "containerChildrenWidth(#{block.id}, #{block.container_box.id})",
17	22	:html => {:class => "button icon-save container_block_save", :id => "container_block_save_#{block.id}" },
18	23	:loading => "open_loading(DEFAULT_LOADING_MESSAGE);",
19	24	:loaded => "close_loading();",
...	...	@@ -21,12 +26,19 @@
21	26	</div>
22	27
23	28	<script>
24		- function toggleMoveContainerChildren(container) {
25		- var containerDiv = jQuery('#block-'+container+' #container_block_child_'+container+' > .block');
26		- if(containerDiv.is('.ui-resizable')) {
27		- containerDiv.resizable('destroy');
	29	+ function toggleMoveContainerChildren(container, box) {
	30	+ var div = jQuery('#box-'+box+' > .block-outer > .block');
	31	+ var targetDiv = jQuery('#box-'+box+' .block-outer .block-target');
	32	+ if(div.is('.ui-resizable')) {
	33	+ targetDiv.show();
	34	+ div.find("a").die("click");
	35	+ div.resizable('destroy');
28	36	} else {
29		- containerDiv.resizable({
	37	+ targetDiv.hide();
	38	+ div.find("a").live("click", function(e) {
	39	+ e.preventDefault();
	40	+ });
	41	+ div.resizable({
30	42	handles: 'e, w',
31	43	containment: '#block-'+container+' .block-inner-2',
32	44	resize: function( event, ui ) {
...	...	@@ -36,10 +48,9 @@
36	48	}
37	49	}
38	50
39		- function containerChildrenWidth(container) {
	51	+ function containerChildrenWidth(container, box) {
40	52	widths = "";
41		- jQuery('#block-'+container+' .container_block_child .block').each(function(i) {
42		- //childId = jQuery(this).attr('id').substring(6);
	53	+ jQuery('#box-'+box+' > .block-outer > .block').each(function(i) {
43	54	childId = jQuery(this).attr('id').match(/block-(\d+)/)[1];
44	55	widths+=childId+","+jQuery(this).width()+"\|";
45	56	});
...	...