From 3281952c0aca2a61d259ad9f2b0141ea5a7ef5ac Mon Sep 17 00:00:00 2001
From: Ruben <rubenvandeven@gmail.com>
Date: Sat, 11 Mar 2017 22:27:00 +0100
Subject: [PATCH] Workarounds for IE

---
 charts.py            |  2 +-
 templates/index.html | 22 +++++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/charts.py b/charts.py
index 0355634..343d99f 100644
--- a/charts.py
+++ b/charts.py
@@ -51,7 +51,7 @@ def describeArc(x, y, radius, startAngle, endAngle):
 	largeArcFlag = "0" if endAngle - startAngle <= 180 else "1";
 
 	d = " ".join([
-		"M", start['x'], start['y'],
+		"M", start['x'], str(round(float(start['y']) - 0.0001,4)), # make sure we don't get crazy small number IE cannot handle
 		"A", str(radius), str(radius), "0", largeArcFlag, "0", end['x'], end['y']
 	]);
 
diff --git a/templates/index.html b/templates/index.html
index 78d4cde..0baf857 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -121,8 +121,8 @@
 
 		#detail{
 			position:absolute;
-			width:20em;
-			margin-left:-10em;
+			width:15em;
+			margin-left:-7.5em;
 			background:rgba(0,0,0,0.8);
 			border-radius: 1em;
 			display: none;
@@ -277,10 +277,11 @@
 	{
 		var div = document.createElement('div');
 		div.innerHTML = evt.target.response;
-		// document.getElementById('colourImage').innerHTML = div.children[0].innerHTML;
+		// document.getElementById('colourImage').innerHTML = div.children[0].innerHTML; // this doesn't work in bloody IE!!
 		document.getElementById('works').innerHTML = div.children[1].innerHTML;
 		document.getElementById('stats').innerHTML = div.children[2].innerHTML;
-		
+
+		// workaround for IE:
 		let svgEl = document.getElementById('colourImage');
 		svgEl.parentNode.replaceChild(div.children[0], svgEl);
 		
@@ -332,22 +333,29 @@
 
 	loadResults("no", "thing");
 
+	// workaround IE: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
+	var supportPageOffset = window.pageXOffset !== undefined;
+	var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
 	function triggerover(layerId, el)
 	{
+		// workaround IE for window.scrollY: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
+		// let x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+		let scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
 		let url = '/images/'+layerId+'.png';
 		let position = el.getBoundingClientRect();
 		let detailEl = document.getElementById('detail');
 		document.getElementById('detail-img').src = url;
 
-
 		el.onmouseout = triggerout;
 		// show below icon if higher item, otherwise above it.
 		if(el.attributes.cy.value <= 0) {
-			detailEl.style.top = (position.top + position.height + window.scrollY) + 'px';
+			detailEl.style.top = (position.top + position.height + scrollY) + 'px';
 			detailEl.style.bottom = 'auto';
 		} else {
 			detailEl.style.top = 'auto';
-			detailEl.style.bottom = 'calc(100% - ' + ( position.top + window.scrollY ) + 'px)';
+			detailEl.style.bottom = 'calc(100% - ' + ( position.top + scrollY ) + 'px)';
 		}
 		detailEl.style.left = (position.left - position.width/2) + 'px';
 		detailEl.classList.add('active');