keyboard/altgr/index.inc.plp

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