Skip to content

Commit

Permalink
Make charts vertically responsive (chartjs#3105) (chartjs#3326)
Browse files Browse the repository at this point in the history
Ensure that the hidden iframe is stretched vertically in order to detect height changes. Remove the classlist check/call since it was incorrectly spelled (should be classList), but also useless since the iframe has just been generated. Also remove the callback check: addResizeListener should never be called w/o a valid callback.
  • Loading branch information
simonbrunel committed Sep 23, 2016
1 parent 103cd56 commit b86ed4b
Showing 1 changed file with 23 additions and 29 deletions.
52 changes: 23 additions & 29 deletions src/core/core.helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -958,38 +958,32 @@ module.exports = function(Chart) {
};
helpers.addResizeListener = function(node, callback) {
// Hide an iframe before the node
var hiddenIframe = document.createElement('iframe');
var hiddenIframeClass = 'chartjs-hidden-iframe';

if (hiddenIframe.classlist) {
// can use classlist
hiddenIframe.classlist.add(hiddenIframeClass);
} else {
hiddenIframe.setAttribute('class', hiddenIframeClass);
}

// Set the style
hiddenIframe.tabIndex = -1;
var style = hiddenIframe.style;
style.width = '100%';
style.display = 'block';
style.border = 0;
style.height = 0;
style.margin = 0;
style.position = 'absolute';
style.left = 0;
style.right = 0;
style.top = 0;
style.bottom = 0;
var iframe = document.createElement('iframe');

iframe.className = 'chartjs-hidden-iframe';
iframe.style.cssText =
'display:block;'+
'overflow:hidden;'+
'border:0;'+
'margin:0;'+
'top:0;'+
'left:0;'+
'bottom:0;'+
'right:0;'+
'height:100%;'+
'width:100%;'+
'position:absolute;'+
'pointer-events:none;'+
'z-index:-1;';

// Prevent the iframe to gain focus on tab.
// https://github.com/chartjs/Chart.js/issues/3090
iframe.tabIndex = -1;

// Insert the iframe so that contentWindow is available
node.insertBefore(hiddenIframe, node.firstChild);
node.insertBefore(iframe, node.firstChild);

(hiddenIframe.contentWindow || hiddenIframe).onresize = function() {
if (callback) {
return callback();
}
};
this.addEvent(iframe.contentWindow || iframe, 'resize', callback);
};
helpers.removeResizeListener = function(node) {
var hiddenIframe = node.querySelector('.chartjs-hidden-iframe');
Expand Down

0 comments on commit b86ed4b

Please sign in to comment.