word.plp

   1 <(common.inc.plp)><:
   2
   3 my $wordlist = 'wordlist.inc.pl';
   4 Html({
   5         title => 'words cheat sheet',
   6         version => '1.0',
   7         description => "Visual words",
   8         keywords => [qw'
   9                 language
  10         '],
  11         data => [$wordlist],
  12         raw => <<'EOT',
  13 <style>
  14 ul {
  15         display: flex;
  16         flex-wrap: wrap;
  17         align-items: end;
  18         margin: -1px;
  19 }
  20 li, ul ul {
  21         display: contents;
  22         height: 100%;
  23 }
  24 figure {
  25         flex: 200px;
  26         flex-grow: 1;
  27         max-width: 300px;
  28         overflow: hidden;
  29         padding: 1px;
  30 }
  31 figcaption > small {
  32         display: inline-block;
  33 }
  34
  35 figure:hover ~ ul figure,
  36 figure:hover ~ ul figcaption {
  37         background: #CCC;
  38         color: #000;
  39 }
  40 figure:hover ~ ul figcaption {
  41         background: rgba(255, 255, 255, .5);
  42 }
  43
  44 figure, figcaption {
  45         transition: all .5s ease-in;
  46 }
  47 li.parent:hover > figure > figcaption,
  48 figure:hover > figcaption {
  49         font-size: 175%;
  50         right: 50%;
  51         bottom: 50%;
  52         transform: translate(50%, 50%);
  53         margin-left: -60%; /* keep width */
  54 }
  55 </style>
  56 EOT
  57 });
  58
  59 :>
  60 <h1>Words</h1>
  61
  62 <p>
  63 Under construction.
  64 Zie ook <a href="/dieren">dieren</a>.
  65 </p>
  66
  67 <:
  68 my %table = do 'wordlist.inc.pl' or die $@ // $!;
  69
  70 sub showimg {
  71         my ($name) = @_;
  72         my ($img) = $name =~ /^([\w -]+)/;
  73         $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
  74         $name =~ s{/(.*)}{ <small>($1)</small>}g;
  75         my $hidden = $name =~ s/\?$//;
  76         my $alt = $name;
  77         $name = "<q>$name</q>" if $name =~ s/\?$//;
  78
  79         if ($img and -e ($img = "data/word/$img.jpg")) {
  80                 my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
  81                 if ($alt) {
  82                         $name .= " ($alt)";
  83                 }
  84                 else {
  85                         $alt = $name;
  86                 }
  87                 $name = "<figcaption>$name</figcaption>";
  88                 $name .= sprintf '<img src="/%s" alt="%s" />', $img, $alt;
  89         }
  90         elsif ($hidden) {
  91                 $name = "<figcaption>$name?</figcaption>";
  92         }
  93         return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
  94 }
  95
  96 sub printimgs {
  97         say '<ul>';
  98         for my $row (@_) {
  99                 printf '<li%s>', defined $table->{$row} && ' class="parent"';
 100                 print showimg($row);
 101                 printimgs(@{$_}) for $table->{$row} // ();
 102                 print '</li>';
 103         }
 104         say '</ul>';
 105 }
 106
 107 printimgs(@{$table->{''}});