Merge branch 'consider-hidden-elements' into develop

* consider-hidden-elements: build: 💥 example: initialisation on hidden elements feature: getDimensions for setting handle,range width feature: add `getDimensions` method feature: add `getHiddenParentNodes` method feature: add `isHidden` method
andreruffert · Sep 28, 2014 · ac847a9 · ac847a9
2 parents 165d52d + e53a8b2
commit ac847a9
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 5 deletions.
diff --git a/dist/rangeslider.js b/dist/rangeslider.js
@@ -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);

diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js
diff --git a/example/index.html b/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({
 

diff --git a/src/rangeslider.js b/src/rangeslider.js
@@ -77,6 +77,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
@@ -157,8 +223,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);