Update to 1.6

Minor bug fixes, added the ability to display the grid
IonDen · Jun 21, 2013 · 5b0e729 · 5b0e729
1 parent 6e1a7e7
commit 5b0e729
Show file tree

Hide file tree

Showing 8 changed files with 478 additions and 356 deletions.
diff --git a/css/ion.rangeSlider.css b/css/ion.rangeSlider.css
@@ -1,5 +1,5 @@
 /* Ion.RangeSlider
-// css version 1.5.37
+// css version 1.5.42
 // by Denis Ineshin | ionden.com
 // ===================================================================================================================*/
 
@@ -83,4 +83,32 @@
         top: 0; left: 0;
         cursor: default;
         white-space: nowrap;
+    }
+
+
+.irs-grid {
+    position: absolute; display: none;
+    bottom: 0; left: 0;
+    width: 100%; height: 20px;
+}
+.irs-with-grid .irs-grid {
+    display: block;
+}
+    .irs-grid-pol {
+        position: absolute;
+        top: 0; left: 0;
+        width: 1px; height: 8px;
+        background: #000;
+    }
+    .irs-grid-pol.small {
+        height: 4px;
+    }
+    .irs-grid-text {
+        position: absolute;
+        bottom: 0; left: 0;
+        width: 100px;
+        white-space: nowrap;
+        text-align: center;
+        font-size: 9px; line-height: 9px;
+        color: #000;
     }
diff --git a/css/ion.rangeSlider.skinNice.css b/css/ion.rangeSlider.skinNice.css
@@ -1,5 +1,5 @@
 /* Ion.RangeSlider, Nice Skin
-// css version 1.5.6
+// css version 1.5.11
 // by Denis Ineshin | ionden.com
 // ===================================================================================================================*/
 
@@ -17,6 +17,9 @@
 .irs {
     height: 40px;
 }
+.irs-with-grid {
+    height: 60px;
+}
 .irs-line {
     height: 8px; top: 25px;
 }
@@ -49,7 +52,7 @@
 
 .irs-min, .irs-max {
     color: #999;
-    font-size: 10px;
+    font-size: 10px; line-height: 1.333;
     text-shadow: none;
     top: 0; padding: 1px 3px;
     background: rgba(0,0,0,0.1);
@@ -61,12 +64,19 @@
 
 .irs-from, .irs-to, .irs-single {
     color: #fff;
-    font-size: 10px;
+    font-size: 10px; line-height: 1.333;
     text-shadow: none;
     padding: 1px 5px;
     background: rgba(0,0,0,0.3);
     border-radius: 3px;
 }
 .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
     background: #999;
+}
+
+.irs-grid-pol {
+    background: #99a4ac;
+}
+.irs-grid-text {
+    color: #99a4ac;
 }
diff --git a/css/ion.rangeSlider.skinSimple.css b/css/ion.rangeSlider.skinSimple.css
@@ -1,5 +1,5 @@
 /* Ion.RangeSlider, Simple Skin
-// css version 1.5.6
+// css version 1.5.11
 // by Denis Ineshin | ionden.com
 // ===================================================================================================================*/
 
@@ -17,6 +17,9 @@
 .irs {
     height: 40px;
 }
+.irs-with-grid {
+    height: 60px;
+}
 .irs-line {
     height: 6px; top: 25px;
 }
@@ -49,7 +52,7 @@
 
 .irs-min, .irs-max {
     color: #c0c0c0;
-    font-size: 10px;
+    font-size: 10px; line-height: 1.333;
     text-shadow: none;
     top: 0; padding: 1px 3px;
     background: rgba(0,0,0,0.1);
@@ -61,12 +64,19 @@
 
 .irs-from, .irs-to, .irs-single {
     color: #000;
-    font-size: 10px;
+    font-size: 10px; line-height: 1.333;
     text-shadow: none;
     padding: 1px 5px;
     background: rgba(255,255,255,0.8);
     border-radius: 3px;
 }
 .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
     background: #d8dff3;
+}
+
+.irs-grid-pol {
+    background: #777;
+}
+.irs-grid-text {
+    color: #e0e0e0;
 }
diff --git a/ion-rangeSlider.jquery.json b/ion-rangeSlider.jquery.json
@@ -1,13 +1,14 @@
 {
     "name": "ion-rangeSlider",
-    "version": "1.5.99",
+    "version": "1.6.107",
     "title": "Ion Range Slider",
     "description": "Comfortable and easily customizable range slider with skins support",
     "keywords": [
         "range",
         "slider",
         "interface",
-        "diapason"
+        "diapason",
+        "ui"
     ],
     "author": {
         "name": "IonDen",
@@ -22,7 +23,7 @@
     "homepage": "https://github.com/IonDen/ion.rangeSlider",
     "docs": "https://github.com/IonDen/ion.rangeSlider/blob/master/readme.md",
     "demo": "http://ionden.com/a/plugins/ion.rangeSlider/en.html",
-    "download": "http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-1.5.zip",
+    "download": "http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-1.6.zip",
     "dependencies": {
         "jquery": ">=1.9"
     }

diff --git a/js/ion.rangeSlider.js b/js/ion.rangeSlider.js
@@ -1,5 +1,5 @@
 // Ion.RangeSlider
-// version 1.5.99
+// version 1.6.107
 // © 2013 Denis Ineshin | IonDen.com
 //
 // Project page:    http://ionden.com/a/plugins/ion.rangeSlider/
@@ -15,7 +15,7 @@
         var n = num.toString();
         return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g,"$1 ");
     };
-    var isOldIe = function(){
+    var oldie = (function(){
         var n = navigator.userAgent,
             r = /msie\s\d+/i,
             v;
@@ -30,15 +30,15 @@
         } else {
             return false;
         }
-    };
-    var isItTouch = function() {
+    }());
+    var isTouch = (function() {
         try {
             document.createEvent("TouchEvent");
             return true;
         } catch (e) {
             return false;
         }
-    };
+    }());
 
     var methods = {
         init: function(options){
@@ -50,6 +50,7 @@
                 type: "single",
                 step: 1,
                 postfix: "",
+                hasGrid: false,
                 onChange: null,
                 onFinish: null
             }, options);
@@ -59,14 +60,12 @@
                 baseHTML += '<span class="irs-min">0</span><span class="irs-max">1</span>';
                 baseHTML += '<span class="irs-from">0</span><span class="irs-to">0</span><span class="irs-single">0</span>';
                 baseHTML += '</span>';
+                baseHTML += '<span class="irs-grid"></span>';
             var singleHTML = '<span class="irs-slider single"></span>';
             var doubleHTML =  '<span class="irs-diapason"></span>';
                 doubleHTML += '<span class="irs-slider from"></span>';
                 doubleHTML += '<span class="irs-slider to"></span>';
 
-            var oldie = isOldIe();
-            var isTouch = isItTouch();
-
 
             return this.each(function(){
                 var slider = $(this);
@@ -86,7 +85,8 @@
                     to: parseInt(slider.data("to")) || settings.to,
                     type: slider.data("type") || settings.type,
                     step: parseInt(slider.data("step")) || settings.step,
-                    postfix: slider.data("postfix") ||  settings.postfix
+                    postfix: slider.data("postfix") ||  settings.postfix,
+                    hasGrid: slider.data("hasgrid") ||  settings.hasGrid
                 };
                 settings = $.extend(settings, fromData);
 
@@ -107,7 +107,8 @@
                     $fromSlider,
                     $toSlider,
                     $activeSlider,
-                    $diapason;
+                    $diapason,
+                    $grid;
 
                 var allowDrag = false,
                     sliderIsActive = false,
@@ -126,7 +127,6 @@
 
 
 
-
                 // public methods
                 this.updateData = function(options){
                     settings = $.extend(settings, options);
@@ -161,6 +161,7 @@
                     $fieldFrom = $rangeSlider.find(".irs-from");
                     $fieldTo = $rangeSlider.find(".irs-to");
                     $fieldSingle = $rangeSlider.find(".irs-single");
+                    $grid = $container.find(".irs-grid");
 
                     fieldMinWidth = $fieldMin.outerWidth();
                     fieldMaxWidth = $fieldMax.outerWidth();
@@ -208,7 +209,10 @@
                             calcDimensions(e, $(this), "from");
                             allowDrag = true;
                             sliderIsActive = true;
-                            if(oldie) $("*").prop("unselectable",true);
+
+                            if(oldie) {
+                                $("*").prop("unselectable",true);
+                            }
                         });
                         $toSlider.on("mousedown", function(e){
                             e.preventDefault();
@@ -219,7 +223,10 @@
                             calcDimensions(e, $(this), "to");
                             allowDrag = true;
                             sliderIsActive = true;
-                            if(oldie) $("*").prop("unselectable",true);
+
+                            if(oldie) {
+                                $("*").prop("unselectable",true);
+                            }
                         });
 
                         if(isTouch) {
@@ -244,6 +251,10 @@
                                 sliderIsActive = true;
                             });
                         }
+
+                        if(settings.to === settings.max) {
+                            $fromSlider.addClass("last");
+                        }
                     }
 
                     $body.on("mouseup", function(){
@@ -256,7 +267,9 @@
                             setDiapason();
                         }
                         getNumbers();
-                        if(oldie) $("*").prop("unselectable",false);
+                        if(oldie) {
+                            $("*").prop("unselectable",false);
+                        }
                     });
                     $body.on("mousemove", function(e){
                         if(allowDrag) {
@@ -287,7 +300,9 @@
 
                     getSize();
                     setNumbers();
-
+                    if(settings.hasGrid) {
+                        setGrid();
+                    }
                 };
 
                 var getSize = function(){
@@ -555,6 +570,50 @@
                     }
                 };
 
+                var setGrid = function(){
+                    $container.addClass("irs-with-grid");
+
+                    var i = 0,
+                        text = '',
+                        step = 0,
+                        tStep = 0,
+                        gridHTML = '',
+                        smNum = 20,
+                        bigNum = 4;
+
+                    for(i = 0; i <= smNum; i++){
+                        step = Math.floor(normalWidth / smNum * i);
+                        if(step >= normalWidth) {
+                            step = normalWidth - 1;
+                        }
+                        gridHTML += '<span class="irs-grid-pol small" style="left: ' + step + 'px;"></span>';
+                    }
+                    for(i = 0; i <= bigNum; i++){
+                        step = Math.floor(normalWidth / bigNum * i);
+                        if(step >= normalWidth) {
+                            step = normalWidth - 1;
+                        }
+                        gridHTML += '<span class="irs-grid-pol" style="left: ' + step + 'px;"></span>';
+
+                        text = Math.round(settings.min + ((settings.max -settings.min) / bigNum * i));
+                        text = Math.round(text / settings.step) * settings.step;
+                        text = prettify(text);
+
+                        if(i === 0) {
+                            tStep = step;
+                            gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px; text-align: left;">' + text + '</span>';
+                        } else if(i === bigNum) {
+                            tStep = step - 100;
+                            gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px; text-align: right;">' + text + '</span>';
+                        } else {
+                            tStep = step - 50;
+                            gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px;">' + text + '</span>';
+                        }
+                    }
+
+                    $grid.html(gridHTML);
+                };
+
                 placeHTML();
             });
         },