Widget:Test1: Difference between revisions

Revision as of 16:27, 22 May 2019

This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.

@@ Line 1: / Line 1: @@
 <noinclude><div class="no-img">This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly><div id="navMapNav"></div><script>
-//Utility
-//Test --> Template:Test --> Widget:Test1
-//TRY THIS FIRST: https://bl.ocks.org/mbostock/1014829
-//RequestIdleCallback:
-//https://developers.google.com/web/updates/2015/08/using-requestidlecallback?hl=en
-//https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
 //Utility
 ( function() {
@@ Line 245: / Line 236: @@
 	var tooltip, features, zoom, tooltipOffset;
 	m.curMap = false;
+	m.makeResponsive = function(div, svg) {
+		var container = d3.select(svg.node().parentNode);
+		var w = parseInt(svg.style("width"));
+		var h = parseInt(svg.style("height"));
+		var aspect = w / h;
+		svg.attr("viewBox", "0 0 " + w + " " + h)
+		.attr("preserveAspectRatio", "xMinYMid")
+		.call(resize);
+		// to register multiple listeners for same event type,
+		// you need to add namespace, i.e., 'click.foo'
+		// necessary if you call invoke this function for multiple svgs
+		// api docs: https://github.com/mbostock/d3/wiki/Selections#on
+		d3.select(window).on("resize." + container.attr("id"), resize);
+		// get width of container and resize svg to fit it
+		function resize() {
+			var targetWidth = parseInt(container.style("width"));
+			svg.attr("width", targetWidth);
+			svg.attr("height", Math.round(targetWidth / aspect));
+		}
+	}
@@ Line 252: / Line 268: @@
 		var projection = d3.geo.conicEqualArea().scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]).parallels([49.95898294542323,55.81107189358492]).rotate([1.4602454263940616]).translate([202.798519176517,306.70813464248357]);
 		var path = d3.geo.path().projection(projection);
-		var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height);
+		var div = "div#" + m.curMap;
+		var svg = d3.select(div).append("svg").attr("width", width).attr("height", height);
 		if (mp.childNodes.length > 1) {
 			mp.firstChild.nextSibling.style.display = "none";
@@ Line 258: / Line 275: @@
 		features = svg.append("g").attr("class","features");
 		tooltip = d3.select("body").append("div").attr("class","ttip");
+		m.makeResponsive(div, svg);
 		d3.xml("/wiki/geo/england/country/England.svg",function(error,geodata) {
 			if (!error) {
 				features.selectAll("path").data(geodata.features).enter().append("path").attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip).on("mouseout",hideTooltip).on("click",clicked);
-				//if (m.curMap === "navMap" || m.curMap === "choroMap") {
+				w.choro.choropleth();
-					w.choro.choropleth();
-				//}
 				if (mp.childNodes.length > 1) {
 					mp.removeChild(mp.childNodes[0]);