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

@@ -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
   }
 });
 

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
   }
 });
 

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,

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>
   `,

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', () => {