Merge pull request #111 from andreruffert/feature/consider-details-el…

…ement

feature: consider range inside `<details>`

dist/rangeslider.js

@@ -85,10 +85,13 @@
      * @return {Boolean}
      */
     function isHidden(element) {
-        if (element.offsetWidth !== 0 || element.offsetHeight !== 0) {
-            return false;
+        if (element.offsetWidth === 0 ||
+            element.offsetHeight === 0 ||
+            // Also Consider native `<details>` elements.
+            element.open === false) {
+            return true;
         }
-        return true;
+        return false;
     }
 
     /**
@@ -121,6 +124,13 @@
             displayProperty         = [],
             dimension               = element[key];
 
+        // Used for native `<details>` elements
+        function toggleOpenProperty(element) {
+            if (typeof element.open !== 'undefined') {
+                element.open = (element.open) ? false : true;
+            }
+        }
+
         if (hiddenParentNodesLength) {
             for (var i = 0; i < hiddenParentNodesLength; i++) {
                 // Cache the display property to restore it later.
@@ -130,11 +140,13 @@
                 hiddenParentNodes[i].style.height = '0';
                 hiddenParentNodes[i].style.overflow = 'hidden';
                 hiddenParentNodes[i].style.visibility = 'hidden';
+                toggleOpenProperty(hiddenParentNodes[i]);
             }
 
             dimension = element[key];
 
             for (var j = 0; j < hiddenParentNodesLength; j++) {
+                toggleOpenProperty(hiddenParentNodes[j]);
                 hiddenParentNodes[j].style.display = displayProperty[j];
                 hiddenParentNodes[j].style.height = '';
                 hiddenParentNodes[j].style.overflow = '';

example/index.html

@@ -137,6 +137,20 @@ <h2>Consider initialization and update of hidden elements</h2>
         <button data-behaviour="toggle">Toggle visibility</button>
     </div>
 
+    <br>
+    <br>
+
+    <div id="js-example-hidden">
+        <h2>Combination with native <code>&lt;details&gt;</code> element</h2>
+        <details>
+            <summary>Toggle</summary>
+            <br>
+            <br>
+            <input type="range" min="10" max="100" value="20" data-rangeslider>
+            <output></output>
+        </details>
+    </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>

src/rangeslider.js

@@ -84,10 +84,13 @@
      * @return {Boolean}
      */
     function isHidden(element) {
-        if (element.offsetWidth !== 0 || element.offsetHeight !== 0) {
-            return false;
+        if (element.offsetWidth === 0 ||
+            element.offsetHeight === 0 ||
+            // Also Consider native `<details>` elements.
+            element.open === false) {
+            return true;
         }
-        return true;
+        return false;
     }
 
     /**
@@ -120,6 +123,13 @@
             displayProperty         = [],
             dimension               = element[key];
 
+        // Used for native `<details>` elements
+        function toggleOpenProperty(element) {
+            if (typeof element.open !== 'undefined') {
+                element.open = (element.open) ? false : true;
+            }
+        }
+
         if (hiddenParentNodesLength) {
             for (var i = 0; i < hiddenParentNodesLength; i++) {
                 // Cache the display property to restore it later.
@@ -129,11 +139,13 @@
                 hiddenParentNodes[i].style.height = '0';
                 hiddenParentNodes[i].style.overflow = 'hidden';
                 hiddenParentNodes[i].style.visibility = 'hidden';
+                toggleOpenProperty(hiddenParentNodes[i]);
             }
 
             dimension = element[key];
 
             for (var j = 0; j < hiddenParentNodesLength; j++) {
+                toggleOpenProperty(hiddenParentNodes[j]);
                 hiddenParentNodes[j].style.display = displayProperty[j];
                 hiddenParentNodes[j].style.height = '';
                 hiddenParentNodes[j].style.overflow = '';