#541 add "show more" link to producers lists in hub on home page

app/assets/javascripts/darkswarm/controllers/hub_node_controller.js.coffee

@@ -1,6 +1,6 @@
 Darkswarm.controller "HubNodeCtrl", ($scope, HashNavigation, Navigation, $location, $templateCache, CurrentHub) ->
-  $scope.toggle = ->
-    HashNavigation.toggle $scope.hub.hash
+  $scope.toggle = (e) ->
+    HashNavigation.toggle $scope.hub.hash if !angular.element(e.target).inheritedData('is-link')
 
   $scope.open = ->
     HashNavigation.active $scope.hub.hash

app/assets/stylesheets/darkswarm/hub_node.css.sass

@@ -83,6 +83,23 @@
           .active_table_row:first-child .skinny-head
             background-color: rgba(255,255,255,0.85)
 
+      .producers-list
+        li.more-producers-link
+          .less
+            display: none
+          a:hover
+            text-decoration: underline
+        li.additional-producer
+          display: none
+        &.show-more-producers
+          li.additional-producer
+            display: block
+          li.more-producers-link
+            .more
+              display: none
+            .less
+              display: block
+        
     //INACTIVE - closed hub
     &.inactive
       &.closed, &.open

app/views/home/_fat.html.haml

@@ -1,4 +1,4 @@
-.row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle()", "ng-class" => "{'open' : !ofn-i_032-closed-sign()}"}
+.row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : !ofn-i_032-closed-sign()}"}
   .columns.small-12.medium-6.large-5.fat
     %div{"bo-if" => "hub.taxons"}
       %label Shop for
@@ -21,8 +21,20 @@
   .columns.small-12.medium-3.large-5.fat
     %div{"bo-if" => "hub.producers"}
       %label Our producers
-      %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-2
-        %li{"ng-repeat" => "enterprise in hub.producers"}
+      %ul.small-block-grid-2.medium-block-grid-1.large-block-grid-2{"ng-class" => "{'show-more-producers' : toggleMoreProducers}", "class" => "producers-list"}
+        %li{"ng-repeat" => "enterprise in hub.producers | limitTo:7"}
+          %enterprise-modal
+            %i.ofn-i_036-producers
+            %span{"bo-text" => "enterprise.name"}
+        %li{"data-is-link" => "true", "class" => "more-producers-link"}
+          %a{"ng-click" => "toggleMoreProducers=!toggleMoreProducers"}
+            .more
+              +
+              %span{"bo-text" => "hub.producers.length-7"}
+              More
+            .less
+              Show less
+        %li{"ng-repeat" => "enterprise in hub.producers.slice(7,hub.producers.length)", "class" => "additional-producer"}
           %enterprise-modal
             %i.ofn-i_036-producers
             %span{"bo-text" => "enterprise.name"}

app/views/home/_skinny.html.haml

@@ -1,4 +1,4 @@
-.row.active_table_row{"ng-if" => "hub.is_distributor", "ng-click" => "toggle()", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}", bindonce: true}
+.row.active_table_row{"ng-if" => "hub.is_distributor", "ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}", bindonce: true}
 
   .columns.small-12.medium-6.large-5.skinny-head
     %a.hub{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}

app/views/producers/_fat.html.haml

@@ -1,4 +1,4 @@
-.row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle()", "ng-class" => "{'open' : !ofn-i_032-closed-sign()}"}
+.row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : !ofn-i_032-closed-sign()}"}
   
   .columns.small-12.medium-7.large-7.fat
     / Will add in long description available once clean up HTML formatting producer.long_description

app/views/producers/_skinny.html.haml

@@ -1,4 +1,4 @@
-.row.active_table_row{"ng-click" => "toggle()", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
+.row.active_table_row{"ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
   .columns.small-12.medium-4.large-4.skinny-head
     %span{"bo-if" => "producer.is_distributor" }
       %a.is_distributor{"bo-href" => "producer.path" }