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 {
1	(function($) {	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	})(jQuery);	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	-}