Skip to content

Commit 50fc4ce

Browse files
Alexandre Stanislawskivvo
Alexandre Stanislawski
authored and
vvo
committed
feat(urlSync): add urlSync widget
1 parent 0c70743 commit 50fc4ce

File tree

13 files changed

+404
-85
lines changed

13 files changed

+404
-85
lines changed

‎README.md

+36
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ npm run test:watch # developer mode, test only
184184
[refinementList]: ./widgets-screenshots/refinement-list.png
185185
[menu]: ./widgets-screenshots/menu.png
186186
[rangeSlider]: ./widgets-screenshots/range-slider.png
187+
[urlSync]: ./widgets-screenshots/url-sync.gif
187188

188189
### searchBox
189190

@@ -489,6 +490,41 @@ search.addWidget(
489490
);
490491
```
491492

493+
### URL Synchronisation
494+
495+
![Example of url sync][urlSync]
496+
497+
#### API
498+
499+
```js
500+
/**
501+
* Instanciate a url sync widget. This widget let you synchronize the search
502+
* parameters with the URL. It can operate with legacy API and hash or it can use
503+
* the modern history API. By default, it will use the modern API, but if you are
504+
* looking for compatibility with IE8 and IE9, then you should set 'useHash' to
505+
* true.
506+
* @param {number} threshold time in ms after which a new state is created in the browser
507+
* history. The default value is 700.
508+
* @param {string[]} trackedParameters parameters that will be synchronized in the
509+
* URL. By default, it will track the query, all the refinable attribute (facets and numeric
510+
* filters), the index and the page.
511+
* @param {boolean} useHash if set to true, the url will be hash based. Otherwise,
512+
* it'll use the query parameters using the modern history API.
513+
*/
514+
```
515+
516+
#### Usage
517+
518+
```js
519+
search.addWidget(
520+
instantsearch.widgets.urlSync({
521+
/* useHash: true,
522+
threshold: 600,
523+
trackedParameters: ['query', 'page', 'attribute:*'] */
524+
})
525+
);
526+
```
527+
492528
## Browser support
493529

494530
We natively support IE10+ and all other modern browsers without any dependency need

‎components/RefinementList.js

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ class RefinementList extends React.Component {
1919
// So the code here checks if the click was done on or in a LABEL. If this LABEL
2020
// has a checkbox inside, we ignore the first click event because we will get another one.
2121
handleClick(value, e) {
22+
if (e.target.tagName === 'A' && e.target.href) {
23+
e.preventDefault();
24+
}
25+
2226
if (e.target.tagName === 'INPUT') {
2327
this.refine(value);
2428
return;

‎components/SearchBox.js

+27-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,23 @@ var PoweredBy = require('./PoweredBy');
33
var bem = require('./BemHelper')('as-search-box');
44
var cx = require('classnames');
55

6-
class SearchBox {
6+
class SearchBox extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
value: props.value
11+
};
12+
}
13+
14+
componentWillReceiveProps(newProps) {
15+
this.setState({value: newProps.value});
16+
}
17+
718
handleChange(e) {
8-
this.props.setQuery(e.target.value);
19+
var newValue = e.target.value;
20+
this.props.setQuery(newValue);
921
this.props.search();
22+
this.setState({value: newValue});
1023
}
1124

1225
render() {
@@ -22,13 +35,21 @@ class SearchBox {
2235
autoFocus="autofocus"
2336
onChange={this.handleChange.bind(this)}
2437
role="textbox"
38+
onBlur={this.props.onBlur}
39+
onFocus={this.props.onFocus}
40+
value={this.state.value}
2541
/>
2642
<PoweredBy display={this.props.poweredBy} />
2743
</div>
2844
);
2945
}
3046
}
3147

48+
SearchBox.defaultProps = {
49+
onBlur: function() {},
50+
onFocus: function() {}
51+
};
52+
3253
SearchBox.propTypes = {
3354
placeholder: React.PropTypes.string,
3455
inputClass: React.PropTypes.oneOfType([
@@ -37,7 +58,10 @@ SearchBox.propTypes = {
3758
]),
3859
poweredBy: React.PropTypes.bool,
3960
setQuery: React.PropTypes.func,
40-
search: React.PropTypes.func
61+
search: React.PropTypes.func,
62+
onFocus: React.PropTypes.func,
63+
onBlur: React.PropTypes.func,
64+
value: React.PropTypes.string
4165
};
4266

4367
module.exports = SearchBox;

‎example/app.js

+6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ var search = instantsearch({
77
indexName: 'instant_search'
88
});
99

10+
search.addWidget(
11+
instantsearch.widgets.urlSync({
12+
useHash: true
13+
})
14+
);
15+
1016
search.addWidget(
1117
instantsearch.widgets.searchBox({
1218
container: '#search-box',

‎example/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
56
<title>Instant search demo built with instantsearch.js</title>
67
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
78
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">

‎index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ instantsearch.widgets = {
1414
searchBox: require('./widgets/search-box'),
1515
rangeSlider: require('./widgets/range-slider'),
1616
stats: require('./widgets/stats'),
17-
toggle: require('./widgets/toggle')
17+
toggle: require('./widgets/toggle'),
18+
urlSync: require('./widgets/url-sync')
1819
};
1920

2021
instantsearch.version = require('./lib/version.js');

‎lib/InstantSearch.js

+18-11
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,35 @@ Usage: instantsearch({
3838
}
3939

4040
addWidget(widgetDefinition) {
41-
// Get the helper configuration from the widget
42-
if (widgetDefinition.getConfiguration) {
43-
var partialConfiguration = widgetDefinition.getConfiguration(this.searchParameters);
44-
this.searchParameters = merge(
41+
// Add the widget to the list of widget
42+
this.widgets.push(widgetDefinition);
43+
}
44+
45+
start() {
46+
this.searchParameters = this.widgets.sort(function initLastSort(a, b) {
47+
// Widgets with the __initLast tag should provide configuration last
48+
if (a.__initLast === b.__initLast) return 0;
49+
return a.__initLast ? 1 : -1;
50+
}).reduce(function(configuration, widgetDefinition) {
51+
if (!widgetDefinition.getConfiguration) return configuration;
52+
53+
// Update searchParameters with the configuration from the widgets
54+
var partialConfiguration = widgetDefinition.getConfiguration(configuration);
55+
return merge(
4556
{},
46-
this.searchParameters,
57+
configuration,
4758
partialConfiguration,
4859
(a, b) => {
4960
if (Array.isArray(a)) {
5061
return union(a, b);
5162
}
5263
}
5364
);
54-
}
55-
// Add the widget to the list of widget
56-
this.widgets.push(widgetDefinition);
57-
}
65+
}, this.searchParameters);
5866

59-
start() {
6067
var helper = algoliasearchHelper(
6168
this.client,
62-
this.indexName,
69+
this.searchParameters.index || this.indexName,
6370
this.searchParameters
6471
);
6572
this.helper = helper;

0 commit comments

Comments
 (0)