toggle visibility of products

client/index.html

@@ -146,24 +146,20 @@
                     </ul>
                 </nav>
 
-                <ul class="product-list">
+                <ul class="product-list" rv-show="data.productView.list">
                     <li rv-each-product="data.products">
                         <div class="product-short-desc">
                             <!--rv-src-strict="product.thumbUrl"-->
                             <img>
-                            <span><a href="">{product.name}</a></span>
+                            <span><a href="#productos/producto" rv-on-click="seeProduct">{product.name}</a></span>
                             <p>{product.text.shortDesc}</p>
                         </div>
                     </li>
                 </ul>
-            </div>
-        </div>
-    </section>
 
-    <section id="producto-descripcion" rv-show="selectedSection.productoDescripcion">
-        <div class="product-description section">
-            <div class="container">
-                {selectedProduct.name}
+                <div class="product-full-desc section" rv-show="data.productView.description">
+                    <h4>{data.productDescription.name}</h4>
+                </div>
             </div>
         </div>
     </section>

client/js/app.js

@@ -59,8 +59,7 @@ function getProducts(category) {
 
 var selectedSection_ = {
     empresa: true,
-    productos: false,
-    productoDescripcion: false
+    productos: false
 };
 
 var selectedCategory_ = 'proteccion intensiva';
@@ -80,13 +79,18 @@ function getCategories() {
 }
 
 var productCategories_ = [];
-
+var productListEl = document.getElementsByClassName('product-list')[0];
+var categoryNavEl = document.getElementById('product-category-nav');
 var app = document.getElementById('app');
-
 var data = {
     allProducts: {},
     products: [],
-    selectedCategory: ''
+    selectedCategory: '',
+    productDescription: {},
+    productView: {
+        list: true,
+        description: false
+    }
 }
 
 var view = rivets.bind(app, {
@@ -103,15 +107,23 @@ var view = rivets.bind(app, {
         scope.getData[newValue]();
     },
     selectCategory: function(event, scope) {
+        data.productView.list = true;
+        data.productView.description = false;
         var category = productCategories_.find(R.propEq('name', event.target.text));
         var categoryList = getElement('ul#product-category-nav > li > a')
         data.selectedCategory = category;
         getProducts(category._id);
         addSelectedClass(categoryList, category.name);
     },
+    seeProduct: function(event, scope) {
+        data.productView.list = false;
+        data.productView.description = true;
+        data.productDescription = data.products.find(R.propEq('name', event.target.text));
+    },
     getData: {
         productos: getCategories,
-        empresa: function() {}
+        empresa: function() {},
+        verMas: function() {}
     }
 });