feat(DOM): split simple and collumns template

algolia · Jun 21, 2016 · 2a3b7eb · 2a3b7eb
1 parent fcf54b3
commit 2a3b7eb
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
@@ -189,23 +189,25 @@ 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('<span class="aa-suggestion-title-separator"> › </span>');
-      let isDisplayTitleDuplicate = displayTitle == subcategory;
       let text = utils.getSnippetedValue(hit, 'content');
       let isTextOrSubcatoryNonEmpty = (subcategory && subcategory != "") || (displayTitle && displayTitle != "");
+      let isLvl2 = displayTitle && displayTitle != '' && displayTitle != subcategory;
+      let isLvl1 = !isLvl2 && (subcategory && subcategory != '' && subcategory != category);
+      let isLvl0 = !isLvl1 && !isLvl2;
 
       return {
+        isLvl0: isLvl0,
+        isLvl1: isLvl1,
+        isLvl2: isLvl2,
         isCategoryHeader: hit.isCategoryHeader,
         isSubCategoryHeader: hit.isSubCategoryHeader,
-        isSubcategoryDuplicate: isSubcategoryDuplicate,
-        isDisplayTitleDuplicate: isDisplayTitleDuplicate,
         isTextOrSubcatoryNonEmpty: isTextOrSubcatoryNonEmpty,
         category: category,
         subcategory: subcategory,
@@ -238,10 +240,10 @@ class DocSearch {
   }
 
   static getSuggestionTemplate(isSimpleLayout) {
-    const template = Hogan.compile(templates.suggestion);
+    var stringTemplate = isSimpleLayout ? templates.suggestionSimple : templates.suggestion
+    const template = Hogan.compile(stringTemplate);
     return (suggestion) => {
-      isSimpleLayout = isSimpleLayout || false;
-      return template.render({isSimpleLayout, ...suggestion});
+      return template.render(suggestion);
     };
   }
 

diff --git a/src/lib/templates.js b/src/lib/templates.js
@@ -7,29 +7,63 @@ let templates = {
   <div class="${suggestionPrefix}
     {{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
     {{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
-    {{#isSimpleLayout}}suggestion-layout-simple{{/isSimpleLayout}}
   ">
     
     <div class="${suggestionPrefix}--category-header">
         <span class="${suggestionPrefix}--category-header-lvl0">{{{category}}}</span>
-        {{#isSimpleLayout}}
-            <span class="${suggestionPrefix}--category-header-lvl1">{{{subcategory}}}</span>
-        {{/isSimpleLayout}}
     </div>
     <div class="${suggestionPrefix}--wrapper">
-      <div class="${suggestionPrefix}--subcategory-column {{#isSubcategoryDuplicate}}${suggestionPrefix}--duplicate-content{{/isSubcategoryDuplicate}}">
+      <div class="${suggestionPrefix}--subcategory-column">
         <span class="${suggestionPrefix}--subcategory-column-text">{{{subcategory}}}</span>
       </div>
       {{#isTextOrSubcatoryNonEmpty}}
       <div class="${suggestionPrefix}--content">
-        <div class="${suggestionPrefix}--subcategory-inline {{#isSubcategoryDuplicate}}${suggestionPrefix}--duplicate-content{{/isSubcategoryDuplicate}}">{{{subcategory}}}</div>
-        <div class="${suggestionPrefix}--title {{#isDisplayTitleDuplicate}}${suggestionPrefix}--duplicate-content{{/isDisplayTitleDuplicate}}">{{{title}}}</div>
+        <div class="${suggestionPrefix}--subcategory-inline">{{{subcategory}}}</div>
+        <div class="${suggestionPrefix}--title">{{{title}}}</div>
         {{#text}}<div class="${suggestionPrefix}--text">{{{text}}}</div>{{/text}}
       </div>
       {{/isTextOrSubcatoryNonEmpty}}
     </div>
   </div>
   `,
+  suggestionSimple: `
+  <div class="${suggestionPrefix}
+    {{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
+    {{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
+    suggestion-layout-simple
+  ">
+    
+    <div class="${suggestionPrefix}--category-header">
+        {{^isLvl0}}
+        <span class="${suggestionPrefix}--category-header-lvl0 ${suggestionPrefix}--category-header-item">{{{category}}}</span>
+        {{/isLvl0}}
+        {{^isLvl1}}
+        <span class="${suggestionPrefix}--category-header-lvl1 ${suggestionPrefix}--category-header-item">
+            {{{subcategory}}}
+        </span>
+        {{/isLvl1}}
+        
+        <div class="${suggestionPrefix}--title ${suggestionPrefix}--category-header-item">
+            {{#isLvl2}}
+                {{{title}}}
+            {{/isLvl2}}
+            {{#isLvl1}}
+                {{{subcategory}}}
+            {{/isLvl1}}
+            {{#isLvl0}}
+                {{{category}}}
+            {{/isLvl0}}
+        </div>
+    </div>
+    <div class="${suggestionPrefix}--wrapper">
+      {{#text}}
+      <div class="${suggestionPrefix}--content">
+        <div class="${suggestionPrefix}--text">{{{text}}}</div>
+      </div>
+      {{/text}}
+    </div>
+  </div>
+  `,
   footer: `
     <div class="${footerPrefix}">
       Search by <a class="${footerPrefix}--logo" href="https://www.algolia.com/docsearch">Algolia</a>

diff --git a/test/DocSearch-test.js b/test/DocSearch-test.js
@@ -984,7 +984,7 @@ describe('DocSearch', () => {
 
         // Then
         expect(render.calledOnce).toBe(true);
-        expect(render.args[0][0]).toEqual({'isSimpleLayout': false, 'foo': 'bar'});
+        expect(render.args[0][0]).toEqual({'foo': 'bar'});
       });
     });
   });