Skip to content

Commit

Permalink
Browser Compatibility Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnkiernander
johnkiernander committed Sep 13, 2013
1 parent 3bb8718 commit f139e7b
Show file tree
Hide file tree
Showing 19 changed files with 263 additions and 124 deletions.
133 changes: 102 additions & 31 deletions dist/dimple.v1.1.0.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -845,10 +845,10 @@ var dimple = {

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Source: /src/objects/chart/methods/_heightPixels.js
// Access the pixel value of the height of the plot area
this._heightPixels = function () {
return dimple._parsePosition(this.height, this.svg.node().offsetHeight);
return dimple._parseYPosition(this.height, this.svg.node());
};

// Copyright: 2013 PMSI-AlignAlytics
Expand Down Expand Up @@ -881,24 +881,24 @@ var dimple = {

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Source: /src/objects/chart/methods/_widthPixels.js
// Access the pixel value of the width of the plot area
this._widthPixels = function () {
return dimple._parsePosition(this.width, this.svg.node().offsetWidth);
return dimple._parseXPosition(this.width, this.svg.node());
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Access the pixel position of the x co-ordinate of the plot area
this._xPixels = function () {
return dimple._parsePosition(this.x, this.svg.node().offsetWidth);
return dimple._parseXPosition(this.x, this.svg.node());
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_yPixels.js
// Access the pixel position of the y co-ordinate of the plot area
this._yPixels = function () {
return dimple._parsePosition(this.y, this.svg.node().offsetHeight);
return dimple._parseYPosition(this.y, this.svg.node());
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
Expand Down Expand Up @@ -1311,7 +1311,7 @@ var dimple = {
rotated = false;
axis.shapes.selectAll(".axis text")
.style("text-anchor", "middle")
.attr("transform", null);
.attr("transform", "");
}
} else if (axis.position === "x") {
// If the gaps are narrower than the widest label display all labels horizontally
Expand All @@ -1335,7 +1335,7 @@ var dimple = {
rotated = false;
axis.shapes.selectAll(".axis text")
.style("text-anchor", "middle")
.attr("transform", null);
.attr("transform", "");
}
}
}
Expand Down Expand Up @@ -1467,19 +1467,19 @@ var dimple = {
this.height = height;
// Access the pixel value of the x coordinate
this._xPixels = function () {
return dimple._parsePosition(this.x, this.svg.node().offsetWidth);
return dimple._parseXPosition(this.x, this.svg.node());
};
// Access the pixel value of the y coordinate
this._yPixels = function () {
return dimple._parsePosition(this.y, this.svg.node().offsetHeight);
return dimple._parseYPosition(this.y, this.svg.node());
};
// Access the pixel value of the width coordinate
this._widthPixels = function () {
return dimple._parsePosition(this.width, this.svg.node().offsetWidth);
return dimple._parseXPosition(this.width, this.svg.node());
};
// Access the pixel value of the width coordinate
this._heightPixels = function () {
return dimple._parsePosition(this.height, this.svg.node().offsetHeight);
return dimple._parseYPosition(this.height, this.svg.node());
};
// Refresh the axes to redraw them against the new bounds
this.draw(0, true);
Expand All @@ -1500,19 +1500,19 @@ var dimple = {
this.height = 0;
// Access the pixel value of the x coordinate
this._xPixels = function () {
return dimple._parsePosition(this.x, this.svg.node().offsetWidth);
return dimple._parseXPosition(this.x, this.svg.node());
};
// Access the pixel value of the y coordinate
this._yPixels = function () {
return dimple._parsePosition(this.y, this.svg.node().offsetHeight);
return dimple._parseYPosition(this.y, this.svg.node());
};
// Access the pixel value of the width coordinate
this._widthPixels = function () {
return this.svg.node().offsetWidth - this._xPixels() - dimple._parsePosition(right, this.svg.node().offsetWidth);
return dimple._parentWidth(this.svg.node()) - this._xPixels() - dimple._parseXPosition(right, this.svg.node());
};
// Access the pixel value of the width coordinate
this._heightPixels = function () {
return this.svg.node().offsetHeight - this._yPixels() - dimple._parsePosition(bottom, this.svg.node().offsetHeight);
return dimple._parentHeight(this.svg.node()) - this._yPixels() - dimple._parseYPosition(bottom, this.svg.node());
};
// Refresh the axes to redraw them against the new bounds
this.draw(0, true);
Expand Down Expand Up @@ -1759,32 +1759,32 @@ var dimple = {

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Access the pixel value of the height of the plot area
// Source: /src/objects/legend/methods/_heightPixels.js
// Access the pixel value of the height of the legend area
this._heightPixels = function () {
return dimple._parsePosition(this.height, this.chart.svg.node().offsetHeight);
return dimple._parseYPosition(this.height, this.chart.svg.node());
};

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Access the pixel value of the width of the plot area
// Source: /src/objects/legend/methods/_widthPixels.js
// Access the pixel value of the width of the legend area
this._widthPixels = function () {
return dimple._parsePosition(this.width, this.chart.svg.node().offsetWidth);
return dimple._parseXPosition(this.width, this.chart.svg.node());
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_xPixels.js
// Access the pixel position of the x co-ordinate of the plot area
// Source: /src/objects/legend/methods/_xPixels.js
// Access the pixel position of the x co-ordinate of the legend area
this._xPixels = function () {
return dimple._parsePosition(this.x, this.chart.svg.node().offsetWidth);
return dimple._parseXPosition(this.x, this.chart.svg.node());
};
// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/objects/chart/methods/_yPixels.js
// Access the pixel position of the y co-ordinate of the plot area
// Source: /src/objects/legend/methods/_yPixels.js
// Access the pixel position of the y co-ordinate of the legend area
this._yPixels = function () {
return dimple._parsePosition(this.y, this.chart.svg.node().offsetHeight);
return dimple._parseYPosition(this.y, this.chart.svg.node());
};
};
// End dimple.legend
Expand Down Expand Up @@ -4015,15 +4015,86 @@ var dimple = {

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_parsePosition.js
dimple._parsePosition = function (value, svgScaleValue) {
// Source: /src/methods/_parentHeight.js
dimple._parentHeight = function (parent) {
// This one seems to work in Chrome - good old Chrome!
var returnValue = parent.offsetHeight;
// This does it for IE
if (returnValue <= 0 || returnValue === null || returnValue === undefined) {
returnValue = parent.clientHeight;
}
// FireFox is the hard one this time. See this bug report:
// https://bugzilla.mozilla.org/show_bug.cgi?id=649285//
// It's dealt with by trying to recurse up the dom until we find something
// we can get a size for. Usually the parent of the SVG. It's a bit costly
// but I don't know of any other way.
if (returnValue <= 0 || returnValue === null || returnValue === undefined) {
if (parent.parentNode === null || parent.parentNode === undefined) {
// Give up - Recursion Exit Point
returnValue = 0;
} else {
// Get the size from the parent recursively
returnValue = dimple._parseYPosition(d3.select(parent).attr("height"), parent.parentNode);
}
}
return returnValue;
};

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_parentWidth.js
dimple._parentWidth = function (parent) {
// This one seems to work in Chrome - good old Chrome!
var returnValue = parent.offsetWidth;
// This does it for IE
if (returnValue <= 0 || returnValue === null || returnValue === undefined) {
returnValue = parent.clientWidth;
}
// FireFox is the hard one this time. See this bug report:
// https://bugzilla.mozilla.org/show_bug.cgi?id=649285//
// It's dealt with by trying to recurse up the dom until we find something
// we can get a size for. Usually the parent of the SVG. It's a bit costly
// but I don't know of any other way.
if (returnValue <= 0 || returnValue === null || returnValue === undefined) {
if (parent.parentNode === null || parent.parentNode === undefined) {
// Give up - Recursion Exit Point
returnValue = 0;
} else {
// Get the size from the parent recursively
returnValue = dimple._parseXPosition(d3.select(parent).attr("width"), parent.parentNode);
}
}
return returnValue;
};

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_parseXPosition.js
dimple._parseXPosition = function (value, parent) {
var returnValue = value;
if (value === undefined || value === null) {
returnValue = 0;
} else if (!isNaN(value)) {
returnValue = value;
} else if (value.slice(-1) === "%") {
returnValue = dimple._parentWidth(parent) * (parseFloat(value.slice(0, value.length - 1)) / 100);
} else if (value.slice(-2) === "px") {
returnValue = parseFloat(value.slice(0, value.length - 2));
}
return returnValue;
};

// Copyright: 2013 PMSI-AlignAlytics
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// Source: /src/methods/_parseYPosition.js
dimple._parseYPosition = function (value, parent) {
var returnValue = value;
if (value === undefined || value === null) {
returnValue = 0;
} else if (!isNaN(value)) {
returnValue = value;
} else if (value.slice(-1) === "%") {
returnValue = svgScaleValue * (parseFloat(value.slice(0, value.length - 1)) / 100);
returnValue = dimple._parentHeight(parent) * (parseFloat(value.slice(0, value.length - 1)) / 100);
} else if (value.slice(-2) === "px") {
returnValue = parseFloat(value.slice(0, value.length - 2));
}
Expand Down
4 changes: 2 additions & 2 deletions dist/dimple.v1.1.0.min.js
View file

Large diffs are not rendered by default.

60 changes: 30 additions & 30 deletions examples/advanced_responsive_sizing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,42 +41,42 @@
// button to a form but as we have the library loaded - and we
// love d3 - we may as well use it. Ignore the code from this
// point on unless you want to learn a way of making buttons in d3
var height = 50, width = 150, color = new dimple.color("#B3DE69");
var height = 60, width = 180, color = new dimple.color("#B3DE69");

svg.append("rect")
.attr("x", svg.node().offsetWidth / 2 - width / 2)
.attr("y", svg.node().offsetHeight / 2 - height / 2)
.attr("rx", 15).attr("ry", 15)
.attr("width", width).attr("height", height)
.style("fill", color.fill).style("stroke", color.stroke);
.attr("x", dimple._parentWidth(svg.node()) / 2 - width / 2)
.attr("y", dimple._parentHeight(svg.node()) / 2 - height / 2)
.attr("rx", 15).attr("ry", 15)
.attr("width", width).attr("height", height)
.style("fill", color.fill).style("stroke", color.stroke);

svg.selectAll("title_text")
.data(["Click Here", "To Open Example"])
.enter().append("text")
.attr("x", svg.node().offsetWidth / 2)
.attr("y", function (d, i) {
return svg.node().offsetHeight / 2 - 5 + i * 18;
})
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-size", "12px").style("opacity", 0.7)
.text(function (d) { return d; });
.data(["Click Here To", "To Open Resizable Popup"])
.enter().append("text")
.attr("x", dimple._parentWidth(svg.node()) / 2)
.attr("y", function (d, i) {
return dimple._parentHeight(svg.node()) / 2 - 5 + i * 18;
})
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-size", "12px").style("opacity", 0.7)
.text(function (d) { return d; });

svg.selectAll("text,rect")
.on("mouseenter", function () {
svg.selectAll("rect").style("fill", color.stroke)
})
.on("mouseleave", function () {
svg.selectAll("rect").style("fill", color.fill)
})
.style("cursor", "pointer")
.on("click", function () {
var w = window.open(
'/examples/advanced_responsive_sizing.html',
'Resize Window To See Chart Resizing',
'width=640px,height=480px');

} );
.on("mouseenter", function () {
svg.selectAll("rect").style("fill", color.stroke)
})
.on("mouseleave", function () {
svg.selectAll("rect").style("fill", color.fill)
})
.style("cursor", "pointer")
.on("click", function () {
var w = window.open(
'/examples/advanced_responsive_sizing.html',
'Resize Window To See Chart Resizing',
'width=640px,height=480px,resizable=1,' +
'toolbar=0,menubar=0,scrollbars=0');
});
}

</script>
Expand Down
Loading

0 comments on commit f139e7b

Please sign in to comment.