Skip to content

Commit

Permalink
feat(v2): modification for v2 (#112)
Browse files Browse the repository at this point in the history
- Add a no result screen. Fixes #92
- Change class prefix. Fixes #102
- Add a transformData option
- Add searchBox option
- Add a layout option
  • Loading branch information
maxiloc authored Jun 14, 2016
1 parent b70cf94 commit f0a7e6b
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 25 deletions.
4 changes: 1 addition & 3 deletions dev/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ docsearch({
apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
indexName: 'react-native',
inputSelector: '#search-input',
autocompleteOptions: {
debug: true
}
debug: true
});

document.getElementById('search-input').focus();
47 changes: 38 additions & 9 deletions src/lib/DocSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,12 @@ class DocSearch {
debug: false,
hint: false,
autoselect: true
}
},
transformData = false,
enhancedSearchInput = false,
layout = 'collumns'
}) {
DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions});
DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions, transformData, enhancedSearchInput, layout});

this.apiKey = apiKey;
this.appId = appId;
Expand All @@ -52,15 +55,25 @@ class DocSearch {
let autocompleteOptionsDebug = autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug: false;
autocompleteOptions.debug = debug || autocompleteOptionsDebug;
this.autocompleteOptions = autocompleteOptions;
this.autocompleteOptions.cssClasses = {
prefix: 'ds'
};

this.isSimpleLayout = (layout === 'simple');

this.client = algoliasearch(this.appId, this.apiKey);
this.client.addAlgoliaAgent('docsearch.js ' + version);

if (enhancedSearchInput) {
DocSearch.injectSearchBox(this.input);
}

this.autocomplete = autocomplete(this.input, autocompleteOptions, [{
source: this.getAutocompleteSource(),
source: this.getAutocompleteSource(transformData),
templates: {
suggestion: DocSearch.getSuggestionTemplate(),
footer: templates.footer
suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
footer: templates.footer,
empty: DocSearch.getEmptyTemplate()
}
}]);
this.autocomplete.on(
Expand Down Expand Up @@ -89,6 +102,11 @@ class DocSearch {
}
}

static injectSearchBox(input) {
input.before(templates.searchBox);
input.remove();
}

/**
* Returns the matching input from a CSS selector, null if none matches
* @function getInputFromSelector
Expand All @@ -108,14 +126,18 @@ class DocSearch {
* @returns {function} Method to be passed as the `source` option of
* autocomplete
*/
getAutocompleteSource() {
getAutocompleteSource(transformData) {
return (query, callback) => {
this.client.search([{
indexName: this.indexName,
query: query,
params: this.algoliaOptions
}]).then((data) => {
callback(DocSearch.formatHits(data.results[0].hits));
let hits = data.results[0].hits;
if (transformData) {
hits = transformData(hits) || hits;
}
callback(DocSearch.formatHits(hits));
});
};
}
Expand Down Expand Up @@ -187,10 +209,17 @@ class DocSearch {
return null;
}

static getSuggestionTemplate() {
static getEmptyTemplate() {
return (args) => {
return Hogan.compile(templates.empty).render(args);
};
}

static getSuggestionTemplate(isSimpleLayout) {
const template = Hogan.compile(templates.suggestion);
return (suggestion) => {
return template.render(suggestion);
isSimpleLayout = isSimpleLayout || false;
return template.render({isSimpleLayout, ...suggestion});
};
}

Expand Down
50 changes: 50 additions & 0 deletions src/lib/templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ let templates = {
<div class="${suggestionPrefix}
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
{{#isSimpleLayout}}suggestion-layout-simple{{/isSimpleLayout}}
">
<div class="${suggestionPrefix}--category-header">{{{category}}}</div>
<div class="${suggestionPrefix}--wrapper">
Expand All @@ -27,6 +28,55 @@ let templates = {
<div class="${footerPrefix}">
Search by <a class="${footerPrefix}--logo" href="https://www.algolia.com/docsearch">Algolia</a>
</div>
`,
empty: `
<div class="${suggestionPrefix}">
<div class="${suggestionPrefix}--wrapper">
<div class="${suggestionPrefix}--content ${suggestionPrefix}--no-result">
<div class="${suggestionPrefix}--title">
<div class="${suggestionPrefix}--text">
No results found for query <b>{{{query}}}</b>
</div>
</div>
</div>
</div>
</div>
`,
searchBox: `
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-18" viewBox="0 0 40 40">
<path d="M30.776 27.146l-1.32-1.32-3.63 3.632 1.32 1.32 3.63-3.632zm1.368 1.368l6.035 6.035c.39.39.4 1.017.008 1.408l-2.23 2.23c-.387.387-1.015.387-1.41-.008l-6.035-6.035 3.63-3.63zm-8.11 1.392c-2.356 1.363-5.092 2.143-8.01 2.143C7.174 32.05 0 24.873 0 16.023S7.174 0 16.024 0c8.85 0 16.025 7.174 16.025 16.024 0 2.918-.78 5.654-2.144 8.01l8.96 8.962c1.175 1.174 1.184 3.07.008 4.246l-1.632 1.632c-1.17 1.17-3.067 1.173-4.247-.007l-8.96-8.96zm-8.01.54c7.965 0 14.422-6.457 14.422-14.422 0-7.965-6.457-14.422-14.422-14.422-7.965 0-14.422 6.457-14.422 14.422 0 7.965 6.457 14.422 14.422 14.422zm0-2.403c6.638 0 12.018-5.38 12.018-12.02 0-6.636-5.38-12.017-12.018-12.017-6.637 0-12.018 5.38-12.018 12.018 0 6.638 5.38 12.02 12.018 12.02zm0-1.402c5.863 0 10.616-4.752 10.616-10.616 0-5.863-4.753-10.616-10.616-10.616-5.863 0-10.616 4.753-10.616 10.616 0 5.864 4.753 10.617 10.616 10.617z"
fill-rule="evenodd" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-5" viewBox="0 0 20 20">
<path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm1.35-10.123l3.567 3.568-1.225 1.226-3.57-3.568-3.567 3.57-1.226-1.227 3.568-3.568-3.57-3.57 1.227-1.224 3.568 3.568 3.57-3.567 1.224 1.225-3.568 3.57zM10 18.272c4.568 0 8.272-3.704 8.272-8.272S14.568 1.728 10 1.728 1.728 5.432 1.728 10 5.432 18.272 10 18.272z"
fill-rule="evenodd" />
</symbol>
</svg>
<form action="void(0);" novalidate="novalidate" class="searchbox sbx-custom">
<div role="search" class="sbx-custom__wrapper">
<input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
<button type="submit" title="Submit your search query." class="sbx-custom__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-custom__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-5"></use>
</svg>
</button>
</div>
</form>
<!--Js: focus search input after reset-->
<script type="text/javascript">
//<![CDATA[
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
this.parentNode.querySelector('input').focus();
});
//]]>
</script>
`
};

Expand Down
18 changes: 9 additions & 9 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// - Adding a second colum to let the content breath if enough room available

// Main autocomplete wrapper
.aa-dropdown-menu {
.ds-dropdown-menu {
background-color: #FFF;
border: 1px solid #333;
border-radius: 4px;
Expand Down Expand Up @@ -56,10 +56,10 @@
}

// Selected suggestion
.aa-cursor .algolia-docsearch-suggestion--content {
.ds-cursor .algolia-docsearch-suggestion--content {
color: $color-selected-text;
}
.aa-cursor .algolia-docsearch-suggestion {
.ds-cursor .algolia-docsearch-suggestion {
background: $color-selected-background;
}

Expand All @@ -79,10 +79,10 @@
border-top: 1px solid lighten($color-border, 60%);
}

.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
border-top: 0;
}
.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
border-top: 0;
}

.algolia-docsearch-suggestion--subcategory-inline {
display: inline-block;
Expand Down Expand Up @@ -121,7 +121,7 @@
// BREAKPOINT 1:
// Screen is big enough to display the text snippets
@media (min-width: $breakpoint-medium) {
.aa-dropdown-menu {
.ds-dropdown-menu {
min-width: $dropdown-min-width-medium;
}
.algolia-docsearch-suggestion--text {
Expand All @@ -134,7 +134,7 @@
// BREAKPOINT 2:
// Screen is big enough to display results in two columns
@media (min-width: $breakpoint-large) {
.aa-dropdown-menu {
.ds-dropdown-menu {
min-width: $dropdown-min-width-large;
}
.algolia-docsearch-suggestion {
Expand Down
8 changes: 4 additions & 4 deletions test/DocSearch-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ describe('DocSearch', () => {
// Then
expect(typeof actual.algoliaOptions).toEqual('object');
expect(actual.algoliaOptions.anOption).toEqual(42);
expect(actual.autocompleteOptions).toEqual({debug: false, anOption: 44});
expect(actual.autocompleteOptions).toEqual({debug: false, "cssClasses": { "prefix": "ds" }, anOption: 44});
});
it('should instantiate algoliasearch with the correct values', () => {
// Given
Expand Down Expand Up @@ -205,7 +205,7 @@ describe('DocSearch', () => {

// Then
expect(AutoComplete.calledOnce).toBe(true);
expect(AutoComplete.calledWith($input, {anOption: '44', debug: false})).toBe(true);
expect(AutoComplete.calledWith($input, {anOption: '44', "cssClasses": { "prefix": "ds" }, debug: false})).toBe(true);
});
it('should listen to the selected and shown event of autocomplete', () => {
// Given
Expand Down Expand Up @@ -980,11 +980,11 @@ describe('DocSearch', () => {
let actual = DocSearch.getSuggestionTemplate();

// When
actual('foo');
actual({'foo': 'bar'});

// Then
expect(render.calledOnce).toBe(true);
expect(render.calledWith('foo')).toBe(true);
expect(render.args[0][0]).toEqual({'isSimpleLayout': false, 'foo': 'bar'});
});
});
});
Expand Down

0 comments on commit f0a7e6b

Please sign in to comment.