From 9a930e74da862944e4e32935e208fd7fec506e9c Mon Sep 17 00:00:00 2001 From: vvo Date: Thu, 25 Feb 2016 17:55:47 +0100 Subject: [PATCH] feat(instantsearch): allow overriding the helper.search function add a new option to the instantsearch: searchFunction. It allows user to override the default call to helper.search() by anything they want. With this, they will be able to implement: - do not search at first render - do not search when query < 3 chars - any conditional we cannot think of --- dev/app.js | 9 ++-- dev/index.html | 58 +++++++++++++------------ dev/style.css | 8 +--- src/lib/InstantSearch.js | 28 ++++++++++-- src/lib/__tests__/InstantSearch-test.js | 21 ++++++++- 5 files changed, 81 insertions(+), 43 deletions(-) diff --git a/dev/app.js b/dev/app.js index a45e50d527..04c834c0d6 100644 --- a/dev/app.js +++ b/dev/app.js @@ -302,10 +302,6 @@ search.addWidget( }) ); -search.once('render', function() { - document.querySelector('.search').className = 'row search search--visible'; -}); - search.addWidget( instantsearch.widgets.priceRanges({ container: '#price-ranges', @@ -338,5 +334,10 @@ search.addWidget( }) ); +search.once('render', function() { + [...document.querySelectorAll('.smooth-search--hidden')] + .forEach(element => element.classList.remove('smooth-search--hidden')); +}); + search.start(); diff --git a/dev/index.html b/dev/index.html index d48b10774c..78cb7079e2 100644 --- a/dev/index.html +++ b/dev/index.html @@ -19,8 +19,8 @@

Instant search demo using instantsearch.js

-
-
+
+
@@ -38,40 +38,42 @@

Instant search demo using instantsearch.js

-
-
-
-
-
-
-
- - +
+
+
+
+
+
+
+
+ + +
-
-
-
-
- - +
+
+
+ + +
-
-
-
-
- - +
+
+
+ + +
+

Results overview

+
+

Results

+
+
-

Results overview

-
-

Results

-
-
diff --git a/dev/style.css b/dev/style.css index bb7dafd1b5..e2cc1ca363 100644 --- a/dev/style.css +++ b/dev/style.css @@ -8,18 +8,14 @@ body { padding: 2em 0; } -.search { +.smooth-search { transition: opacity 200ms; } -.search--hidden { +.smooth-search--hidden { opacity: 0; } -.search--visible { - -} - /* Hits widget */ .hit + .hit { margin-top: 1em; diff --git a/src/lib/InstantSearch.js b/src/lib/InstantSearch.js index 8757827443..65704835e8 100644 --- a/src/lib/InstantSearch.js +++ b/src/lib/InstantSearch.js @@ -4,11 +4,13 @@ import algoliasearchHelper from 'algoliasearch-helper'; import forEach from 'lodash/collection/forEach'; import merge from 'lodash/object/merge'; import union from 'lodash/array/union'; +import clone from 'lodash/lang/clone'; import {EventEmitter} from 'events'; import urlSyncWidget from './url-sync.js'; import version from './version.js'; +import helpers from './helpers.js'; function defaultCreateURL() { return '#'; } @@ -33,6 +35,9 @@ function defaultCreateURL() { return '#'; } * history API. * @param {number} [options.urlSync.threshold] Time in ms after which a new * state is created in the browser history. The default value is 700. + * @param {function} [options.searchFunction] A hook that will be called each time a search needs to be done, with the + * helper as a parameter. It's your responsibility to call helper.search(). This option allows you to avoid doing + * searches at page load for example. * @return {Object} the instantsearch instance */ class InstantSearch extends EventEmitter { @@ -42,7 +47,8 @@ class InstantSearch extends EventEmitter { indexName = null, numberLocale, searchParameters = {}, - urlSync = null + urlSync = null, + searchFunction }) { super(); if (appId === null || apiKey === null || indexName === null) { @@ -64,9 +70,14 @@ Usage: instantsearch({ this.searchParameters = {...searchParameters, index: indexName}; this.widgets = []; this.templatesConfig = { - helpers: require('./helpers.js')({numberLocale}), + helpers: helpers({numberLocale}), compileOptions: {} }; + + if (searchFunction) { + this._searchFunction = searchFunction; + } + this.urlSync = urlSync === true ? {} : urlSync; } @@ -109,14 +120,25 @@ Usage: instantsearch({ this.searchParameters ); + if (this._searchFunction) { + this._originalHelperSearch = helper.search.bind(helper); + helper.search = this._wrappedSearch.bind(this); + } + this.helper = helper; this._init(helper.state, helper); helper.on('result', this._render.bind(this, helper)); - helper.search(); } + _wrappedSearch() { + let helper = clone(this.helper); + helper.search = this._originalHelperSearch; + this._searchFunction(helper); + return; + } + createURL(params) { if (!this._createURL) { throw new Error('You need to call start() before calling createURL()'); diff --git a/src/lib/__tests__/InstantSearch-test.js b/src/lib/__tests__/InstantSearch-test.js index 5f79ec0701..adc36b49b9 100644 --- a/src/lib/__tests__/InstantSearch-test.js +++ b/src/lib/__tests__/InstantSearch-test.js @@ -22,12 +22,16 @@ describe('InstantSearch lifecycle', () => { let indexName; let searchParameters; let search; + let helperSearchSpy; beforeEach(() => { client = {algolia: 'client', addAlgoliaAgent: () => {}}; helper = new EventEmitter(); - helper.search = sinon.spy(); + // when using searchFunction, we lose the reference to + // the original helper.search + helperSearchSpy = sinon.spy(); + helper.search = helperSearchSpy; helper.getState = sinon.stub().returns({}); helper.state = { setQueryParameters: function(params) { return new SearchParameters(params); } @@ -88,6 +92,19 @@ describe('InstantSearch lifecycle', () => { }); }); + it('calls the provided searchFunction when used', () => { + let searchSpy = sinon.spy(); + search = new InstantSearch({ + appId: appId, + apiKey: apiKey, + indexName: indexName, + searchFunction: searchSpy + }); + search.start(); + expect(searchSpy.calledOnce).toBe(true); + expect(helperSearchSpy.calledOnce).toBe(false); + }); + context('when adding a widget', () => { let widget; @@ -129,7 +146,7 @@ describe('InstantSearch lifecycle', () => { }); it('calls helper.search()', () => { - expect(helper.search.calledOnce).toBe(true); + expect(helperSearchSpy.calledOnce).toBe(true); }); it('calls widget.init(helper.state, helper, templatesConfig)', () => {