keyboard/altgr/index.inc.plp

   1 <: # included from keyboard.plp
   2 use 5.014;
   3 use warnings;
   4 use utf8;
   5
   6 my @incs = glob 'keyboard/altgr/*.eng.inc.pl';
   7
   8 Html({
   9         title => "altgr keyboard cheat sheets",
  10         version => '1.2',
  11         description => [
  12                 "Overview of alternate keyboard modes,",
  13                 "offering extended Unicode characters if a modifier key",
  14                 "(such as AltGr or option) is pressed.",
  15         ],
  16         keywords => [qw'
  17                 sheet cheat reference overview keyboard altgr option
  18         '],
  19         image => 'data/keyboard/thumb/ibm-m.jpg',
  20         stylesheet => [qw( light dark circus mono red )],
  21         data => ['keyboard/altgr/index.inc.plp', @incs],
  22         raw => <<'.',
  23 <style>
  24 .keys.cmp {
  25         display: inline-table; /* centered */
  26         float: none;
  27         margin: 0;
  28         border-collapse: separate;
  29         border-spacing: 2px;
  30         border-spacing: .4vw; /* inline td margin equivalent */
  31 }
  32 .keys.big.cmp tbody {
  33         font-size: 150%;
  34 }
  35 .keys.cmp tbody {
  36         display: table-row-group;
  37 }
  38 .keys.cmp tr {
  39         display: table-row;
  40 }
  41 .keys.cmp tr > * {
  42         display: table-cell;
  43         position: static; /* under sticky thead */
  44 }
  45 .keys.cmp tbody th {
  46         padding-right: 1ex;
  47         text-align: right;
  48 }
  49
  50 .graph {
  51         display: block;
  52         line-height: 1ex;
  53         height: 1.2ex;
  54         margin-top: .4ex;
  55 }
  56 .graph ~ .graph {
  57         /* subsequent graphs */
  58         height: .7ex;
  59 }
  60 .graph > * {
  61         display: inline-block;
  62         height: 100%;
  63         vertical-align: top;
  64 }
  65 .graph > label {
  66         font-size: 75%;
  67         margin-right: .2em;
  68 }
  69 .graph > span {
  70         border: 1px solid #000;
  71         border-right-width: 0;
  72         font-size: 0;
  73 }
  74 .graph > :last-of-type {
  75         border-right-width: 1px;
  76 }
  77 .graph > .ext {
  78         border-left: 0; /* assume following unext */
  79 }
  80
  81 img {
  82         object-fit: cover;
  83         height: 100%;
  84         vertical-align: middle;
  85 }
  86 </style>
  87 .
  88 });
  89
  90 :>
  91 <h1>Extended keyboards</h1>
  92
  93 <p>Overview of available key layouts with AltGr or similar modifier keys.</p>
  94
  95 <:
  96 my @sample = split /(?<!\+)/, $get{sample} // 'asSci1!+1';
  97 require Shiar_Sheet::Keyboard;
  98 use List::Util qw( uniq max );
  99
 100 my %caticon = (
 101         legacy  => "\N{TOP HAT}",
 102         windows => "\x{1FA9F}", # \N{WINDOW}
 103         macos   => "\N{RED APPLE}",
 104         xorg    => "\N{PENGUIN}",
 105 );
 106
 107 printf '<section class="%s">', @sample ? 'section' : 'gallery';
 108 if (@sample) {
 109         print '<table class="big keys cmp">';
 110         print '<thead><tr><th colspan=2>';
 111         print "<th>$_" for @sample;
 112         say '</tr></thead>';
 113 }
 114 my %idx = map {s/\Q.inc.pl\E$//; ($_ => eval{ Data($_) })} @incs;
 115 my $most = max(map { scalar keys %{$_->{def}{''}} } values %idx);
 116 for my $inc (sort {
 117         $idx{$a}{category} cmp $idx{$b}{category} || $a cmp $b
 118 } keys %idx) {
 119         print @sample ? '<tr><th>' : '<figure>';
 120         printf '<a href="/%s">', $inc =~ s/\.eng$//r;
 121         my $table = $idx{$inc};
 122         my $title = $table && $table->{title} || $inc;
 123
 124         unless (@sample) {
 125                 if ($table and my $img = $table->{image}) {
 126                         EscapeHTML $name = $table->{imagealt} // $img =~ m{.*/([^/.]*)};
 127                         print qq{<img src="/$img" alt="$name" />};
 128                 }
 129                 printf '<figcaption>%s</figcaption>', $title;
 130                 say '</a></figure>';
 131         }
 132         else {
 133                 print $title;
 134                 print '</a>', "\n\t";
 135                 my $keys = Shiar_Sheet::Keyboard->new($table);
 136                 for my $mode ($keys->{mode} ? sort keys %{ $keys->{mode} } : '') {
 137                         my %inventory;
 138                         $inventory{ s/ (?!ext).*//r }++ for values %{ $keys->{def}{$mode} };
 139                         print '<span class=graph>';
 140                         print "<label>$_</label>" for $keys->{key}{$mode} =~ s/\s.*//r || ();
 141                         for my $g (sort keys %inventory) {
 142                                 printf '<span class="%s" style="width:%.0f%%" title="%3$d %4$s"> %s</span>',
 143                                         $g, $_/$most*100, $_,
 144                                         join(' ', map {
 145                                                 $keys->{flag}{$_}[0] || 'extra'  # legend label of each class
 146                                         } reverse split / /, $g)
 147                                         for $inventory{$g};
 148                         }
 149                         say '</span>';
 150                 }
 151                 print "\t<th>";
 152                 print join '<br>', map { $caticon{$_} // () } split m{/}, $keys->{category};
 153                 say '';
 154                 $keys->print_key('', $_, $keys->{def}{''}{$_} // 'ni') for @sample;
 155                 say '</tr>';
 156         }
 157 }
 158 print '</table>' if @sample;
 159 :></section>
 160