Some comments and refactoring

app/assets/javascripts/darkswarm/directives/active_selector.js.coffee

@@ -1,4 +1,6 @@
 Darkswarm.directive "activeSelector",  ->
+  # A generic selector that allows an object/scope to be toggled between active and inactive
+  # Used in the filters, but hypothetically useable anywhere
   restrict: 'E'
   transclude: true
   replace: true
@@ -8,5 +10,6 @@ Darkswarm.directive "activeSelector",  ->
     elem.bind "click", ->
       scope.$apply ->
         scope.selector.active = !scope.selector.active 
-        scope.emit()
+        # This function is a convention, e.g. a callback on the scope applied when active changes
+        scope.emit() if scope.emit 
   

app/assets/javascripts/darkswarm/directives/active_table_hub_link.js.coffee

@@ -1,11 +1,12 @@
 Darkswarm.directive "activeTableHubLink", (CurrentHub, CurrentOrder) ->
+  # Change the text of the hub link based on CurrentHub
+  # To be used with ofnEmptiesCart
+  # Takes "change" and "shop" as text string attributes
   restrict: "A"
   scope:
     hub: '=activeTableHubLink'
   template: "{{action}}"
   link: (scope, elm, attr)->
-    # Swap out the text of the hub link depending on whether it'll change current hub
-    # To be used with ofnEmptiesCart
     if CurrentHub.hub?.id and CurrentHub.hub.id isnt scope.hub.id
       scope.action = attr.change
     else

app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee

@@ -1,4 +1,5 @@
 Darkswarm.directive "cart", ->
+  # Toggles visibility of the "cart" popover
   restrict: 'A'
   link: (scope, elem, attr)->
     scope.open = false

app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee

@@ -1,9 +1,15 @@
 Darkswarm.directive "priceBreakdown", ($tooltip)->
-  tooltip = $tooltip 'priceBreakdown', 'priceBreakdown', 'click' 
+  # We use the $tooltip service from Angular foundation to give us boilerplate
+  # Subsequently we patch the scope, template and restrictions
+  tooltip = $tooltip 'priceBreakdown', 'priceBreakdown', 'click'
   tooltip.scope = 
     variant: "="
+  tooltip.templateUrl = "price_breakdown_button.html"
+  tooltip.replace = true
+  tooltip.restrict = 'E'
   tooltip
 
+# This is automatically referenced via naming convention in $tooltip
 Darkswarm.directive 'priceBreakdownPopup', ->
   restrict: 'EA'
   replace: true

app/assets/javascripts/templates/price_breakdown.html.haml

@@ -1,7 +1,6 @@
 .joyride-tip-guide{bindonce: true, "ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
   %span.joyride-nub.right
   .joyride-content-wrapper
-
     .collapsed{"ng-show" => "!expanded"}
       %price-percentage{percentage: 'variant.basePricePercentage'}
       %a{"ng-click" => "expanded = !expanded"} 

app/assets/javascripts/templates/price_breakdown_button.html.haml

@@ -0,0 +1,2 @@
+%button.graph-button{"ng-class" => "{open: tt_isOpen}"}
+  %i.ofn-i-058-graph

app/assets/javascripts/templates/shop_variant.html.haml

@@ -50,13 +50,11 @@
       %i.ofn-i_009-close 
       {{ variant.price | currency }}
 
-      %button.graph-button{"price-breakdown" => "_",
-        "variant" => "variant",
-        "ng-class" => "{open: tt_isOpen}",
-        "price-breakdown-animation" => "true",
+      -# Now in a template in app/assets/javascripts/templates !
+      %price-breakdown{"price-breakdown" => "_", variant: "variant", 
         "price-breakdown-append-to-body" => "true",
-        "price-breakdown-placement" => "left"}
-        %i.ofn-i-058-graph
+        "price-breakdown-placement" => "left",
+        "price-breakdown-animation" => true}
 
   .small-12.medium-2.large-2.columns.total-price.text-right
     .table-cell