feat(slider): second iteration

+ using `algolia/react-nouislider` was able to externalize it even
being written in ES6 (just use babel-cli)
+ moved lib/widget-utils to lib/utils because used in both widgets and
components

Author: vvo

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,7 +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/rangeSlider.png
+[rangeSlider]: ./widgets-screenshots/range-slider.png
 
 ### searchBox
 
@@ -353,7 +354,14 @@ search.addWidget(
 #### 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.
+ * You can also provide tooltips: {format: function(formattedValue, rawValue) {return string}} option object
+ * @return {Object}
+ */
 ```
 
 
@@ -367,7 +375,12 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.rangeSlider({
     container: '#price',
-    facetName: '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.js renamed to components/Slider/index.js

@@ -1,6 +1,10 @@
 var React = require('react');
 
-var Nouislider = require('./react-nouislider/');
+var Nouislider = require('react-nouislider');
+
+require('./index.css');
+
+var cssPrefix = 'as-range-slider--';
 
 class Slider extends React.Component {
 
@@ -14,6 +18,10 @@ class Slider extends React.Component {
       <Nouislider
         {...this.props}
         onChange={this.handleChange.bind(this)}
+        animate={false}
+        behaviour={'snap'}
+        connect
+        cssPrefix={cssPrefix}
       />
     );
   }
@@ -23,7 +31,11 @@ Slider.propTypes = {
   onSlide: React.PropTypes.func,
   onChange: React.PropTypes.func,
   range: React.PropTypes.object.isRequired,
-  start: React.PropTypes.arrayOf(React.PropTypes.number).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}} />;
   }

components/react-nouislider/.eslintrc

@@ -96,7 +96,12 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.rangeSlider({
     container: '#price',
-    facetName: 'price'
+    facetName: 'price',
+    tooltips: {
+      format: function(formattedValue) {
+        return '$' + formattedValue;
+      }
+    }
   })
 );