X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/dc6b482b5e7e1d3d35b5193fc820c5e1afc29a6e..f88a74c510e90c9c864d37bfaaf23fefa1a0fbdc:/countries.plp

diff --git a/countries.plp b/countries.plp
index 1ed8eef..e404ae5 100644
--- a/countries.plp
+++ b/countries.plp
@@ -17,7 +17,7 @@ Html({
 my $cc = do 'data/countries.inc.pl';
 
 {
-	printf '<table class="mcmap">';
+	printf '<table class="ccmap">';
 	print '<col><colgroup span="26">';
 	for my $section (qw{thead}) {
 		print "<$section><tr><th>↳";
@@ -46,7 +46,7 @@ my $cc = do 'data/countries.inc.pl';
 				}
 
 				$cell = showflag($code) // join(' ',
-					map { showflag($_) || $_ } split / /, $ref
+					map { showflag($_) || $_ } split(/ /, $ref)
 				);
 			}
 			else {
@@ -89,3 +89,26 @@ my $cc = do 'data/countries.inc.pl';
 	</div>
 </div>
 
+<: exit unless exists $get{v}; :>
+<script type="text/javascript"><!--
+	const table = document.querySelector('.ccmap');
+	const label = Array.prototype.map.call(table.tHead.rows[0].children, i => i.textContent);
+	const flagchr = 0x1F1E5; // regional indicator symbol letter base
+	let nowidth;
+	for (let row = 0; row < label.length; row++) {
+		for (let col = 0; col < label.length; col++) {
+			let cell = table.rows[row].cells[col];
+			if (!cell.className) continue;
+			let flag = String.fromCodePoint(flagchr + row) + String.fromCodePoint(flagchr + col);
+			cell.innerHTML = `<big>${flag}</big>&nbsp;` + cell.innerHTML;
+			if (nowidth === undefined) {
+				// assume AA is invalid, compare its size to validate following glyphs
+				nowidth = cell.firstChild.offsetWidth;
+			}
+			if (cell.firstChild.offsetWidth == nowidth) {
+				cell.firstChild.remove();
+			}
+		}
+	}
+//--></script>
+