word.plp

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