Various fixes

History.md

@@ -1,4 +1,11 @@
 
+0.0.4 / 2014-07-02
+==================
+
+ * allow tapping anywhere on the slider, not just the handle
+ * fix empty strings when the element has no min/max set
+ * use the build files in example, as to not rely on crappy grunt for development
+
 0.0.2 / 2014-04-26
 ==================
 
@@ -11,4 +18,4 @@
 0.0.1 / 2014-03-17
 ==================
 
-  * Initial release
+  * Initial release

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "powerange"
   , "main": "dist/powerange.js"
-  , "version": "0.0.2"
+  , "version": "0.0.4"
   , "description": "iOS 7 style range slider"
   , "keywords": [
         "range"

component.json

@@ -2,7 +2,7 @@
     "name": "powerange"
   , "repo": "abpetkov/powerange"
   , "description": "iOS 7 style range slider"
-  , "version": "0.0.2"
+  , "version": "0.0.4"
   , "keywords": [
         "range"
       , "slider"
@@ -32,4 +32,4 @@
       , "https://cdn.rawgit.com"
       , "https://rawgit.com"
     ]
-}
+}

example/example.html

@@ -5,7 +5,7 @@
 
   <title>Powerange - iOS 7 style range slider</title>
   <link rel="stylesheet" href="http://abpetkov.github.io/powerange/stylesheets/demo.css" />
-  <link rel="stylesheet" href="../dist/powerange.css" />
+  <link rel="stylesheet" href="../build/build.css" />
   <link href="http://fonts.googleapis.com/css?family=Maven+Pro:400" rel="stylesheet" type="text/css" />
   <link href="http://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet" type="text/css" />
   <link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css" />
@@ -391,9 +391,11 @@ <h2>Development</h2>
 
   </div>
 
-  <script src="../dist/powerange.min.js"></script>
+  <script src="../build/build.js"></script>
   <script type="text/javascript">
 
+    var Powerange = require('powerange');
+
     // Basic customization.
     var cust = document.querySelector('.js-customized');
     var initCust = new Powerange(cust, { hideRange: true, klass: 'power-ranger', start: 60 });
@@ -461,4 +463,4 @@ <h2>Development</h2>
     }
   </script>
 </body>
-</html>
+</html>

lib/horizontal.js

@@ -75,10 +75,20 @@ Horizontal.prototype.setPosition = function(val) {
 
 Horizontal.prototype.onmousedown = function(e) {
   if (e.touches) e = e.touches[0];
-  this.startX = e.clientX;
+  // snap to the touched position
+  if (e.target.className !== 'range-handle') {
+    var offset = 0;
+    var parent = this.handle;
+    while (parent = parent.offsetParent)
+      offset += parent.offsetLeft;
+    this.startX = offset - window.scrollX + this.handle.offsetLeft + this.handle.clientWidth / 2;
+  } else
+    this.startX = e.clientX;
   this.handleOffsetX = this.handle.offsetLeft;
   this.restrictHandleX = this.slider.offsetWidth - this.handle.offsetWidth;
   this.unselectable(this.slider, true);
+  // trigger a move right away, to reposition the handle
+  this.onmousemove(e);
 };
 
 /**
@@ -115,4 +125,4 @@ Horizontal.prototype.onmousemove = function(e) {
 
 Horizontal.prototype.onmouseup = function(e) {
   this.unselectable(this.slider, false);
-};
+};

lib/main.js

@@ -28,9 +28,9 @@ function Powerange(element, options) {
 
   this.element = element;
   this.options = options || {};
-  this.slider = this.create('span', 'range-bar');
+  this.slider = this.create('div', 'range-container');
 
-  if (this.element !== null && this.element.type === 'text') this.init();
+  if (this.element !== null) this.init();
 }
 
 /**
@@ -41,11 +41,11 @@ function Powerange(element, options) {
 
 Powerange.prototype.bindEvents = function () {
   this.handle = this.slider.querySelector('.range-handle');
-  this.touch = events(this.handle, this);
+  this.touch = events(this.slider, this);
   this.touch.bind('touchstart', 'onmousedown');
   this.touch.bind('touchmove', 'onmousemove');
   this.touch.bind('touchend', 'onmouseup');
-  this.mouse = mouse(this.handle, this);
+  this.mouse = mouse(this.slider, this);
   this.mouse.bind();
 };
 
@@ -97,10 +97,13 @@ Powerange.prototype.generate = function() {
       }
   };
 
+  var bar = this.create('span', 'range-bar');
+  this.slider.appendChild(bar);
+
   for (var key in elems) {
     if (elems.hasOwnProperty(key)) {
       var temp = this.create(elems[key].type, elems[key].selector);
-      this.slider.appendChild(temp);
+      bar.appendChild(temp);
     }
   }
 
@@ -295,4 +298,4 @@ Powerange.prototype.init = function() {
   this.checkValues(this.options.start);
   this.setRange(this.options.min, this.options.max);
   this.disable();
-};
+};

lib/powerange.css

@@ -9,6 +9,11 @@
  * Horizontal slider style (default).
  */
 
+.range-container {
+  height: 4px;
+  padding: 13px 0px;
+}
+
 .range-bar {
   background-color: #a9acb1;
   border-radius: 15px;
@@ -64,9 +69,14 @@
  * Vertical slider style.
  */
 
-.vertical {
+.vertical.range-container {
+  width: 4px;
+  padding: 0px 13px;
   height: 100%;
+}
+.vertical .range-bar {
   width: 4px;
+  height: 100%;
 }
 
 .vertical .range-quantity {
@@ -116,4 +126,4 @@
 
 .range-disabled {
   cursor: default;
-}
+}

lib/powerange.js

@@ -33,6 +33,18 @@ var defaults = {
 module.exports = function(element, options) {
   options = options || {};
 
+  // if we have an element, fill in some values based on that input element
+  if (element) {
+    if (typeof options.min === 'undefined' && element.min)
+      options.min = element.min;
+    if (typeof options.max === 'undefined' && element.max)
+      options.max = element.max;
+    if (typeof options.step === 'undefined' && element.step)
+      options.step = element.step;
+    if (typeof options.start === 'undefined' && element.value)
+      options.start = element.value;
+  }
+
   for (var i in defaults) {
     if (options[i] == null) {
       options[i] = defaults[i];
@@ -44,4 +56,4 @@ module.exports = function(element, options) {
   } else {
     return new Horizontal(element, options);
   }
-};
+};

lib/vertical.js

@@ -77,10 +77,20 @@ Vertical.prototype.setPosition = function(val) {
 
 Vertical.prototype.onmousedown = function(e) {
   if (e.touches) e = e.touches[0];
-  this.startY = e.clientY;
+  // snap to the touched position
+  if (e.target.className !== 'range-handle') {
+    var offset = 0;
+    var parent = this.handle;
+    while (parent = parent.offsetParent)
+      offset += parent.offsetTop;
+    this.startY = offset - window.scrollY + this.handle.offsetTop + this.handle.clientHeight / 2;
+  } else
+    this.startY = e.clientY;
   this.handleOffsetY = this.slider.offsetHeight - this.handle.offsetHeight - this.handle.offsetTop;
   this.restrictHandleY = this.slider.offsetHeight - this.handle.offsetHeight;
   this.unselectable(this.slider, true);
+  // trigger a move right away, to reposition the handle
+  this.onmousemove(e);
 };
 
 /**
@@ -117,4 +127,4 @@ Vertical.prototype.onmousemove = function(e) {
 
 Vertical.prototype.onmouseup = function(e) {
   this.unselectable(this.slider, false);
-};
+};

package.json

@@ -1,6 +1,6 @@
 {
     "name": "powerange"
-  , "version": "0.0.2"
+  , "version": "0.0.4"
   , "description": "iOS 7 style range slider"
   , "main": "powerange.js"
   , "repository": {