Skip to content

Commit

Permalink
feat(slider): first iteration
Browse files Browse the repository at this point in the history
eyes only, webpack build in error
  • Loading branch information
vvo committed Sep 14, 2015
1 parent cd25b7f commit 229bb02
Show file tree
Hide file tree
Showing 7 changed files with 301 additions and 1 deletion.
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ npm run test:coverage
[toggle]: ./widgets-screenshots/toggle.png
[refinementList]: ./widgets-screenshots/refinement-list.png
[menu]: ./widgets-screenshots/menu.png
[rangeSlider]: ./widgets-screenshots/rangeSlider.png

### searchBox

Expand Down Expand Up @@ -344,3 +345,29 @@ search.addWidget(
})
);
```

### rangeSlider

![Example of the rangeSlider widget][rangeSlider]

#### API

```js

```


#### Usage

```html
<div id="price"></div>
```

```js
search.addWidget(
instantsearch.widgets.rangeSlider({
container: '#price',
facetName: 'price'
})
);
```
29 changes: 29 additions & 0 deletions components/Slider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
var React = require('react');

var Nouislider = require('react-nouislider');

class Slider extends React.Component {

// we are only interested in rawValues
handleChange(formattedValues, handleId, rawValues) {
this.props.onChange(rawValues);
}

render() {
return (
<Nouislider
{...this.props}
onChange={this.handleChange.bind(this)}
/>
);
}
}

Slider.propTypes = {
onSlide: React.PropTypes.func,
onChange: React.PropTypes.func,
range: React.PropTypes.object.isRequired,
start: React.PropTypes.arrayOf(React.PropTypes.number).isRequired
};

module.exports = Slider;
7 changes: 7 additions & 0 deletions example/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,11 @@ search.addWidget(
})
);

search.addWidget(
instantsearch.widgets.rangeSlider({
container: '#price',
facetName: 'price'
})
);

search.start();
174 changes: 173 additions & 1 deletion example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,171 @@
<title>Instant search demo built with instantsearch.js</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>

/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}

/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
left: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}

/* Styling;
*/
.noUi-background {
background: #FAFAFA;
box-shadow: inset 0 1px 1px #f0f0f0;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
}
.noUi-target {
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}

/* Handles and cursors;
*/
.noUi-dragable {
cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
cursor: n-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF,
inset 0 1px 7px #EBEBEB,
0 3px 6px -3px #BBB;
}
.noUi-active {
box-shadow: inset 0 0 1px #FFF,
inset 0 1px 7px #DDD,
0 3px 6px -3px #BBB;
}

/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}

/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-origin,
[disabled] .noUi-handle {
cursor: not-allowed;
}

</style>
</head>
<body>
<div class="container">
Expand Down Expand Up @@ -34,14 +199,21 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
</div>

<div class="panel panel-default">
<div class="panel-heading">Toggle filters</div>
<div class="panel-heading">Shipping</div>
<div class="panel-body">
<ul class="nav nav-stacked">
<li><div id="free_shipping"></div></li>
</ul>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">Price</div>
<div class="panel-body">
<div id="price"></div>
</div>
</div>

</div>
<div class="col-md-9">
<div class="row">
Expand Down
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ instantsearch.widgets = {
refinementList: require('./widgets/refinement-list'),
pagination: require('./widgets/pagination'),
searchBox: require('./widgets/search-box'),
rangeSlider: require('./widgets/range-slider'),
stats: require('./widgets/stats'),
toggle: require('./widgets/toggle')
};
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"lodash": "3.10.1",
"raw-loader": "0.5.1",
"react": "0.13.3",
"react-nouislider": "1.0.0",
"to-factory": "1.0.0"
},
"license": "MIT"
Expand Down
63 changes: 63 additions & 0 deletions widgets/range-slider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
var React = require('react');

var utils = require('../lib/widget-utils.js');

/**
* Instantiate a slider based on a numeric attribute
* @param {String|DOMElement} options.container Valid CSS Selector as a string or DOMElement
* @param {String} options.facetName Name of the attribute for faceting
* @return {Object}
*/
function rangeSlider({
container = null,
facetName = null
}) {
var Slider = require('../components/Slider');

var containerNode = utils.getContainerNode(container);

return {
getConfiguration: () => ({
disjunctiveFacets: [facetName]
}),
_currentValues: {
min: -Infinity,
max: Infinity
},
_refine(helper, stats, newValues) {
var min = helper.state.getNumericRefinement(facetName, '>=');
var max = helper.state.getNumericRefinement(facetName, '<=');

this._currentValues = {
min: Math.max(min && min.length && min[0] || 0, stats.min),
max: Math.min(max && max.length && max[0] || Infinity, stats.max)
};

if (this._currentValues.min !== newValues[0] || this._currentValues.max !== newValues[1]) {
this._currentValues = {
min: newValues[0],
max: newValues[1]
};

helper.clearRefinements(facetName);
helper.addNumericRefinement(facetName, '>=', this._currentValues.min);
helper.addNumericRefinement(facetName, '<=', this._currentValues.max);
helper.search();
}
},
render(results, state, helper) {
var stats = results.getFacetStats(facetName);

React.render(
<Slider
start={[this._currentValues.min, this._currentValues.max]}
range={{min: stats.min, max: stats.max}}
onChange={this._refine.bind(this, helper, stats)}
/>,
containerNode
);
}
};
}

module.exports = rangeSlider;

0 comments on commit 229bb02

Please sign in to comment.