mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 04:39:06 +02:00
Fix #2418 Firefox old version compatibility
Old versions of FF doesn't accept accessing the computed style via the 'max-width' and 'max-height' CSS notations using brackets, in which case the returned value is undefined. Changed the constraint methods to use maxWidth and mawHeight instead and make sure to test valid values.
This commit is contained in:
parent
07b7db14e9
commit
451a9a4515
@ -732,21 +732,35 @@ module.exports = function(Chart) {
|
|||||||
return valueInPixels;
|
return valueInPixels;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns if the given value contains an effective constraint.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function isConstrainedValue(value) {
|
||||||
|
return value !== undefined && value !== null && value !== 'none';
|
||||||
|
}
|
||||||
|
|
||||||
// Private helper to get a constraint dimension
|
// Private helper to get a constraint dimension
|
||||||
// @param domNode : the node to check the constraint on
|
// @param domNode : the node to check the constraint on
|
||||||
// @param maxStyle : the style that defines the maximum for the direction we are using (max-width / max-height)
|
// @param maxStyle : the style that defines the maximum for the direction we are using (maxWidth / maxHeight)
|
||||||
// @param percentageProperty : property of parent to use when calculating width as a percentage
|
// @param percentageProperty : property of parent to use when calculating width as a percentage
|
||||||
|
// @see http://www.nathanaeljones.com/blog/2013/reading-max-width-cross-browser
|
||||||
function getConstraintDimension(domNode, maxStyle, percentageProperty) {
|
function getConstraintDimension(domNode, maxStyle, percentageProperty) {
|
||||||
var constrainedDimension;
|
var view = document.defaultView;
|
||||||
var constrainedNode = document.defaultView.getComputedStyle(domNode)[maxStyle];
|
var parentNode = domNode.parentNode;
|
||||||
var constrainedContainer = document.defaultView.getComputedStyle(domNode.parentNode)[maxStyle];
|
var constrainedNode = view.getComputedStyle(domNode)[maxStyle];
|
||||||
var hasCNode = constrainedNode !== null && constrainedNode !== "none";
|
var constrainedContainer = view.getComputedStyle(parentNode)[maxStyle];
|
||||||
var hasCContainer = constrainedContainer !== null && constrainedContainer !== "none";
|
var hasCNode = isConstrainedValue(constrainedNode);
|
||||||
|
var hasCContainer = isConstrainedValue(constrainedContainer);
|
||||||
|
var infinity = Number.POSITIVE_INFINITY;
|
||||||
|
|
||||||
if (hasCNode || hasCContainer) {
|
if (hasCNode || hasCContainer) {
|
||||||
constrainedDimension = Math.min((hasCNode ? parseMaxStyle(constrainedNode, domNode, percentageProperty) : Number.POSITIVE_INFINITY), (hasCContainer ? parseMaxStyle(constrainedContainer, domNode.parentNode, percentageProperty) : Number.POSITIVE_INFINITY));
|
return Math.min(
|
||||||
|
hasCNode? parseMaxStyle(constrainedNode, domNode, percentageProperty) : infinity,
|
||||||
|
hasCContainer? parseMaxStyle(constrainedContainer, parentNode, percentageProperty) : infinity);
|
||||||
}
|
}
|
||||||
return constrainedDimension;
|
|
||||||
|
return 'none';
|
||||||
}
|
}
|
||||||
// returns Number or undefined if no constraint
|
// returns Number or undefined if no constraint
|
||||||
helpers.getConstraintWidth = function(domNode) {
|
helpers.getConstraintWidth = function(domNode) {
|
||||||
@ -759,26 +773,16 @@ module.exports = function(Chart) {
|
|||||||
helpers.getMaximumWidth = function(domNode) {
|
helpers.getMaximumWidth = function(domNode) {
|
||||||
var container = domNode.parentNode;
|
var container = domNode.parentNode;
|
||||||
var padding = parseInt(helpers.getStyle(container, 'padding-left')) + parseInt(helpers.getStyle(container, 'padding-right'));
|
var padding = parseInt(helpers.getStyle(container, 'padding-left')) + parseInt(helpers.getStyle(container, 'padding-right'));
|
||||||
|
|
||||||
var w = container.clientWidth - padding;
|
var w = container.clientWidth - padding;
|
||||||
var cw = helpers.getConstraintWidth(domNode);
|
var cw = helpers.getConstraintWidth(domNode);
|
||||||
if (cw !== undefined) {
|
return isNaN(cw)? w : Math.min(w, cw);
|
||||||
w = Math.min(w, cw);
|
|
||||||
}
|
|
||||||
|
|
||||||
return w;
|
|
||||||
};
|
};
|
||||||
helpers.getMaximumHeight = function(domNode) {
|
helpers.getMaximumHeight = function(domNode) {
|
||||||
var container = domNode.parentNode;
|
var container = domNode.parentNode;
|
||||||
var padding = parseInt(helpers.getStyle(container, 'padding-top')) + parseInt(helpers.getStyle(container, 'padding-bottom'));
|
var padding = parseInt(helpers.getStyle(container, 'padding-top')) + parseInt(helpers.getStyle(container, 'padding-bottom'));
|
||||||
|
|
||||||
var h = container.clientHeight - padding;
|
var h = container.clientHeight - padding;
|
||||||
var ch = helpers.getConstraintHeight(domNode);
|
var ch = helpers.getConstraintHeight(domNode);
|
||||||
if (ch !== undefined) {
|
return isNaN(ch)? h : Math.min(h, ch);
|
||||||
h = Math.min(h, ch);
|
|
||||||
}
|
|
||||||
|
|
||||||
return h;
|
|
||||||
};
|
};
|
||||||
helpers.getStyle = function(el, property) {
|
helpers.getStyle = function(el, property) {
|
||||||
return el.currentStyle ?
|
return el.currentStyle ?
|
||||||
|
Loading…
Reference in New Issue
Block a user