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
  32 figure:hover ~ ul figure,
  33 figure:hover ~ ul figcaption {
  34         background: #CCC;
  35         color: #000;
  36 }
  37 figure:hover ~ ul figcaption {
  38         background: rgba(255, 255, 255, .5);
  39 }
  40
  41 figure, figcaption {
  42         transition: all .5s ease-in;
  43 }
  44 li.parent:hover > figure > figcaption,
  45 figure:hover > figcaption {
  46         font-size: 175%;
  47         right: 50%;
  48         bottom: 50%;
  49         transform: translate(50%, 50%);
  50         margin-left: -60%; /* keep width */
  51 }
  52 </style>
  53 EOT
  54 });
  55
  56 :>
  57 <h1>Words</h1>
  58
  59 <p>
  60 Under construction.
  61 Zie ook <a href="/dieren">dieren</a>.
  62 </p>
  63
  64 <:
  65 my %table = do 'wordlist.inc.pl' or die $@ // $!;
  66
  67 sub showimg {
  68         my ($name) = @_;
  69         my ($img) = $name =~ /^([\w-]+)/;
  70         $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
  71         $name =~ y/_/ /;
  72         my $hidden = $name =~ s/\?$//;
  73         my $alt = $name;
  74         $name = "<q>$name</q>" if $name =~ s/\?$//;
  75
  76         if ($img and -e ($img = "data/word/$img.jpg")) {
  77                 my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
  78                 if ($alt) {
  79                         $name .= " ($alt)";
  80                 }
  81                 else {
  82                         $alt = $name;
  83                 }
  84                 $name = "<figcaption>$name</figcaption>";
  85                 $name .= sprintf '<img src="/%s" alt="%s" />', $img, $alt;
  86         }
  87         elsif ($hidden) {
  88                 $name = "<figcaption>$name?</figcaption>";
  89         }
  90         return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
  91 }
  92
  93 sub printimgs {
  94         say '<ul>';
  95         for my $row (@_) {
  96                 printf '<li%s>', defined $table->{$row} && ' class="parent"';
  97                 print showimg($row);
  98                 printimgs(@{$_}) for $table->{$row} // ();
  99                 print '</li>';
 100         }
 101         say '</ul>';
 102 }
 103
 104 printimgs(@{$table->{''}});