Merge pull request #86 from algolia/feat/slider

FIX #11 feat: Slider widget

Author: bobylito

README.md

@@ -20,6 +20,7 @@ API is unstable. We welcome any idea.
   - [toggle](#toggle)
   - [refinementList](#refinementlist)
   - [menu](#menu)
+  - [rangeSlider](#rangeslider)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -99,6 +100,7 @@ npm run test:coverage
 [toggle]: ./widgets-screenshots/toggle.png
 [refinementList]: ./widgets-screenshots/refinement-list.png
 [menu]: ./widgets-screenshots/menu.png
+[rangeSlider]: ./widgets-screenshots/range-slider.png
 
 ### searchBox
 
@@ -344,3 +346,43 @@ search.addWidget(
   })
 );
 ```
+
+### rangeSlider
+
+![Example of the rangeSlider widget][rangeSlider]
+
+#### API
+
+```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
+ * @param  {Boolean|Object} [options.tooltips=true] Should we show tooltips or not.
+ * The default tooltip will show the formatted corresponding value without any other token.
+ * You can also provide
+ * tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}}
+ * So that you can format the tooltip display value as you want
+ * @return {Object}
+ */
+```
+
+#### Usage
+
+```html
+<div id="price"></div>
+```
+
+```js
+search.addWidget(
+  instantsearch.widgets.rangeSlider({
+    container: '#price',
+    facetName: 'price',
+    tooltips: {
+      format: function(formattedValue) {
+        return '$' + formattedValue;
+      }
+    }
+  })
+);
+```

components/Slider/index.css

@@ -0,0 +1,102 @@
+.as-range-slider--target,
+.as-range-slider--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;
+}
+.as-range-slider--target {
+  position: relative;
+  direction: ltr;
+  padding: 0 15px;
+  border-radius: 5px;
+  background: #f3f4f7;
+  height: 18px;
+}
+.as-range-slider--base {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; /* Fix 401 */
+}
+.as-range-slider--origin {
+  position: absolute;
+  right: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.as-range-slider--state-tap .as-range-slider--origin {
+  -webkit-transition: left 0.3s, top 0.3s;
+  transition: left 0.3s, top 0.3s;
+}
+.as-range-slider--state-drag * {
+  cursor: inherit !important;
+}
+
+/* Painting and performance;
+ * Browsers can paint handles in their own layer.
+ */
+.as-range-slider--base {
+  -webkit-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
+.as-range-slider--connect {
+  background: #46aeda;
+  -webkit-transition: background 450ms;
+  transition: background 450ms;
+}
+
+.as-range-slider--background {
+  background: #f3f4f7;
+}
+
+.as-range-slider--handle {
+  width: 1px;
+  height: 28px;
+  position: relative;
+  z-index: 1;
+  background: #8191b1;
+  cursor: pointer;
+}
+
+.as-range-slider--handle-lower {
+  bottom: 10px;
+}
+
+.as-range-slider--active {
+  background: #1f3b5d;
+}
+
+.as-range-slider--tooltip {
+  position: absolute;
+  color: #1f3b5d;
+  border: 1px solid #8191b1;
+  background: #ffffff;
+  padding: 2px 3px;
+}
+
+.as-range-slider--handle:hover {
+  background: #1f3b5d;
+}
+
+.as-range-slider--active .as-range-slider--tooltip, .as-range-slider--handle:hover .as-range-slider--tooltip {
+  background: #46aeda;
+  color: #ffffff;
+  border-color: #1f3b5d;
+}
+
+.as-range-slider--handle-lower .as-range-slider--tooltip {
+  border-radius: 5px 5px 5px 0;
+  top: -24px;
+}
+
+.as-range-slider--handle-upper .as-range-slider--tooltip {
+  bottom: -24px;
+  border-radius: 5px 0 5px 5px;
+  right: 0;
+}

components/Slider/index.js

@@ -0,0 +1,41 @@
+var React = require('react');
+
+var Nouislider = require('react-nouislider');
+
+require('style?prepend!raw!./index.css');
+
+var cssPrefix = 'as-range-slider--';
+
+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)}
+        animate={false}
+        behaviour={'snap'}
+        connect
+        cssPrefix={cssPrefix}
+      />
+    );
+  }
+}
+
+Slider.propTypes = {
+  onSlide: React.PropTypes.func,
+  onChange: React.PropTypes.func,
+  range: React.PropTypes.object.isRequired,
+  start: React.PropTypes.arrayOf(React.PropTypes.number).isRequired,
+  tooltips: React.PropTypes.oneOfType([
+    React.PropTypes.bool,
+    React.PropTypes.object
+  ])
+};
+
+module.exports = Slider;

components/Template.js

@@ -1,15 +1,10 @@
-var hogan = require('hogan.js');
 var React = require('react');
 
+var renderTemplate = require('../lib/utils').renderTemplate;
+
 class Template {
   render() {
-    var content;
-
-    if (typeof this.props.template === 'string') {
-      content = hogan.compile(this.props.template).render(this.props.data);
-    } else {
-      content = this.props.template(this.props.data);
-    }
+    var content = renderTemplate(this.props.template, this.props.data);
 
     return <div dangerouslySetInnerHTML={{__html: content}} />;
   }

example/app.js

@@ -1,5 +1,3 @@
-require('./style.css');
-
 var instantsearch = require('../');
 
 var search = instantsearch({
@@ -93,4 +91,16 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.rangeSlider({
+    container: '#price',
+    facetName: 'price',
+    tooltips: {
+      format: function(formattedValue) {
+        return '$' + formattedValue;
+      }
+    }
+  })
+);
+
 search.start();

example/index.html

@@ -5,6 +5,7 @@
   <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">
+  <link rel="stylesheet" href="./style.css">
 </head>
 <body>
   <div class="container">
@@ -34,14 +35,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">

example/style.css

@@ -35,3 +35,7 @@ body {
 .hit {
   height: 125px;
 }
+
+#price {
+  padding: 30px 0;
+}

index.js

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

lib/utils.js

@@ -0,0 +1,28 @@
+var isString = require('lodash/lang/isString');
+
+function getContainerNode(value) {
+  if (isString(value)) {
+    return document.querySelector(value);
+  }
+  return value;
+}
+
+function renderTemplate(template, data) {
+  var hogan = require('hogan.js');
+  var content;
+
+  if (typeof template === 'string') {
+    content = hogan.compile(template).render(data);
+  } else if (typeof template === 'function') {
+    content = template(data);
+  } else {
+    throw new Error('Template must be `string` or `function`');
+  }
+
+  return content;
+}
+
+module.exports = {
+  getContainerNode: getContainerNode,
+  renderTemplate: renderTemplate
+};

lib/widget-utils.js

@@ -21,12 +21,12 @@
   "browser": {
     "lodash": "lodash-compat"
   },
+  "repository": "algolia/intantsearch.js",
   "devDependencies": {
     "babel": "5.8.23",
     "babel-eslint": "4.1.1",
     "babel-loader": "5.3.2",
     "babel-tape-runner": "1.2.0",
-    "css-loader": "0.16.0",
     "doctoc": "0.15.0",
     "eslint": "1.4.1",
     "eslint-config-airbnb": "0.0.8",
@@ -37,8 +37,9 @@
     "onchange": "2.0.0",
     "pretty-bytes": "2.0.1",
     "proxyquire": "1.7.1",
+    "raw-loader": "0.5.1",
     "sinon": "1.16.1",
-    "style-loader": "0.12.3",
+    "style-loader": "algolia/style-loader#3ec5a83b23607339e25fe65d51ae823ba9a8e7df",
     "tap-spec": "4.1.0",
     "tape": "4.2.0",
     "uglifyjs": "2.4.10",
@@ -47,12 +48,12 @@
   },
   "dependencies": {
     "algoliasearch": "3.7.8",
-    "algoliasearch-helper": "2.3.0",
+    "algoliasearch-helper": "2.3.5",
     "classnames": "2.1.3",
     "hogan.js": "3.0.2",
     "lodash": "3.10.1",
-    "raw-loader": "0.5.1",
     "react": "0.13.3",
+    "react-nouislider": "1.2.0",
     "to-factory": "1.0.0"
   },
   "license": "MIT"

package.json

@@ -10,11 +10,10 @@ module.exports = {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw'
-    }, {
-      test: /\.css$/, loader: 'style-loader!css-loader'
     }]
   },
   devServer: {
-    contentBase: 'example/'
+    contentBase: 'example/',
+    host: '0.0.0.0'
   }
 };

webpack.example.config.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var utils = require('../lib/widget-utils.js');
+var utils = require('../lib/utils.js');
 
 function hits({container = null, templates = {}, hitsPerPage = 20}) {
   var Hits = require('../components/Hits');