Html({
title => 'country code cheat sheet',
- version => 'v1.1',
+ version => '1.3',
description =>
"Table of ISO-3166-1 country codes with the names of reserved territories.",
keywords => [qw'country code cc tld cctld continent territory land table'],
stylesheet => [qw'light dark circus mono red'],
+ data => ['data/countries.inc.pl'],
});
:>
<h1>ISO-3166-1α2 Country codes</h1>
<:
-my $cc = do 'countries.inc.pl';
+my $cc = Data('data/countries');
{
- printf '<table class="mcmap">';
+ printf '<table class="ccmap">';
print '<col><colgroup span="26">';
for my $section (qw{thead}) {
print "<$section><tr><th>↳";
next;
};
my ($name, $class, $short, $ref) = @$country;
+ $name .= " → $ref" if $ref;
$ref ||= $code;
- local $_ = $ref;
+ my $cell;
if (exists $get{show}) {
- my $img = "data/flag/$ref.png";
- $_ = sprintf '<img src="/%s" alt="%s">', $img, $ref if -e $img;
+ sub showflag {
+ my ($cc) = @_;
+ my $img = "data/flag/$cc.png";
+ return -e $img &&
+ sprintf '<img src="/%s" alt="%s">', $img, $cc;
+ }
+
+ $cell = showflag($code) // join(' ',
+ map { showflag($_) || $_ } split(/ /, $ref)
+ );
}
else {
- $_ = EscapeHTML($short || $name);
- $name .= " → $ref" if $ref and $ref ne $code;
+ $cell = EscapeHTML($short || $name);
}
printf "\n".'<td class="%s" title="%s">%s',
- $_ ? 'X '.$class : '', EscapeHTML("$code: $name"), $_;
+ $cell ? 'X '.$class : '', EscapeHTML("$code: $name"), $cell;
}
print "\n";
}
- print "</table>\n";
+ say '</table>';
}
:>
</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> ` + 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>
+