Update display of join words in filters list and rearrange code a bit for clarity

Here we need to build a really dynamic structure on the page like "Results for: <search-term> in <filter1> or <filter2>" and the styling on each of the words needs to be a bit different, specifically the filter terms need to be differently styled to the join words like "in" and "or". We have to generate those bits on the Angular side, but they also have to be wrapped in HTML in a specific way.

$sce.trustAsHtml() marks the injected HTML as "safe" (in relation to security issues like XSS). In this case the injected content doesn't involve any user-defined data, so it should be fine.

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

@@ -1,4 +1,4 @@
-Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
+Darkswarm.controller "ProductsCtrl", ($scope, $sce, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
   $scope.Products = Products
   $scope.Cart = Cart
   $scope.query = ""
@@ -76,12 +76,15 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
   $scope.appliedTaxonsList = ->
     $scope.activeTaxons.map( (taxon_id) ->
       Taxons.taxons_by_id[taxon_id].name
-    ).join(" #{t('products_or')} ") if $scope.activeTaxons?
+    ).join($scope.filtersJoinWord()) if $scope.activeTaxons?
 
   $scope.appliedPropertiesList = ->
     $scope.activeProperties.map( (property_id) ->
       Properties.properties_by_id[property_id].name
-    ).join(" #{t('products_or')} ") if $scope.activeProperties?
+    ).join($scope.filtersJoinWord()) if $scope.activeProperties?
+
+  $scope.filtersJoinWord = ->
+    $sce.trustAsHtml(" <span>#{t('products_or')}</span> ")
 
   $scope.clearAll = ->
     $scope.clearQuery()

app/views/shop/products/_search_feedback.haml

@@ -2,20 +2,21 @@
   .small-12.columns
     .alert-box.search-alert.ng-scope
       %div{"ng-show" => "Products.products.length > 0"}
+        %span.filter-label
+          = t :products_results_for
+          %span{ ng: { hide: "!query"} }
+            %span.applied-search
+              {{ query }}
+
+          %span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
+            = t :products_filters_in
+
+          %span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+          %span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
+
         %a.clear-all.right{"ng-click" => "clearAll()"}
           = t :products_clear
           %i.ofn-i_009-close
-        %span.filter-label
-          = t :products_results_for
-          %span.applied-properties
-            {{ appliedPropertiesList() }}
-          %span.applied-taxons
-            {{ appliedTaxonsList() }}
-          %span{ ng: { hide: "!query"} }
-            %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
-              = t :products_with
-            %span.applied-search
-              {{ query }}
 
       %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
         .row.summary

config/locales/en.yml

@@ -1651,7 +1651,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   products_clear: Clear
   products_showing: "Showing:"
   products_results_for: "Results for"
-  products_or: "OR"
+  products_or: "or"
+  products_filters_in: "in"
   products_with: with
   products_search: "Search..."
   products_filter_by: "Filter by"