Merge pull request #96 from andreruffert/release-0.3.5

release: 0.3.5

Gruntfile.js

@@ -95,12 +95,17 @@ module.exports = function (grunt) {
         // Increment version
         bump: {
             options: {
-                files: ['bower.json', 'package.json'],
+                files: [
+                    'bower.json',
+                    'package.json',
+                    'rangeslider.jquery.json'
+                ],
                 updateConfigs: ['pkg'],
                 commitMessage: 'chore(release): v%VERSION%',
                 commitFiles: [
                     'bower.json',
                     'package.json',
+                    'rangeslider.jquery.json',
                     'dist'
                 ],
                 createTag: false

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "rangeslider.js",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "authors": [
     "André Ruffert <[email protected]>"

dist/rangeslider.js

@@ -1,4 +1,4 @@
-/*! rangeslider.js - v0.3.4 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v0.3.5 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 (function(factory) {
     'use strict';
 
@@ -78,6 +78,72 @@
         };
     }
 
+    /**
+     * Check if a `element` is visible in the DOM
+     *
+     * @param  {Element}  element
+     * @return {Boolean}
+     */
+    function isHidden(element) {
+        if (element.offsetWidth !== 0 || element.offsetHeight !== 0) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Get hidden parentNodes of an `element`
+     *
+     * @param  {Element} element
+     * @return {[type]}
+     */
+    function getHiddenParentNodes(element) {
+        var parents = [],
+            node    = element.parentNode;
+
+        while (isHidden(node)) {
+            parents.push(node);
+            node = node.parentNode;
+        }
+        return parents;
+    }
+
+    /**
+     * Returns dimensions for an element even if it is not visible in the DOM.
+     *
+     * @param  {Element} element
+     * @param  {String}  key     (e.g. offsetWidth …)
+     * @return {Number}
+     */
+    function getDimension(element, key) {
+        var hiddenParentNodes       = getHiddenParentNodes(element),
+            hiddenParentNodesLength = hiddenParentNodes.length,
+            displayProperty         = [],
+            dimension               = element[key];
+
+        if (hiddenParentNodesLength) {
+            for (var i = 0; i < hiddenParentNodesLength; i++) {
+                // Cache the display property to restore it later.
+                displayProperty[i] = hiddenParentNodes[i].style.display;
+
+                hiddenParentNodes[i].style.display = 'block';
+                hiddenParentNodes[i].style.height = '0';
+                hiddenParentNodes[i].style.overflow = 'hidden';
+                hiddenParentNodes[i].style.visibility = 'hidden';
+            }
+
+            dimension = element[key];
+
+            for (var j = 0; j < hiddenParentNodesLength; j++) {
+                hiddenParentNodes[j].style.display = displayProperty[j];
+                hiddenParentNodes[j].style.height = '';
+                hiddenParentNodes[j].style.overflow = '';
+                hiddenParentNodes[j].style.visibility = '';
+            }
+        }
+        return dimension;
+    }
+
     /**
      * Plugin
      * @param {String} element
@@ -158,8 +224,8 @@
     };
 
     Plugin.prototype.update = function() {
-        this.handleWidth    = this.$handle[0].offsetWidth;
-        this.rangeWidth     = this.$range[0].offsetWidth;
+        this.handleWidth    = getDimension(this.$handle[0], 'offsetWidth');
+        this.rangeWidth     = getDimension(this.$range[0], 'offsetWidth');
         this.maxHandleX     = this.rangeWidth - this.handleWidth;
         this.grabX          = this.handleWidth / 2;
         this.position       = this.getPositionFromValue(this.value);
@@ -264,7 +330,7 @@
     Plugin.prototype.getValueFromPosition = function(pos) {
         var percentage, value;
         percentage = ((pos) / (this.maxHandleX || 1));
-        value = this.step * Math.ceil((((percentage) * (this.max - this.min)) + this.min) / this.step);
+        value = this.step * Math.round(percentage * (this.max - this.min) / this.step) + this.min;
         return Number((value).toFixed(2));
     };
 

example/index.html

@@ -115,6 +115,18 @@ <h2>Destroy a plugin instance</h2>
         <button data-behaviour="initialize">Initialize</button>
     </div>
 
+    <br>
+    <br>
+
+    <div id="js-example-hidden">
+        <h2>Consider initialization and update of hidden elements</h2>
+        <div style="display:none">
+            <input type="range" min="10" max="100" data-rangeslider>
+            <output></output>
+        </div>
+        <button data-behaviour="toggle">Toggle visibility</button>
+    </div>
+
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="../dist/rangeslider.min.js"></script>
     <script>
@@ -167,6 +179,13 @@ <h2>Destroy a plugin instance</h2>
                 $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
             });
 
+        // Example functionality to test initialisation on hidden elements
+        $document
+            .on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) {
+                var $container = $(e.target.previousElementSibling);
+                $container.toggle();
+            });
+
         // Basic rangeslider initialization
         $element.rangeslider({
 

package.json

@@ -2,7 +2,7 @@
   "name": "rangeslider.js",
   "title": "rangeslider.js",
   "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "license": "MIT",
   "keywords": [
@@ -41,5 +41,5 @@
     "load-grunt-tasks": "~0.2.1",
     "time-grunt": "~0.2.7"
   },
-  "codename": "Red Orange"
+  "codename": "Cadet Blue"
 }

rangeslider.jquery.json

@@ -2,7 +2,7 @@
   "name": "rangeslider",
   "title": "rangeslider.js",
   "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "docs": "http://andreruffert.github.io/rangeslider.js/",
   "license": "MIT",