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 @font-face {
  51         font-family: osicons;
  52         src: url(/osicon.ttf);
  53 }
  54 .icon {
  55         font-family: osicons;
  56 }
  57 .keys.cmp tbody .ni {
  58         font-size: 80%;
  59         padding: 0 .2em;
  60 }
  61
  62 .graph {
  63         display: block;
  64         line-height: 1ex;
  65         height: 1.2ex;
  66         margin-top: .4ex;
  67 }
  68 .graph ~ .graph {
  69         /* subsequent graphs */
  70         height: .7ex;
  71 }
  72 .graph > * {
  73         display: inline-block;
  74         height: 100%;
  75         vertical-align: top;
  76 }
  77 .graph > label {
  78         font-size: 75%;
  79         margin-right: .2em;
  80 }
  81 .graph > span {
  82         border: 1px solid #000;
  83         border-right-width: 0;
  84         font-size: 0;
  85 }
  86 .graph > :last-of-type {
  87         border-right-width: 1px;
  88 }
  89 .graph > .ext {
  90         border-left: 0; /* assume following unext */
  91 }
  92
  93 img {
  94         object-fit: cover;
  95         height: 100%;
  96         vertical-align: middle;
  97 }
  98 </style>
  99 .
 100 });
 101
 102 :>
 103 <h1>Extended keyboards</h1>
 104
 105 <p>Overview of available key layouts with AltGr or similar modifier keys.</p>
 106
 107 <:
 108 my @sample = split /(?<!\+)/, $get{sample} // 'asSci1!+1';
 109 require Shiar_Sheet::Keyboard;
 110 use List::Util qw( uniq max );
 111
 112 my %caticon = (
 113         legacy  => qq{<span class=icon title="deprecated">\N{TOP HAT}</span>},
 114         windows => qq{<span class=icon title="Windows">\x{1FA9F}</span>}, # \N{WINDOW}
 115         macos   => qq{<span class=icon title="MacOS">\N{RED APPLE}</span>},
 116         xorg    => qq{<span class=icon title="Xorg">\N{PENGUIN}</span>},
 117 );
 118
 119 printf '<section class="%s">', @sample ? 'section' : 'gallery';
 120 if (@sample) {
 121         print '<table class="big keys cmp">';
 122         print '<thead><tr><th colspan=2>';
 123         print "<th>$_" for @sample;
 124         say '</tr></thead>';
 125 }
 126 my %idx = map {s/\Q.inc.pl\E$//; ($_ => eval{ Data($_) })} @incs;
 127 my $most = max(map { scalar keys %{$_->{def}{''}} } values %idx);
 128 for my $inc (sort {
 129         $idx{$a}{category} cmp $idx{$b}{category} || $a cmp $b
 130 } keys %idx) {
 131         print @sample ? '<tr><th>' : '<figure>';
 132         printf '<a href="/%s">', $inc =~ s/\.eng$//r;
 133         my $table = $idx{$inc};
 134         my $title = $table && $table->{title} || $inc;
 135
 136         unless (@sample) {
 137                 if ($table and my $img = $table->{image}) {
 138                         EscapeHTML $name = $table->{imagealt} // $img =~ m{.*/([^/.]*)};
 139                         print qq{<img src="/$img" alt="$name" />};
 140                 }
 141                 printf '<figcaption>%s</figcaption>', $title;
 142                 say '</a></figure>';
 143         }
 144         else {
 145                 print $title;
 146                 print '</a>', "\n\t";
 147                 my $keys = Shiar_Sheet::Keyboard->new($table);
 148                 for my $mode ($keys->{mode} ? sort keys %{ $keys->{mode} } : '') {
 149                         my %inventory;
 150                         $inventory{$_}++ for grep { /^g[2-9]/ } map { s/ (?!ext).*//r }
 151                                 values %{ $keys->{def}{$mode} };
 152                         print '<span class=graph>';
 153                         print "<label>$_</label>" for $keys->{key}{$mode} =~ s/\s.*//r || ();
 154                         for my $g (sort keys %inventory) {
 155                                 printf '<span class="%s" style="width:%.0f%%" title="%3$d %4$s"> %s</span>',
 156                                         $g, $_/$most*100, $_,
 157                                         join(' ', map {
 158                                                 $keys->{flag}{$_}[0] || 'extra'  # legend label of each class
 159                                         } reverse split / /, $g)
 160                                         for $inventory{$g};
 161                         }
 162                         say '</span>';
 163                 }
 164                 print "\t<td class=ni>";
 165                 print join ' ', map { $caticon{$_} // () } split m{/}, $keys->{category};
 166                 say '';
 167                 $keys->print_key('', $_, $keys->{def}{''}{$_} // 'ni') for @sample;
 168                 say '</tr>';
 169         }
 170 }
 171 print '</table>' if @sample;
 172 :></section>
 173