Correct product catalog's "expand-boxes"

* Correct multiple id generation on catalog/index.rhtml * Better main floating box element selection with a class * Remove txt2html from description. (WTF!?) * catalog.js rewrite. Simpler and working nice. * Move width/position style from JS do CSS. closes ActionItem2621

Correct product catalog's "expand-boxes"
* Correct multiple id generation on catalog/index.rhtml * Better main floating box element selection with a class * Remove txt2html from description. (WTF!?) * catalog.js rewrite. Simpler and working nice. * Move width/position style from JS do CSS. closes ActionItem2621
Aurélio A. Heckert
1 parent aaefdf5b
Showing 3 changed files with 42 additions and 54 deletions Show diff stats
app/views/catalog/index.rhtml
public/javascripts/catalog.js
public/stylesheets/application.css
@@ -64,20 +64,20 @@
  
         <% if product.description %>
           <li class="product-description expand-box">
-            <span id="product-description-button"><%= _('description') %></span>
-            <div>
+            <span class="product-description-button"><%= _('description') %></span>
+            <div class="float-box">
               <div class="arrow"></div>
-              <div class="content" id="product-description"><%= txt2html(product.description || '') %></div>
+              <div class="content"><%= product.description %></div>
             </div>
           </li>
         <% end %>
  
         <% if product.price_described? %>
           <li class="product-price-composition expand-box">
-            <span id="product-price-composition-button"><%= _('price composition') %></span>
-            <div>
+            <span class="product-price-composition-button"><%= _('price composition') %></span>
+            <div class="float-box">
               <div class="arrow"></div>
-              <div class="content" id="product-price-composition">
+              <div class="content">
                 <% product.inputs.relevant_to_price.each do |i| %>
                   <div class="search-product-input-dots-to-price">
                     <div class="search-product-input-name"><%= i.product_category.name %></div>
@@ -98,9 +98,9 @@
         <% if product.inputs.count > 0 %>
           <li class="product-inputs expand-box">
             <span id="inputs-button"><%= _('inputs and raw materials') %></span>
-            <div>
+            <div class="float-box">
               <div class="arrow"></div>
-              <div class="content" id="inputs-description">
+              <div class="content">
                 <% product.inputs.each do |i| %>
                   <div>
                     <%= _('%{amount_used} %{unit} of') % {:amount_used => i.amount_used, :unit => i.unit.singular} + ' ' if i.has_all_price_details? %>
 (function($) {
  
-$('#product-list .product .expand-box').live('click', function () {
-  $('.expand-box').each(function(index, element){ this.clicked = false; toggle_expandbox(this); });
-  this.clicked = !this.clicked;
-  toggle_expandbox(this);
-  $.each($(this).siblings('.expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
-
-  return false;
-});
-
-$(document).live('click', function() {
-  $.each($('#product-list .product .expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
-});
-
-$(document).click(function (event) {
-   if ($(event.target).parents('.expand-box').length == 0) {
-     $('.expand-box').each(function(index, element){
-       $(element).removeClass('open');
-       $(element).children('div').toggle(false);
-     });
-   }
-});
-
-var rows = {};
-$('#product-list .product').each(function (index, element) {
-  obj = rows[$(element).offset().top] || {};
-
-  obj.heights = obj.heights || [];
-  obj.elements = obj.elements || [];
-  obj.heights.push($(element).height());
-  obj.elements.push(element);
-
-  rows[$(element).offset().top] = obj;
-});
-
-$.each(rows, function(top, obj) {
-  maxWidth = Array.max(obj.heights);
-  $(obj.elements).height(maxWidth);
-});
+  function toggle_expandbox(element, open) {
+    element.clicked = open;
+    $(element).toggleClass('open', open);
+  }
+
+  $('#product-list .expand-box').live('click', function () {
+    var me = this;
+    $('.expand-box').each(function(index, element){
+      if ( element != me ) toggle_expandbox(element, false);
+    });
+    toggle_expandbox(me, !me.clicked);
+    return false;
+  });
+
+  $('#product-list .float-box').live('click', function () {
+    return false;
+  });
+
+  $(document).click(function (event) {
+     if ($(event.target).parents('.expand-box').length == 0) {
+       $('#product-list .expand-box').each(function(index, element){
+         toggle_expandbox(element, false);
+       });
+     }
+  });
  
 })(jQuery);
-
-function toggle_expandbox(e) {
-  jQuery(e).toggleClass('open', e.clicked);
-  jQuery(e).children('div').toggle(e.clicked).css({left: jQuery(e).position().left-180, top: jQuery(e).position().top-10});
-}
@@ -2509,6 +2509,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
   -webkit-border-radius: 10px 0px 0px 10px;
   border-radius: 10px 0px 0px 10px;
   width: 202px;
+  position: relative;
 }
 #product-list .expand-box > span {
   padding-left: 20px;
@@ -2539,17 +2540,22 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
 #product-list li.product .expand-box > span {
   text-transform: uppercase;
 }
-#product-list li.product .expand-box > div {
+#product-list li.product .expand-box .float-box {
   display: none;
   position: absolute;
+  left: -220px;
+  top: -11px;
   z-index: 10;
 }
+#product-list li.product .expand-box.open .float-box {
+  display: block;
+}
 #product-list li.product .expand-box .content {
   font-size: 11px;
   padding: 6px 5px;
   overflow: auto;
   max-height: 200px;
-  width: 160px;
+  width: 200px;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -2784,7 +2790,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
   position: relative;
   clear: left;
 }
-#product-description, #product-details, #product-info, .input-item {
+#product-details, #product-info, .input-item {
   overflow: hidden;
 }
 #product-info {
...	...	@@ -64,20 +64,20 @@
64	64
65	65	<% if product.description %>
66	66	<li class="product-description expand-box">
67		- <span id="product-description-button"><%= _('description') %></span>
68		- <div>
	67	+ <span class="product-description-button"><%= _('description') %></span>
	68	+ <div class="float-box">
69	69	<div class="arrow"></div>
70		- <div class="content" id="product-description"><%= txt2html(product.description \|\| '') %></div>
	70	+ <div class="content"><%= product.description %></div>
71	71	</div>
72	72	</li>
73	73	<% end %>
74	74
75	75	<% if product.price_described? %>
76	76	<li class="product-price-composition expand-box">
77		- <span id="product-price-composition-button"><%= _('price composition') %></span>
78		- <div>
	77	+ <span class="product-price-composition-button"><%= _('price composition') %></span>
	78	+ <div class="float-box">
79	79	<div class="arrow"></div>
80		- <div class="content" id="product-price-composition">
	80	+ <div class="content">
81	81	<% product.inputs.relevant_to_price.each do \|i\| %>
82	82	<div class="search-product-input-dots-to-price">
83	83	<div class="search-product-input-name"><%= i.product_category.name %></div>
...	...	@@ -98,9 +98,9 @@
98	98	<% if product.inputs.count > 0 %>
99	99	<li class="product-inputs expand-box">
100	100	<span id="inputs-button"><%= _('inputs and raw materials') %></span>
101		- <div>
	101	+ <div class="float-box">
102	102	<div class="arrow"></div>
103		- <div class="content" id="inputs-description">
	103	+ <div class="content">
104	104	<% product.inputs.each do \|i\| %>
105	105	<div>
106	106	<%= _('%{amount_used} %{unit} of') % {:amount_used => i.amount_used, :unit => i.unit.singular} + ' ' if i.has_all_price_details? %>
...	...
1	1	(function($) {
2	2
3		-$('#product-list .product .expand-box').live('click', function () {
4		- $('.expand-box').each(function(index, element){ this.clicked = false; toggle_expandbox(this); });
5		- this.clicked = !this.clicked;
6		- toggle_expandbox(this);
7		- $.each($(this).siblings('.expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
8		-
9		- return false;
10		-});
11		-
12		-$(document).live('click', function() {
13		- $.each($('#product-list .product .expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });
14		-});
15		-
16		-$(document).click(function (event) {
17		- if ($(event.target).parents('.expand-box').length == 0) {
18		- $('.expand-box').each(function(index, element){
19		- $(element).removeClass('open');
20		- $(element).children('div').toggle(false);
21		- });
22		- }
23		-});
24		-
25		-var rows = {};
26		-$('#product-list .product').each(function (index, element) {
27		- obj = rows[$(element).offset().top] \|\| {};
28		-
29		- obj.heights = obj.heights \|\| [];
30		- obj.elements = obj.elements \|\| [];
31		- obj.heights.push($(element).height());
32		- obj.elements.push(element);
33		-
34		- rows[$(element).offset().top] = obj;
35		-});
36		-
37		-$.each(rows, function(top, obj) {
38		- maxWidth = Array.max(obj.heights);
39		- $(obj.elements).height(maxWidth);
40		-});
	3	+ function toggle_expandbox(element, open) {
	4	+ element.clicked = open;
	5	+ $(element).toggleClass('open', open);
	6	+ }
	7	+
	8	+ $('#product-list .expand-box').live('click', function () {
	9	+ var me = this;
	10	+ $('.expand-box').each(function(index, element){
	11	+ if ( element != me ) toggle_expandbox(element, false);
	12	+ });
	13	+ toggle_expandbox(me, !me.clicked);
	14	+ return false;
	15	+ });
	16	+
	17	+ $('#product-list .float-box').live('click', function () {
	18	+ return false;
	19	+ });
	20	+
	21	+ $(document).click(function (event) {
	22	+ if ($(event.target).parents('.expand-box').length == 0) {
	23	+ $('#product-list .expand-box').each(function(index, element){
	24	+ toggle_expandbox(element, false);
	25	+ });
	26	+ }
	27	+ });
41	28
42	29	})(jQuery);
43		-
44		-function toggle_expandbox(e) {
45		- jQuery(e).toggleClass('open', e.clicked);
46		- jQuery(e).children('div').toggle(e.clicked).css({left: jQuery(e).position().left-180, top: jQuery(e).position().top-10});
47		-}
...	...
...	...	@@ -2509,6 +2509,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2509	2509	-webkit-border-radius: 10px 0px 0px 10px;
2510	2510	border-radius: 10px 0px 0px 10px;
2511	2511	width: 202px;
	2512	+ position: relative;
2512	2513	}
2513	2514	#product-list .expand-box > span {
2514	2515	padding-left: 20px;
...	...	@@ -2539,17 +2540,22 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2539	2540	#product-list li.product .expand-box > span {
2540	2541	text-transform: uppercase;
2541	2542	}
2542		-#product-list li.product .expand-box > div {
	2543	+#product-list li.product .expand-box .float-box {
2543	2544	display: none;
2544	2545	position: absolute;
	2546	+ left: -220px;
	2547	+ top: -11px;
2545	2548	z-index: 10;
2546	2549	}
	2550	+#product-list li.product .expand-box.open .float-box {
	2551	+ display: block;
	2552	+}
2547	2553	#product-list li.product .expand-box .content {
2548	2554	font-size: 11px;
2549	2555	padding: 6px 5px;
2550	2556	overflow: auto;
2551	2557	max-height: 200px;
2552		- width: 160px;
	2558	+ width: 200px;
2553	2559	border-radius: 5px;
2554	2560	-moz-border-radius: 5px;
2555	2561	-webkit-border-radius: 5px;
...	...	@@ -2784,7 +2790,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2784	2790	position: relative;
2785	2791	clear: left;
2786	2792	}
2787		-#product-description, #product-details, #product-info, .input-item {
	2793	+#product-details, #product-info, .input-item {
2788	2794	overflow: hidden;
2789	2795	}
2790	2796	#product-info {
...	...