From 4ab69a3b9bd57414f2d8b0065e9c99debd37f998 Mon Sep 17 00:00:00 2001
From: maxiloc <maxime.locqueville@algolia.com>
Date: Sun, 12 Jun 2016 19:50:09 +0200
Subject: [PATCH] V2 modifs (#110)

* feat(dom): wrap separator with a span

* feat(option,dom): add debug to root class + add duplicate class on subcategory and title

* fix(dom): do not display content wrapper if there is nothing inside
---
 README.md              |  2 +-
 docs/documentation.md  |  2 +-
 src/lib/DocSearch.js   | 13 +++++++++++--
 src/lib/templates.js   | 10 ++++++----
 test/DocSearch-test.js | 18 +++++++++---------
 5 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index cb6ef7e0..daeb4ad5 100644
--- a/README.md
+++ b/README.md
@@ -161,10 +161,10 @@ var search = docsearch({
   apiKey: '<API_KEY>',
   indexName: '<INDEX_NAME>',
   inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
+  debug: true,
   autocompleteOptions: {
     // See https://github.com/algolia/autocomplete.js#options
     // For full list of options
-    debug: true
   }
 });
 
diff --git a/docs/documentation.md b/docs/documentation.md
index 52ec464c..f1e24521 100644
--- a/docs/documentation.md
+++ b/docs/documentation.md
@@ -123,10 +123,10 @@ var search = docsearch({
   apiKey: '<API_KEY>',
   indexName: '<INDEX_NAME>',
   inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
+  debug: true,
   autocompleteOptions: {
     // See https://github.com/algolia/autocomplete.js#options
     // For full list of options
-    debug: true
   }
 });
 
diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
index 6ee1ace6..50877176 100644
--- a/src/lib/DocSearch.js
+++ b/src/lib/DocSearch.js
@@ -34,6 +34,7 @@ class DocSearch {
     indexName,
     inputSelector,
     appId = 'BH4D9OD16A',
+    debug = false,
     algoliaOptions = {},
     autocompleteOptions = {
       debug: false,
@@ -41,13 +42,15 @@ class DocSearch {
       autoselect: true
     }
   }) {
-    DocSearch.checkArguments({apiKey, indexName, inputSelector, algoliaOptions, autocompleteOptions});
+    DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions});
 
     this.apiKey = apiKey;
     this.appId = appId;
     this.indexName = indexName;
     this.input = DocSearch.getInputFromSelector(inputSelector);
     this.algoliaOptions = {hitsPerPage: 5, ...algoliaOptions};
+    let autocompleteOptionsDebug = autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug: false;
+    autocompleteOptions.debug = debug || autocompleteOptionsDebug;
     this.autocompleteOptions = autocompleteOptions;
 
     this.client = algoliasearch(this.appId, this.apiKey);
@@ -142,18 +145,24 @@ class DocSearch {
       let url = DocSearch.formatURL(hit);
       let category = utils.getHighlightedValue(hit, 'lvl0');
       let subcategory = utils.getHighlightedValue(hit, 'lvl1') || category;
+      let isSubcategoryDuplicate = subcategory == category;
       let displayTitle = utils.compact([
         utils.getHighlightedValue(hit, 'lvl2') || subcategory,
         utils.getHighlightedValue(hit, 'lvl3'),
         utils.getHighlightedValue(hit, 'lvl4'),
         utils.getHighlightedValue(hit, 'lvl5'),
         utils.getHighlightedValue(hit, 'lvl6')
-      ]).join(' › ');
+      ]).join('<span class="aa-suggestion-title-separator"> › </span>');
+      let isDisplayTitleDuplicate = displayTitle == subcategory;
       let text = utils.getSnippetedValue(hit, 'content');
+      let isTextOrSubcatoryNonEmpty = (subcategory && subcategory != "") || (displayTitle && displayTitle != "");
 
       return {
         isCategoryHeader: hit.isCategoryHeader,
         isSubCategoryHeader: hit.isSubCategoryHeader,
+        isSubcategoryDuplicate: isSubcategoryDuplicate,
+        isDisplayTitleDuplicate: isDisplayTitleDuplicate,
+        isTextOrSubcatoryNonEmpty: isTextOrSubcatoryNonEmpty,
         category: category,
         subcategory: subcategory,
         title: displayTitle,
diff --git a/src/lib/templates.js b/src/lib/templates.js
index c9f7fb1a..f2ed8b21 100644
--- a/src/lib/templates.js
+++ b/src/lib/templates.js
@@ -10,14 +10,16 @@ let templates = {
   ">
     <div class="${suggestionPrefix}--category-header">{{{category}}}</div>
     <div class="${suggestionPrefix}--wrapper">
-      <div class="${suggestionPrefix}--subcategory-column">
+      <div class="${suggestionPrefix}--subcategory-column {{#isSubcategoryDuplicate}}${suggestionPrefix}--duplicate-content{{/isSubcategoryDuplicate}}">
         <span class="${suggestionPrefix}--subcategory-column-text">{{{subcategory}}}</span>
       </div>
+      {{#isTextOrSubcatoryNonEmpty}}
       <div class="${suggestionPrefix}--content">
-        <div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
-        <div class="${suggestionPrefix}--title">{{{title}}}</div>
-        <div class="${suggestionPrefix}--text">{{{text}}}</div>
+        <div class="${suggestionPrefix}--subcategory-inline {{#isSubcategoryDuplicate}}${suggestionPrefix}--duplicate-content{{/isSubcategoryDuplicate}}">{{{subcategory}}}</div>
+        <div class="${suggestionPrefix}--title {{#isDisplayTitleDuplicate}}${suggestionPrefix}--duplicate-content{{/isDisplayTitleDuplicate}}">{{{title}}}</div>
+        {{#text}}<div class="${suggestionPrefix}--text">{{{text}}}</div>{{/text}}
       </div>
+      {{/isTextOrSubcatoryNonEmpty}}
     </div>
   </div>
   `,
diff --git a/test/DocSearch-test.js b/test/DocSearch-test.js
index 8fdf91dc..54f96169 100644
--- a/test/DocSearch-test.js
+++ b/test/DocSearch-test.js
@@ -159,7 +159,7 @@ describe('DocSearch', () => {
       let options = {
         ...defaultOptions,
         algoliaOptions: {anOption: 42},
-        autocompleteOptions: 'autocompleteOptions'
+        autocompleteOptions: {anOption: 44}
       };
 
       // When
@@ -168,7 +168,7 @@ describe('DocSearch', () => {
       // Then
       expect(typeof actual.algoliaOptions).toEqual('object');
       expect(actual.algoliaOptions.anOption).toEqual(42);
-      expect(actual.autocompleteOptions).toEqual('autocompleteOptions');
+      expect(actual.autocompleteOptions).toEqual({debug: false,   anOption: 44});
     });
     it('should instantiate algoliasearch with the correct values', () => {
       // Given
@@ -195,7 +195,7 @@ describe('DocSearch', () => {
       // Given
       let options = {
         ...defaultOptions,
-        autocompleteOptions: 'bar'
+        autocompleteOptions: {anOption: '44'}
       };
       let $input = $('<input name="foo" />');
       DocSearch.getInputFromSelector.returns($input);
@@ -205,7 +205,7 @@ describe('DocSearch', () => {
 
       // Then
       expect(AutoComplete.calledOnce).toBe(true);
-      expect(AutoComplete.calledWith($input, 'bar')).toBe(true);
+      expect(AutoComplete.calledWith($input, {anOption: '44', debug: false})).toBe(true);
     });
     it('should listen to the selected and shown event of autocomplete', () => {
       // Given
@@ -695,8 +695,9 @@ describe('DocSearch', () => {
       // When
       let actual = DocSearch.formatHits(input);
 
+      let separator = '<span class="aa-suggestion-title-separator"> › </span>';
       // Then
-      expect(actual[0].title).toEqual('Geo-search › Foo › Bar › Baz');
+      expect(actual[0].title).toEqual('Geo-search' + separator + 'Foo' + separator + 'Bar' + separator + 'Baz');
     });
     it('should concatenate highlighted elements', () => {
       // Given
@@ -736,11 +737,10 @@ describe('DocSearch', () => {
       // When
       let actual = DocSearch.formatHits(input);
 
+      let separator = '<span class="aa-suggestion-title-separator"> › </span>';
       // Then
-      let expected = '<mark>Geo-search</mark>' +
-        ' › <mark>Foo</mark>' +
-        ' › <mark>Bar</mark>' +
-        ' › <mark>Baz</mark>';
+      let expected = '<mark>Geo-search</mark>' + separator + '<mark>Foo</mark>' + separator +
+          '<mark>Bar</mark>' + separator + '<mark>Baz</mark>';
       expect(actual[0].title).toEqual(expected);
     });
     it('should add ellipsis to content', () => {