Merge pull request #20 from andreruffert/markup-reduction

Removed unnecessary element div.rangeslider__range and replaced it with the wrapper element div.rangeslider
andreruffert · Apr 4, 2014 · 581520b · 581520b
2 parents 02655dd + 6f23460
commit 581520b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 27 deletions.
diff --git a/dist/rangeslider.css b/dist/rangeslider.css
@@ -1,8 +1,4 @@
-.rangeslider {
-  position: relative;
-}
-
-.rangeslider__range,
+.rangeslider,
 .rangeslider__fill {
   background: #e6e6e6;
   border: none;
@@ -20,6 +16,10 @@
   border-radius: 10px;
 }
 
+.rangeslider {
+  position: relative;
+}
+
 .rangeslider__fill {
   background: #00ff00;
   position: absolute;

diff --git a/dist/rangeslider.js b/dist/rangeslider.js
@@ -39,8 +39,7 @@
         inputrange = supportsRange(),
         defaults = {
             polyfill: true,
-            baseClass: 'rangeslider',
-            rangeClass: 'rangeslider__range',
+            rangeClass: 'rangeslider',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ((!touchevents) ? 'mousedown' : 'touchstart') + '.' + pluginName,
@@ -113,10 +112,9 @@
         this.min        = parseInt(this.$element[0].getAttribute('min')) || 0;
         this.max        = parseInt(this.$element[0].getAttribute('max')) || 0;
         this.step       = parseInt(this.$element[0].getAttribute('step')) || 1;
-        this.$range     = $('<div class="' + this.options.rangeClass + '" />');
         this.$fill      = $('<div class="' + this.options.fillClass + '" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
-        this.$base      = $('<div class="' + this.options.baseClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$range, this.$fill, this.$handle, this.$element);
+        this.$range     = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$fill, this.$handle, this.$element);
 
         // visually hide the input
         this.$element.css({
@@ -166,8 +164,8 @@
         this.$document.on(this.options.moveEvent, this.handleMove);
         this.$document.on(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e),
-            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$base[0]);
+        var posX = this.getRelativePosition(this.$range[0], e),
+            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$range[0]);
 
         this.setPosition(posX - this.grabX);
 
@@ -178,7 +176,7 @@
 
     Plugin.prototype.handleMove = function(e) {
         e.preventDefault();
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         this.setPosition(posX - this.grabX);
     };
 
@@ -187,7 +185,7 @@
         this.$document.off(this.options.moveEvent, this.handleMove);
         this.$document.off(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(posX - this.grabX, this.value);
         }

diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js
diff --git a/src/rangeslider.js b/src/rangeslider.js
@@ -38,8 +38,7 @@
         inputrange = supportsRange(),
         defaults = {
             polyfill: true,
-            baseClass: 'rangeslider',
-            rangeClass: 'rangeslider__range',
+            rangeClass: 'rangeslider',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ((!touchevents) ? 'mousedown' : 'touchstart') + '.' + pluginName,
@@ -112,10 +111,9 @@
         this.min        = parseInt(this.$element[0].getAttribute('min')) || 0;
         this.max        = parseInt(this.$element[0].getAttribute('max')) || 0;
         this.step       = parseInt(this.$element[0].getAttribute('step')) || 1;
-        this.$range     = $('<div class="' + this.options.rangeClass + '" />');
         this.$fill      = $('<div class="' + this.options.fillClass + '" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
-        this.$base      = $('<div class="' + this.options.baseClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$range, this.$fill, this.$handle, this.$element);
+        this.$range     = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$fill, this.$handle, this.$element);
 
         // visually hide the input
         this.$element.css({
@@ -165,8 +163,8 @@
         this.$document.on(this.options.moveEvent, this.handleMove);
         this.$document.on(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e),
-            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$base[0]);
+        var posX = this.getRelativePosition(this.$range[0], e),
+            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$range[0]);
 
         this.setPosition(posX - this.grabX);
 
@@ -177,7 +175,7 @@
 
     Plugin.prototype.handleMove = function(e) {
         e.preventDefault();
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         this.setPosition(posX - this.grabX);
     };
 
@@ -186,7 +184,7 @@
         this.$document.off(this.options.moveEvent, this.handleMove);
         this.$document.off(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(posX - this.grabX, this.value);
         }

diff --git a/src/rangeslider.scss b/src/rangeslider.scss
@@ -1,10 +1,6 @@
 @import "compass/css3";
 
-.rangeslider {
-    position: relative;
-}
-
-.rangeslider__range,
+.rangeslider,
 .rangeslider__fill {
     background: #e6e6e6;
     border: none;
@@ -16,6 +12,10 @@
     @include border-radius(10px);
 }
 
+.rangeslider {
+    position: relative;
+}
+
 .rangeslider__fill {
     background: #00ff00;
     position: absolute;