fix(search): Fix matched term highlighting

NCI-GDC · May 28, 2015 · d928cbe · d928cbe
1 parent f9fbbaf
commit d928cbe
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 41 deletions.
diff --git a/app/scripts/components/quick-search/quick-search.controllers.ts b/app/scripts/components/quick-search/quick-search.controllers.ts
@@ -49,14 +49,10 @@ module ngApp.components.quickSearch.controllers {
           if (typeof obj === "string") {
             if (obj.indexOf(this.searchQuery) > -1) {
               matchedTerms.push(obj);
-              return;
             }
-          }
-
-          if (typeof obj[key] === "string") {
+          } else if (typeof obj[key] === "string") {
             if (obj[key].indexOf(this.searchQuery) > -1) {
               matchedTerms.push(obj[key]);
-              return;
             }
           }
         }
@@ -229,6 +225,7 @@ module ngApp.components.quickSearch.controllers {
         if (!data.length) {
           this.selectedItem = null;
         }
+        this.results = null;
 
         for (var i = 0; i < data.hits.length; i++) {
           var matchedTerms = [];
@@ -257,7 +254,7 @@ module ngApp.components.quickSearch.controllers {
           data.hits[i].matchedTerms = matchedTerms;
         }
 
-        this.results = _.assign([], data);
+        this.results = _.assign({}, data);
         this.setupListeners();
       });
     }

diff --git a/app/scripts/components/quick-search/quick-search.directives.ts b/app/scripts/components/quick-search/quick-search.directives.ts
@@ -15,27 +15,30 @@ module ngApp.components.quickSearch.directives {
         });
 
         this.openModal = () => {
-          if (!(modalElem.data("bs.modal") || {}).isShown) {
+          // Modal stack is a helper service. Used to figure out if one is currently
+          // open already.
+          if ($modalStack.getTop()) {
+            return;
+          }
 
-            modalInstance = $modal.open({
-              templateUrl: "components/quick-search/templates/quick-search-modal.html",
-              controller: "QuickSearchModalController as qsmc",
-              backdrop: "static",
-              size: "lg",
-              keyboard: true
-            });
+          modalInstance = $modal.open({
+            templateUrl: "components/quick-search/templates/quick-search-modal.html",
+            controller: "QuickSearchModalController as qsmc",
+            backdrop: "static",
+            size: "lg",
+            keyboard: true
+          });
 
-            modalInstance.opened.then(() => {
-              // Apparently the Modal should support this by default but I'm running
-              // into cases where it is not.
-              docElem.on("click", (e) => {
-                if (angular.element(e.target).find("#quick-search-modal").length) {
-                  e.preventDefault();
-                  modalInstance.close();
-                }
-              });
+          modalInstance.opened.then(() => {
+            // Apparently the Modal should support this by default but I'm running
+            // into cases where it is not.
+            docElem.on("click", (e) => {
+              if (angular.element(e.target).find("#quick-search-modal").length) {
+                e.preventDefault();
+                modalInstance.close();
+              }
             });
-          }
+          });
         };
       },
       link: function($scope, $element, attrs, ctrl) {
@@ -44,12 +47,6 @@ module ngApp.components.quickSearch.directives {
         });
 
         angular.element($window.document).on("keypress", (e) => {
-          // Modal stack is a helper service. Used to figure out if one is currently
-          // open already.
-          if ($modalStack.getTop()) {
-            return;
-          }
-
           var modalElem = angular.element("#quick-search-modal");
           var validSpaceKeys = [
             0, // Webkit
@@ -65,17 +62,27 @@ module ngApp.components.quickSearch.directives {
     };
   }
 
-  function MatchedTerm($sce): ng.IDirective {
+  function MatchedTerms($sce): ng.IDirective {
     return {
       restrict: "E",
-      templateUrl: "components/quick-search/templates/matched-term.html",
+      templateUrl: "components/quick-search/templates/matched-terms.html",
       scope: {
-        term: "=",
+        terms: "=",
         query: "="
       },
       link: function($scope) {
-        var boldedQuery = "<span class='bolded'>" + $scope.query + "</span>";
-        $scope.term = $sce.trustAsHtml($scope.term.replace(new RegExp($scope.query, "g"), boldedQuery));
+        $scope.$watch("terms", (newVal) => {
+          if (newVal) {
+            var boldedQuery = "<span class='bolded'>" + $scope.query + "</span>";
+            var boldedTerms = [];
+            var regex = new RegExp("[" + $scope.query + "]{" + $scope.query.length + "}", "g");
+            _.forEach(newVal, (item) => {
+              boldedTerms.push(item.replace(regex, boldedQuery));
+            });
+
+            $scope.matchedTerms = _.assign([], boldedTerms);
+          }
+        });
       }
     };
   }
@@ -84,6 +91,6 @@ module ngApp.components.quickSearch.directives {
     .module("quickSearch.directives", [
       "ui.bootstrap.modal"
     ])
-    .directive("matchedTerm", MatchedTerm)
+    .directive("matchedTerms", MatchedTerms)
     .directive("quickSearch", QuickSearch);
 }
diff --git a/app/scripts/components/quick-search/styles.less b/app/scripts/components/quick-search/styles.less
@@ -22,9 +22,10 @@
 
   .matched-term {
     margin-left: 20px;
-    padding: 5px 0;
+    padding-top: 5px;
     font-style: italic;
     font-size: 0.9em;
+    word-wrap: break-word;
 
     .bolded {
       font-weight: 700;

diff --git a/app/scripts/components/quick-search/templates/matched-term.html b/app/scripts/components/quick-search/templates/matched-term.html
diff --git a/app/scripts/components/quick-search/templates/matched-terms.html b/app/scripts/components/quick-search/templates/matched-terms.html
@@ -0,0 +1,3 @@
+<div data-ng-repeat="term in matchedTerms">
+  <div data-ng-bind-html="term" class="matched-term"></div>
+</div>
diff --git a/app/scripts/components/quick-search/templates/quick-search-modal.html b/app/scripts/components/quick-search/templates/quick-search-modal.html
@@ -20,9 +20,7 @@
              data-ng-if="item._type === 'project'"/>
         {{ item._id }}
 
-        <div data-ng-repeat="term in item.matchedTerms track by $index">
-          <matched-term data-term="term" query="qsmc.searchQuery"></matched-term>
-        </div>
+        <matched-terms data-terms="item.matchedTerms" data-query="qsmc.searchQuery"></matched-terms>
       </div>
     </div>
     <div class="col-lg-7" data-ng-if="qsmc.selectedItem">