common: separate javascript include to set styles

[sheet.git] / countries.plp

diff --git a/countries.plp b/countries.plp
index dfe9a4859a96d362cad0c22db24da7cfbe2f1f91..c11a3e8c6192f1d013b64726eff98aa4d4700829 100644 (file)
--- a/countries.plp
+++ b/countries.plp
@@ -6,7 +6,6 @@ Html({
        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'],
 });
 
@@ -14,7 +13,7 @@ Html({
 <h1>ISO-3166-1α2 Country codes</h1>
 
 <:
-my $cc = do 'data/countries.inc.pl';
+my $cc = Data('data/countries');
 
 {
        printf '<table class="ccmap">';
@@ -46,7 +45,7 @@ my $cc = do 'data/countries.inc.pl';
                                }
 
                                $cell = showflag($code) // join(' ',
-                                       map { showflag($_) || $_ } split / /, $ref
+                                       map { showflag($_) || $_ } split(/ /, $ref)
                                );
                        }
                        else {
@@ -89,3 +88,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>
+