From 8cf55733ca044ba478a39a7deea5ab15e664ced1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Tue, 23 Sep 2014 18:53:55 +0200 Subject: [PATCH 1/6] feature: add `isHidden` method Checks if a `element` is visible in the DOM Issue: Consider initialization and update of hidden Elements (#88) --- src/rangeslider.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/rangeslider.js b/src/rangeslider.js index 4653ebf..f7948d8 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -78,6 +78,17 @@ } /** + * 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; + } * Plugin * @param {String} element * @param {Object} options From 73af55dd0815b2dde105aa4cf789a352ca4487a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Tue, 23 Sep 2014 18:55:08 +0200 Subject: [PATCH 2/6] feature: add `getHiddenParentNodes` method Gets hidden parentNodes of an `element`. Issue: Consider initialization and update of hidden Elements (#88) --- src/rangeslider.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/rangeslider.js b/src/rangeslider.js index f7948d8..774b63c 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -89,6 +89,23 @@ } 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; + } * Plugin * @param {String} element * @param {Object} options From a40e87fd6a8b81ae7012c5e343bda17e648c0275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Tue, 23 Sep 2014 18:55:48 +0200 Subject: [PATCH 3/6] feature: add `getDimensions` method Returns dimensions for an element even if it is not visible in the DOM. Issue: Consider initialization and update of hidden Elements (#88) --- src/rangeslider.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/rangeslider.js b/src/rangeslider.js index 774b63c..d987e94 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -106,6 +106,44 @@ } 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 * @param {Object} options From 754a97618a7a7fbb01c57c01c54a23dc53cf651b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Tue, 23 Sep 2014 18:57:45 +0200 Subject: [PATCH 4/6] feature: getDimensions for setting handle,range width Issue: Consider initialization and update of hidden Elements (#88) --- src/rangeslider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/rangeslider.js b/src/rangeslider.js index d987e94..661c127 100644 --- a/src/rangeslider.js +++ b/src/rangeslider.js @@ -223,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); From 125e253878f254b1005a55eaf08b2090a4b98406 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= Date: Tue, 23 Sep 2014 18:59:48 +0200 Subject: [PATCH 5/6] example: initialisation on hidden elements Issue: Consider initialization and update of hidden Elements (#88) --- example/index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/example/index.html b/example/index.html index e246c2f..adf72be 100644 --- a/example/index.html +++ b/example/index.html @@ -115,6 +115,18 @@

Destroy a plugin instance

+
+
+ +
+

Consider initialization and update of hidden elements

+
+ + +
+ +
+