nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat(DOM): split simple and collumns template

Browse source
This commit is contained in:
Maxime Locqueville 2016-06-21 23:25:23 +02:00
parent fcf54b337a
commit 2a3b7ebd59
3 changed files with 51 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/DocSearch.js
View file

@ -189,7 +189,6 @@ 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'),
@ -197,15 +196,18 @@ class DocSearch {
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);
};
}

48
src/lib/templates.js
View file

@ -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>

2
test/DocSearch-test.js
View file

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